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 │ ├── runner.js │ └── specs │ └── test.js └── unit ├── index.js ├── karma.conf.js └── specs └── Hello.spec.js
这个webpack模板的结构是非常合理的，而且配置的工具也相当丰富，当投入真正的项目开发时会觉得模板的实用性很强。
所以我们很有必要花些时间将这个模板的结构以及它所提供的工具配置了解清楚，掌握Vue官方团队对项目开发的环境配置与使用思路，以便于我们能结合自己的实际情况进行适当的配置与调整。
在上文中我们已经提过src目录的用法与约定，此处就不再赘述。在项目的根目录下多了4个目录，它们的作用分别如下：
● build——存放用于编译用的webpack配置与相关的辅助工具代码；
● config——存放三大环境配置文件，用于设定环境变量和必要的路径信息；
● test——存放E2E测试与单元测试文件以及相关的配置文件；
● static——存放项目所需要的其他静态资源文件；
● dist——存放运行npm run build指令后的生产环境输出文件，可直接部署到服务器对应的静态资源文件夹内，该文件夹只有在运行build之后才会生成。
可见，这些目录的存在是依赖于模板内配置的开发工具的，webpack模板配置以下的工具。
3.构建工具
由于开发、测试与生产三大运行环境都需要进行构建，而且针对不同的环境要求，它的配置会有一定的区别，后面的学习中我们会对具体的配置进行一些定制与修改，我们应该清楚地了解webpack模板是如何进行构建的。
● 编译开发环境
在开发环境下通过以下指令加载运行Vue项目：
$ npm run dev
这个指令的配置是在package.json的script属性中设置的，实质上它是由npm来引导执行入口程序dev-server.js完成以下的加载过程：
(1) 加载环境变量
该环节从config目录加载index.js和dev.env.js两个模块，准备开发调试环境所必需的一些目录和全局变量。
(2) 合并webpack配置
在build目录下一共有三个webpack的配置文件：
webpack.base.conf.js——公用的基本webpack配置；
webpack.dev.conf.js——开发环境专用的webpack配置项；
webpack.prod.conf.js——生产环境专用的webpack配置项。