使用过Vue的朋友们应该非常清楚，使用vue-cli构建的项目十分简单，今天和大家说一下有关于Vue-cli的目录结构，因为这部分我一直也很懵逼！
目录的机构
构建好项目后，目录应该是这样的
·
|--build //webpack相关代码文件夹
| |--build.js //生产环境结构代码
| |--check-version.js //检查node、npm、等版本
| |--dev-client.js //热加载相关代码
| |--dev-server.js //本地服务器
| |--utils.js //构建工具
| |-- *webpack.base.conf.js* //webpack基本配置
| |--webpack.dev.conf.js //webpack开发环境配置
| |--webpack.prod.conf.js //webpack生产环境配置
|--config //项目开发环境配置
| |--dev.env.js //开发环境变量
| |--index.js //项目基本配置
| |--dev.env.js //开发环境变量
| |--prod.env.js //生产环境变量
|--src //项目源代码目录
| |--components //组件目录
| |--store //Vue默认logo目录，在真正开发的时候，我把静态文件放在了static目录下
| |--APP.vue //默认组件，入口文件
| |--main.js //程序入口文件，引用、加载各种组件
|--static //静态文件目录，比如：CSS、图片、等等静态文件
|--index.html //入口文件
·
需要注意的是 webpack.base.conf.js文件，因为是用vue-cli+webpack构建的项目，区别于自己搭建的项目，网上有很多文章，告诉大家改一个名曰：webpack.conf.js，如果是自己搭建的项目是有这个文件的，如果是用vue-cli构建的项目中是无法找到这个文件的，大家一定要注意，我在这个坑里淹了好久；
举个例子
比如，我要在用Vue-cli构建的项目中加入Jquery；
- 首先，在命令行进入项目根目录，执行 npm install jquery
- 然后用你喜欢的IDE（推荐webstrom），找到webpack.base.conf.js文件，在头部引入var webpack = require("webpack")，接着在webpack.base.conf.js中找到module.exports的最后加入，
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
- 现在重新在命令行 npm run dev
- 最后在main.js中引入 import $ from 'jquery'就可以了
