1

1.用淘寶鏡像代替npm 
2.cnpm install webpack -g
3.cnpm install vue -cli -g(或者直接下載 cnpm install --global vue-cli)
4.vue init webpack 項(xiàng)目名稱
5.cd 項(xiàng)目名稱
6.cnpm run dev
7.(如果沒有nomdel可以直接下載cnpm install)
下載完之后
1. build 文件夾
webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js三個(gè)webpack的配置文件，分別是基本webpack配置、開發(fā)環(huán)境配置、生產(chǎn)環(huán)境配置。實(shí)際上這些文件里面的內(nèi)容，一些簡單的配置都已經(jīng)有了，包括入口文件、插件、loader、熱更新等都已經(jīng)配置好了。我們要做的只是根據(jù)自己的項(xiàng)目有什么loader需要增加的，比如生成環(huán)境需要加上UglifyJsPlugin插件等可以自行配置，或者一些插件增加或者不需要的刪除，其實(shí)都是和業(yè)務(wù)相關(guān)了，其他的都可以不需要動。
2. config 文件夾：
這幾個(gè)配置文件我覺得最主要的就是**index.js 這個(gè)文件進(jìn)行配置代理服務(wù)器**，這個(gè)地方和我們息息相關(guān)，和后臺聯(lián)調(diào)就是在這里設(shè)置一個(gè)地址就可以了。**打開index.js 找到“proxyTable“這個(gè)屬性，然后在里面加上對應(yīng)的后臺地址即可![k4GJeTl.png](https://upload-images.jianshu.io/upload_images/13984221-bc4273add807522d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
3. src文件夾：
這個(gè)文件夾是整個(gè)項(xiàng)目最主要以及使用頻率最高的文件夾。
“assets”: 共用的樣式、圖片
“components”: 業(yè)務(wù)代碼存放的地方，里面分成一個(gè)個(gè)組件存放，一個(gè)頁面是一個(gè)組件，一個(gè)頁面里面還會包著很多組件
“router”: 設(shè)置路由
“App.vue”: vue文件入口界面
“main.js：對應(yīng)App.vue 創(chuàng)建vue實(shí)例，也是入口文件，對應(yīng)webpack.base.config.js里的入口配置
4.static 文件夾：
存放的文件不會經(jīng)過webpack處理，可以直接引用，例如swf文件如果要引用可以在webpack配置對swf后綴名的文件處理的loader，也可以直接將swf文件放在這個(gè)文件夾引用
5.package.json:
這個(gè)文件有兩部分是有用的：scripts 里面設(shè)置命令，例如設(shè)置了dev用于調(diào)試則我們開發(fā)時(shí)輸入的是
npm run dev ；例如設(shè)置了build 則是輸入 npm run build 用于打包;另一部分是這里可以看到我們需要的依賴包,在dependencies和devDependencies中，分別對應(yīng)全局下載和局部下載的依賴包
6下載依賴包
上一步我們已經(jīng)生成好項(xiàng)目，現(xiàn)在打開之前說過的package.json 文件，找到devDependencies 和 dependencies ，在這里面可以刪掉我們不需要的，其他就則都需要使用 npm install 下載安裝，例如vue： npm install vue –save-dev
這個(gè)過程會生成一個(gè)node_modules 文件夾，這一個(gè)過程可能會有一點(diǎn)耗時(shí)間，但是也是傻瓜式，一個(gè)個(gè)下載，下載好之后輸入npm run dev 。如果有哪些缺漏的都會提示再補(bǔ)下載就好了
當(dāng)所有依賴包都下載好之后，輸入命令：npm run dev 運(yùn)行就可以看到一個(gè)自帶的默認(rèn)頁面打開。此時(shí)項(xiàng)目就已經(jīng)全部搭建好并且運(yùn)行了~炒雞簡單吧，總結(jié)下來其實(shí)只有四步
npm install --global vue-cli 下載vue-cli腳手架
vue init webpack test 生成項(xiàng)目，形成基本結(jié)構(gòu)
npm install 依賴包
npm run dev 運(yùn)行