vue-cli的工程模板与构建工具详解

vue-cli提供的脚手架只是一个最基础的，也可以说是Vue团队认为的工程结构的一种最佳实践。对于初学者或者以前曾从事AngularJS/React开发的用户来说，可能对开发环境有自已习惯性用法和熟悉的工具，但我建议用Vue来开发的话还是先按照官方推荐的来做，待我们掌握了Vue官方推荐的环境配置后再按照实际情况进行相应的调整，这样会少走一些弯路，节省不少时间。

我们下面要讨论的工程结构都是围绕webpack-simple与webpack展开的，browserify也只是在这两个模板的基础上移植的一个版本，所以就不过多地赘述。

webpack和webpack-simple这两个模板从文件结构上看几乎是一致的，只是一个是简化版，另一个是完全版。其实不然，webpack-simple是基于Webpack@2.1.0-beta.25进行配置的版本，而webpack模板则是基于Webpack ^1.3.2配置的。这两个版本暂时是互相不兼容的，而且使用的依赖包的版本也不一样，所以不要将webpack模板创建的项目文件结构复制到webpack-simple中进行直接的取代升级，而是需要将node_modules内安装的所有的依赖包删除，然后重新安装才有可能迁移成功，这一点是需要注意的。

1.webpack-simple模板

以下为webpack-simple模板构建的项目的工程目录结构：

├── README.md
├── index.html
├── package.json
├── src
│  ├── App.vue
│  ├── assets
│  │  └── logo.png
│  └── main.js
└── webpack.config.js

webpack-simple只配置了Babel和Vue的编译器，其他的一无所有。这个模板值得一提的就是src目录，所有的Vue代码源程序都放置在这个目录中，五个模板构建出来的这个src目录都是一样的，只是在webpack模板中多了components目录用于存放公用组件。

2.webpack模板

webpack模板的工程目录结构如下：

├── README.md
├── build
│  ├── build.js
│  ├── check-versions.js
│  ├── dev-client.js
│  ├── dev-server.js
│  ├── utils.js
│  ├── webpack.base.conf.js
│  ├── webpack.dev.conf.js
│  └── webpack.prod.conf.js
├── config
│  ├── dev.env.js
│  ├── index.js
│  ├── prod.env.js
│  └── test.env.js
├── index.html
├── package.json
├── src
│  ├── App.vue
│  ├── assets
│  │  └── logo.png
│  ├── components
│  │  └── Hello.vue
│  └── main.js
├── static
└── test
   ├── e2e
   │  ├── custom-assertions
   │  │  └── elementCount.js
   │  ├── nightwatch.conf.js								 
 1/3    1 2 3 下一页 尾页