vue项目总结心得

vue项⽬总结⼼得

⼀、vue项⽬架构1.1 ⽂件分析

1.1.1 index.html⽂件（有时会在public⽂件夹下）

是⽤户看到的页⾯，也就是根组件要挂载的元素所在的组件app通常在⾥⾯要进⾏⼀些关于viewport的初始化

1.1.2 src/main.js⽂件

整个vue项⽬的⼊⼝⽂件

这个⽂件回要引⼊全局的⽂件（包括但不限于）：

全局css⽂件

全局使⽤的库⽂件vue-router⽂件

store（vuex）⼊⼝⽂件

定义根组件，要use vue的⼀些功能(如vuex和vue-router)，并且将根组件挂载到index.html的id为app的dom上

1.1.3 src/App.vue⽂件

这⾥⾯就是App根组件，也就是要挂载到index.html上的组件，显⽰内容就是它

通常⾥⾯就⼀个内容，router-view，⽤来显⽰当前url对应的页⾯（也就是利⽤路由）

1.1.4 src/views⽂件夹

页⾯⽂件，⾥⾯都是vue的组件，每个组件就是⼀个页⾯，由当前输⼊的url决定通过路由显⽰哪个页⾯

这⾥的页⾯⼜可以分为好⼏个组成部分 也就是好⼏个⼦组件，所以这⾥的组件实际上是⽤来将某⼀页⾯上的⼀些⼩组件整合起来的东西

⽐如电⼦书的书城页⾯和书架页⾯就是两个不同的页⾯，所以在views⽂件夹下就有store.vue和shelf.vue两个页⾯

这两个页⾯⾥⼜包含有其他⼩组件，store.vue中有 StoreHeader.vue、StoreFooter.vue、Storexxx.vue等，store.vue就引⼊这些组件并展⽰在页⾯中（这些个⼩组件就放在src/components/store⽂件夹下）

1.1.5 src/components⽂件夹

组件⽂件，这个⽂件夹下还可以继续有⽂件夹，代表着不同页⾯下的⼩组件，⽐如上⾯的例⼦，src/views下有store.vue⽂件代表书城页⾯，src/components⽂件夹下就有store⽂件夹来存放这个页⾯中的⼩组件

1.1.6 src/router⽂件夹

vue-router相关⽂件

下⾯的index.js中，通过引⽤vue-router中的⽅法来创建router对象，⾥⾯的routes就存放着路由路由 根据url的不同，显⽰不同的页⾯

1.1.7 src/assets⽂件夹

存放样式⽂件（字体也可）

下⾯可以有styles来专门放全局样式，或者是某⼀部分的样式，到时候在要使⽤的地⽅就直接引⼊即可

1.1.8 src/store⽂件夹

vuex相关⽂件