? ? ? ? 本篇教程將介紹如何使用webpack創(chuàng)建一個(gè)簡易vue項(xiàng)目慌申。首先雷激，我們要知道webpack是什么？概括的講厨幻，webpack是目前比較流行的一款模塊化打包工具相嵌，幫助開發(fā)人員整合前端資源。打一個(gè)比喻况脆，用webpack創(chuàng)建項(xiàng)目就像在廚房用各種廚具做菜饭宾，本來洗菜、切菜格了、調(diào)味看铆、整理廚具都需要自己親力親為，但是有了webpack盛末，這些通通幫我們自動(dòng)化搞定弹惦。我們只需要關(guān)注這些菜本身，然后告訴webpack這個(gè)大工具怎么做悄但，webpack會自動(dòng)幫我們烹飪棠隐。?關(guān)于webpack的詳細(xì)信息我們將會在以后的文章中介紹，這里我們先學(xué)會用工具制作出我們需要的項(xiàng)目檐嚣。
? ? ? ? 有webpack這個(gè)工具助泽，我們需要什么？工具運(yùn)行需要通電净嘀、需要配套的設(shè)施環(huán)境报咳。webpack所需的輔助是nodeJs。為什么用nodeJs挖藏？因?yàn)橛妹钚猩蓈ue項(xiàng)目框架需要npm包管理器來安裝,而npm又是在安裝nodeJs的時(shí)候同時(shí)安裝的暑刃。（npm能很好地和諸如 webpack 或 Browserify 等模塊打包器配合使用）。
總結(jié)：
npm : nodeJs中的包管理器
webpack:整合所有前端需要的靜態(tài)資源膜眠，對資源進(jìn)行打包岩臣，合并等
vue-cli :用戶生成的Vue工程的腳手架溜嗜。
一、安裝nodeJs
? ? ? ? 在官網(wǎng)https://nodejs.org/en/上選擇與系統(tǒng)匹配的版本下載并安裝node架谎，安裝過程是一路馳騁下一步就ok了炸宵。
安裝完畢，進(jìn)入nodeJs的安裝目錄觀察一下谷扣，如下圖所示：
打開命令行工具（win+R）,輸入node -v 命令土全，查看node的版本，若出現(xiàn)對應(yīng)的版本號会涎，說明ok了裹匙。輸入 npm? -v 命令，可以顯示npm的版本信息末秃。
二概页、安裝淘寶鏡像庫
????????輸入如下cmd命令安裝npm淘寶鏡像：npm install -g cnpm --registry=https://registry.npm.taobao.org（如果訪問外網(wǎng)比較慢，以后再用到npm的地方可以直接用cnpm來代替 ）练慕《璩祝或者可以用?npm 命令指定下載源：npm config set registry http://registry.cnpmjs.org。
檢查鏡像命令是否正常 npm config get registry
三铃将、安裝vue-cli
npm install -g vue-cli / cnpm i -g vue-cli? (-g ：代表全局安裝)
安裝完畢项鬼，使用vue? -V（V要大寫）命令查看vue的版本。
注意：vue-cli工具內(nèi)置了webpack?模板麸塞，在package.json的依賴中可以看到webpack秃臣。不推薦全局安裝 webpack。這樣項(xiàng)目中的 webpack 會鎖定到指定版本哪工，并且在使用不同的 webpack 版本的項(xiàng)目中奥此，可能會導(dǎo)致構(gòu)建失敗。
四雁比、利用vue-cli初始化vue項(xiàng)目
用cmd命令進(jìn)入到想要安裝項(xiàng)目的目錄稚虎，輸入vue init webpack projname（projname：項(xiàng)目名稱）。以我本地項(xiàng)目為例介紹偎捎，我的所有項(xiàng)目空間目錄為：E:\workspace_idea蠢终。
Project name :項(xiàng)目名稱 ，若不需要更改直接回車茴她。注意不能使用大寫寻拂。
Project description:項(xiàng)目描述，直接回車：默認(rèn)為A Vue.js project丈牢。
Author：作者祭钉，如果你有配置git的作者，他會讀取己沛。
Install ?vue-router? 是否安裝vue的路由插件慌核，這里需要安裝距境，所以選擇Y。
Use ESLint to lint your code? 是否用ESLint來限制代碼錯(cuò)誤和風(fēng)格垮卓。如果你是大型團(tuán)隊(duì)開發(fā)垫桂，最好是進(jìn)行配置。
setup unit tests with ?Karma + Mocha? 是否安裝單元測試工具Karma+Mocha粟按，不需要诬滩，輸入n。
Setup e2e tests with Nightwatch?是否安裝e2e來進(jìn)行用戶行為模擬測試灭将。輸入n碱呼。
執(zhí)行完畢后，如果最后一個(gè)選擇no,我們需要使用cmd命令進(jìn)入項(xiàng)目：cd?projname(項(xiàng)目名)宗侦，然后
然后輸入cnpm install，給項(xiàng)目下載依賴包忆蚀。下載成功后矾利，在package.json文件中，可以看到剛剛輸入的項(xiàng)目信息馋袜。
五男旗、運(yùn)行項(xiàng)目
至此，我們在項(xiàng)目的控制臺欣鳖，輸入npm run dev命令察皇，運(yùn)行項(xiàng)目。在瀏覽器輸入項(xiàng)目地址：就可以訪問項(xiàng)目了泽台。
六什荣、項(xiàng)目目錄
├── README.md 項(xiàng)目的說明文檔，markdown 格式
├── index.html 入口頁面怀酷，可以添加一些mete稻爬、瀏覽器圖標(biāo)等代碼
├── build 構(gòu)建腳本目錄?
? ????? ├── build.js 生產(chǎn)環(huán)境構(gòu)建腳本
? ? ????├── utils.js 構(gòu)建相關(guān)工具方法
? ? ?????├── webpack.base.conf.js wabpack基礎(chǔ)配置
? ? ????├── webpack.dev.conf.js wabpack開發(fā)環(huán)境配置
? ?????└── webpack.prod.conf.js wabpack生產(chǎn)環(huán)境配置
├── config 項(xiàng)目配置，包括端口號等蜕依，初學(xué)者可以使用默認(rèn)設(shè)置
? ? ?├── dev.env.js 開發(fā)環(huán)境變量
? ? ?├── index.js 項(xiàng)目配置文件
? ? ?├── prod.env.js 生產(chǎn)環(huán)境變量
? ? ?└── test.env.js 測試環(huán)境變量
├── package.json npm包配置文件桅锄，里面定義了項(xiàng)目的npm腳本，依賴包等信息
├── src 源碼目錄
? ? ? ├── main.js 入口js文件
? ? ? ├── app.vue 根組件样眠，可以直接將組件寫在這里友瘤，不用components目錄，一般我們不這樣做
? ? ? ├── components 組件目錄
? ? ? ├── assets 資源目錄檐束，放置一些如logo等的資源辫秧，這里的資源會被wabpack構(gòu)建
? ? ?├── routes 前端路由
? ? ? ? ? ? ? └── index.js
? ? ? ├── store 應(yīng)用級數(shù)據(jù)（state）
? ? ? ? └── index.js
├── static 純靜態(tài)資源，不會被wabpack構(gòu)建厢塘。
└── test 測試文件目錄（unit&e2e）茶没，如不需要進(jìn)行單元測試和e2e測試肌幽，可刪除文件
? ? ? ? ? ? └── unit 單元測試
????????????├── index.js 入口腳本
????????????├── karma.conf.js karma配置文件
????????????└── specs 單測case目錄
