关于Vue-cli脚手架webpack模板的目录结构

使用过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'就可以了