vue2+vuex+vue-router+webpack+es6搭建项目架构

vue全家桶包括vue，vue-router，vuex等模块，vue负责渲染，vue-route负责路由，vuex负责状态存储

附上项目演示地址：vue-tmall

Vue-cli脚手架

首先需要搭建起一个项目的结构，vue提供了vue-cli脚手架来生成vue项目的结构，通过 npm install vue-cli -g全局安装，

然后通过 vue init webpack my-project 命令就可以生成项目结构

|-- build                     // 编译打包文件夹
|-- config
|   |-- dev.env.js            // 开发环境配置
|   |-- index.js              // 打包配置
|   |-- prod.env.js           // 生产环境
|   |-- test.env.js           // 测试
|-- src
|   |-- assets                // 静态资源
|   |-- components            // 组件
|   |-- router                // vue-router路由
|-- App.vue                   // vue入口文件
|-- main.js                   // vue实例化
|-- .babelrc                  // babel配置
|-- index.html                // 首页
|-- package.json              // 项目信息

整个项目结构还是挺清晰的，最后在这基础上我把vuex也加进来，再项目根目录创建

|-- store
|   |-- modules             // 分模块存储
|   |   |-- module1.js      // 模块1...
|   |-- actions.js          // 动作合集
|   |-- getters.js          // mapGetters
|   |-- index.js            // 导出vuex实例
|   |-- mutations-types.js  // 改变store状态

最后命令行输入 npm run dev 即可运行项目了！

Vue-router路由-懒加载

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

我们要做的就是把路由对应的组件定义成异步组件：

const Foo = resolve => {
  // require.ensure 是 Webpack 的特殊语法，用来设置 code-split point
  // （代码分块）
  require.ensure(['./Foo.vue'], () => {
    resolve(require('./Foo.vue'))
  })
}

// 另一种简单的写法
const Foo = resolve => require(['./Foo.vue'], resolve)

使用方法

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

有时候我们想把某个路由下的所有组件都打包在同个异步 chunk 中。只需要给 chunk 命名，提供 require.ensure第三个参数作为 chunk 的名称:

// Webpack 将相同 chunk 下的所有异步模块打包到一个异步块里面 —— 这也意味着我们无须明确列出 require.ensure 的依赖（传空数组就行）。
const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')