在搭建整個環(huán)境之前耙考，首先默認(rèn)你已了解了node.js耘斩、npm（cnpm）【注：npm與cnpm使用方式一樣，npm是國外鏡像枢赔，下載速度較慢澄阳。cnpm是國內(nèi)鏡像，下載速度相對快些踏拜。】碎赢、webpack、vue速梗、element相關(guān)的基礎(chǔ)知識肮塞。如不了解，請先閱讀以下文檔：
Node.js
Npm/cnpm
Webpack
Vue
element
有了以上的認(rèn)識與基礎(chǔ)知識姻锁，就可以開始搭建整個開發(fā)環(huán)境了枕赵。下面分別以純手動搭建與用veu的腳手架vue-cli搭建。
一位隶、純手動搭建
如果你本地已安裝了node與npm請直接路過第一二步烁设。
第一步：
檢查本地環(huán)境是否安裝了node。在命令窗口下鍵入node -v，如果有提示版本信息表示已安裝（如圖1）装黑，否則安裝node環(huán)境。下載地址：http://nodejs.cn/download/
第二步：
檢查本地環(huán)境是否安裝了npm（一般node都自帶了npm）弓熏，在命令窗口鍵入npm -v恋谭，如果有提示版本信息表示已安裝（如圖2），否則安裝npm（此處省略）挽鞠。
cnpm的安裝：在命令行窗口鍵入以下命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝成功后就可以與npm一樣的使用了疚颊，只是將npm換成cnpm即可。
第三步：
有了以上兩步必要的環(huán)境就可以安裝webpack了信认。
1材义、首先全局安裝，在命令窗口下鍵入以下命令：
npm install -g webpack
安裝成功與否可以鍵入webpack -version來查看嫁赏，如圖3
2其掂、其次是安裝到你的項目目錄。你的項目目錄結(jié)構(gòu)由你定潦蝇，圖4為我所建的項目目錄結(jié)構(gòu)：
目錄結(jié)構(gòu)描述：
test: 項目名稱
src: 放寫好的組件及其其它資源
App.vue: vue組件
main.js : 入口js文件
index.html : html文件
webpack.config.js: webpack配置文件
以上目錄結(jié)構(gòu)為最基礎(chǔ)的目錄結(jié)構(gòu)款熬，至于里面的配置及用法后面將會一一講解。
手動建立好項目目錄結(jié)構(gòu)后就可以在該項目中安裝webpack了攘乒。
3贤牛、在當(dāng)前目錄根目錄下打開命令窗口，鍵入以下命令则酝，將webpack安裝到項目中殉簸。
npm install --save-dev webpack
此時會在項目根目錄生成一個node_modules文件夾，如圖4沽讹。此后所有的依賴工具包都會安裝到這個文件夾下般卑。
4、生成npm安裝包依賴關(guān)系配置文件妥泉，在此項目目錄下命令行窗口鍵入以下命令：
npm init
按提示填入相應(yīng)信息椭微，也可以一步步跳過，最后會在根目錄生成一個package.json文件盲链。如下圖5所示：
生成好文件后修改配置文件蝇率，將scripts 里的test替換成如下圖6所示
下次我們就可以直接在命令行鍵入
npm run dev
命令來啟動了。
打開webpack.config.js文件刽沾，配置入口文件與出口文件本慕，如圖10的entry與output。main.js可以什么也不用寫侧漓，index.html引入配置好的出口文件的js锅尘。如下圖7
到此時，webpack的最小環(huán)境已搭建完畢，在命令行鍵入npm run dev 藤违。打開瀏覽器浪腐，地址欄輸入http://localhost:8080你將會看到hello world。（注：如果報端口沖突顿乒，可以修改scripts 议街，如： "dev": "webpack-dev-server --open --hot --port 8081" ；如果不能啟動璧榄，根據(jù)報錯提示查看是否還有依賴包沒有安裝特漩，如有，則用
npm install --save-dev 包名
命令安裝需要的包骨杂。）
但想要開發(fā)項目還遠(yuǎn)遠(yuǎn)不夠涂身。因為你編寫的css、js（ES6）等webpack還無法識別搓蚪，所以得先把其依賴的編譯工具包引入到webpack項目中來蛤售。以下將講解各個工具模塊的安裝及其作用。
第四步:
安裝Vue（如果不用vue開發(fā)當(dāng)然不用安裝）
在命令窗口鍵入如下命令下載vue 模塊：
npm install --save vue
下載完成后會將vue下載到node_modules 目錄下陕凹，同時會在package.config文件的 dependencies下加入vue模塊悍抑。如下圖8所示：
第五步:
1、安裝相關(guān)的loader
需要安裝的loader如下（可能不止這些杜耙，如果報錯根據(jù)報錯提示安裝缺少的包）：
vue-loader ： 裝載vue
vue-html-loader ： 由于html頁面有許多vue 的標(biāo)簽搜骡，所以需要引入這個loader才能識別。
css-loader ： 裝載css
style-loader ： 裝載style
vue-hot-reload-api : 熱重載Vue組件的API
vue-template-compiler : 裝載vue模板
如果要使用ES6語法佑女，還需要安裝babel（簡單簡介：babel就是將高版本的js語法編譯成低版本語法的工具包）记靡。Babel相關(guān)的loader 如下：
babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime
安裝方式與上面安裝vue一樣，使用npm或是cnpm团驱，安裝可以一次性跟多個摸吠，如
cnpm install --save-dev vue-loader vue-html-loader 等
注：其中--save-dev 與 --save的區(qū)別是：--save-dev會將安裝包信息寫入package.config文件里的devDependencies里，--save會將安裝包信息寫入dependencies里嚎花。至于區(qū)別寸痢，顧名思義。
如果你的項目還用到其它loader紊选，直接npm下載安裝即可啼止。
安裝完以上工具后package.config文件如下圖9所示
現(xiàn)在，webpack+vue要使用到的工具都已準(zhǔn)備完畢了兵罢，但還不能開發(fā)vue的項目献烦，因為只是下載下來而已，還需要配置webpack.config.js后才真正算是搭建完畢卖词。
2巩那、配置webpack.config.js，如圖10
到此，webpack+vue的環(huán)境就搭建完畢即横。下面將介紹怎么使用vue開發(fā)噪生。
將index.html頁面改成如下圖11
<my-app></my-app>表示引用了一個vue的組件，但它是怎么渲染出來的东囚，請看如下圖12的main.js
上面的代碼表示杠园，引入了vue模塊vue的組件模塊，接下來這個頁面就有了vue的所有環(huán)境舔庶，new Vue()里寫自己的邏輯就行了。下面再來看App.vue模塊怎么寫的陈醒，如下圖13
Vue的模板有三部分組成惕橙，template、style钉跷、script弥鹦。至于怎么寫，這里就不說明了爷辙。
好了彬坏，現(xiàn)在，在命令窗口鍵入以下命令：
npm run dev
打開瀏覽器輸入http://localhost:8080膝晾，如果沒有報錯栓始，你將會看到hello world。如果報錯血当，在代碼及配置沒出錯的情況下可能出現(xiàn)的原因是lorder不全幻赚，下載的版本不兼容等。
第六步：
安裝element
與之前一樣臊旭，npm下載element
命令窗口鍵入以下命令：
npm i element-ui -S
安裝file-loader
命令窗口鍵入以下命令：
npm install --save-dev file-loader
下載完成后就可以使用element的組件了落恼。
下面，我將介紹如何在index.html頁面中使用element不同的組件离熏。首先佳谦，下載 babel-plugin-component，在命令窗口鍵入以下命令：
npm install babel-plugin-component -D
然后滋戳，將 .babelrc 修改為（如果沒有該文件則手動創(chuàng)建钻蔑，用開發(fā)工具創(chuàng)建）：
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]]
}
比如，index.html頁面使用到element的TimePicker 時間選擇器
及Cascader 級聯(lián)選擇器胧瓜。
首先矢棚，新建兩個vue模板TimePicker.vue、Cascader.vue府喳。打開官網(wǎng)蒲肋，將TimePicker與Cascader相關(guān)的組件代碼copy到兩個文件里（注意：vue的組件是由template、style、script三部分組成的兜粘，如果copy的組件代碼部分沒有template標(biāo)簽申窘，則要自己加上去，而且最外層還應(yīng)由一個div包裹孔轴。）剃法。Enement ui官網(wǎng)：
http://element.eleme.io/#/zh-CN/component/installation
其次，打開main.js,改為如下圖14所示：
再次路鹰，在index.html里引用這兩個組件贷洲，如下圖15：
好了，現(xiàn)在晋柱，打開命令窗口鍵入如下命令：
npm run dev
打開瀏覽器优构，你將看到，兩個組件已加載到了頁面中雁竞。
至此钦椭，整個webpack+vue+element的開發(fā)環(huán)境就搭建完了，至于后面需要用到路由碑诉，ajax請求之類的組件時按上面的方式安裝使用就是彪腔。
第七步：
部署到生產(chǎn)環(huán)境。
現(xiàn)在进栽，你也許會問德挣，我要放在生產(chǎn)環(huán)境怎么辦呢？好泪幌，下面將介紹如何將你寫的代碼部署到生產(chǎn)環(huán)境盲厌。
首先，修改package.json文件祸泪，在scripts位置加如圖16的配置：
在命令窗口輸入以下命令：
npm run build
執(zhí)行命令后吗浩，將會生成你webpack.config.js里配置的輸出文件dist/build.js。
好了没隘，現(xiàn)在懂扼，你只需把index.html頁面與dist文件夾copy到你的生產(chǎn)服務(wù)器上就OK了。至于你的web服務(wù)器使用的是tomcat或是apache或是其它的都無所謂右蒲，就看你自己的需求了阀湿。
二、使用vue-cli腳手架搭建
如果你覺得上面手動搭建太麻煩瑰妄，還好陷嘴，vue提供了一種方式可以快速的搭建好webpack+vue的開發(fā)環(huán)境。下面將介紹如何使用vue-cli腳手架搭建環(huán)境间坐。
第一步：
與安裝其它模塊一樣灾挨，vue-cli也是一種工具模塊邑退，打開命令窗口，鍵入以下命令：
npm install vue-cli -g
這是全局安裝劳澄，如果npm安裝時間較長換成cnpm地技。安裝完成后，就可以使用腳手架搭建環(huán)境了秒拔。
第二步：
vue-cli提供了幾種模板莫矗，如下三種模式：
Simple（太簡單，就一個index.html文件）砂缩、webpack-simple（比較實(shí)用）作谚、webpack（較全，內(nèi)置有方法檢查庵芭、單元測試等食磕。）
我這里只講解webpack-simple模式，如果對其余兩種感興趣可以自己嘗試喳挑。
在你要放項目的目錄打開命令窗口，鍵入以下命令：
vue init webpack-simple 項目名
安裝完畢滔悉，在目錄下會生成你的項目結(jié)構(gòu)伊诵，項目結(jié)構(gòu)如下圖1：
上面文件與我們手動創(chuàng)建的沒啥區(qū)別，是不是很簡單回官？但是曹宴，現(xiàn)在整個項目還不能跑起來，因為所有的第三方工具都還沒下載呢歉提，所以還需要安裝項目所依賴的工具包笛坦。
第三步：
在項目根目錄打開命令窗口，鍵入以下命令：
npm install
輸入這個命令程序會自動下載package.config下所依賴的工具包苔巨。耐心等待下載完畢版扩，到此，webpack+vue的環(huán)境就搭建好了侄泽。
第四步：
現(xiàn)在element組件還沒有引入進(jìn)來礁芦，我想到此你已經(jīng)知道如何引入element組件了，如還不明白悼尾，請參考手動搭建柿扣。其余的工作與上面手動搭建完全一樣，這里就不必多說了闺魏。
