使用過Vue的朋友們應(yīng)該非常清楚券敌，使用vue-cli構(gòu)建的項目十分簡單唾戚，今天和大家說一下有關(guān)于Vue-cli的目錄結(jié)構(gòu)，因為這部分我一直也很懵逼待诅！
目錄的機構(gòu)
構(gòu)建好項目后叹坦，目錄應(yīng)該是這樣的
·
|--build //webpack相關(guān)代碼文件夾
| |--build.js //生產(chǎn)環(huán)境結(jié)構(gòu)代碼
| |--check-version.js //檢查node、npm卑雁、等版本
| |--dev-client.js //熱加載相關(guān)代碼
| |--dev-server.js //本地服務(wù)器
| |--utils.js //構(gòu)建工具
| |-- *webpack.base.conf.js* //webpack基本配置
| |--webpack.dev.conf.js //webpack開發(fā)環(huán)境配置
| |--webpack.prod.conf.js //webpack生產(chǎn)環(huán)境配置
|--config //項目開發(fā)環(huán)境配置
| |--dev.env.js //開發(fā)環(huán)境變量
| |--index.js //項目基本配置
| |--dev.env.js //開發(fā)環(huán)境變量
| |--prod.env.js //生產(chǎn)環(huán)境變量
|--src //項目源代碼目錄
| |--components //組件目錄
| |--store //Vue默認logo目錄募书，在真正開發(fā)的時候，我把靜態(tài)文件放在了static目錄下
| |--APP.vue //默認組件测蹲，入口文件
| |--main.js //程序入口文件莹捡，引用、加載各種組件
|--static //靜態(tài)文件目錄扣甲，比如：CSS道盏、圖片、等等靜態(tài)文件
|--index.html //入口文件
·
需要注意的是 webpack.base.conf.js文件文捶，因為是用vue-cli+webpack構(gòu)建的項目荷逞，區(qū)別于自己搭建的項目粹排，網(wǎng)上有很多文章，告訴大家改一個名曰：webpack.conf.js坠敷，如果是自己搭建的項目是有這個文件的，如果是用vue-cli構(gòu)建的項目中是無法找到這個文件的限次，大家一定要注意卖漫，我在這個坑里淹了好久羊始；
舉個例子
比如突委，我要在用Vue-cli構(gòu)建的項目中加入Jquery匀油；
- 首先钧唐，在命令行進入項目根目錄，執(zhí)行 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"
})
]
- 現(xiàn)在重新在命令行 npm run dev
- 最后在main.js中引入 import $ from 'jquery'就可以了
