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相关文件