Vue2.0 從環(huán)境搭建到發(fā)布
1 Vue2.0 推薦開發(fā)環(huán)境
1.1 Node.js
1.1.1 Node.js介紹
簡單的說 Node.js 就是運行在服務(wù)端的 JavaScript嫩海。
Node.js 是一個基于Chrome JavaScript 運行時建立的一個平臺裕循。Node.js是一個事件驅(qū)動I/O服務(wù)端JavaScript環(huán)境酿炸，基于Google的V8引擎，V8引擎執(zhí)行Javascript的速度非常快世囊，性能非常好该抒。
1.1.2 Node.js安裝配置
安裝包及源碼下載node.js官網(wǎng)
本文實例以6.10.2版本為例，其他版本類似策严，安裝步驟如下：
- 1 點擊安裝包后穗慕，一直點next（下一步）就行了，然后會出現(xiàn)安裝目錄妻导。默認(rèn)安裝目錄 "C:\Program Files\nodejs" , 你可以修改目錄揍诽，并點擊next诀蓉，最后出現(xiàn)Finish界面，點擊finish退出安裝向?qū)А?/li>
- 2 檢測PATH環(huán)境變量是否配置了Node.js暑脆，打開系統(tǒng)終端（cmd）渠啤，輸入命令"path"，輸出如下結(jié)果里面帶有nodejs字樣的添吗，就證明環(huán)境變量配置好了沥曹。
- 3 檢測Node.js版本，輸入node -v就會顯示一個版本號碟联，例如v6.10.2妓美。
1.2 NPM
1.2.1 NPM介紹
NPM（node package manager）是隨同NodeJS一起安裝的包管理工具，通常稱為node包管理器鲤孵。
顧名思義壶栋，它的主要功能就是管理node包，包括：安裝普监、卸載贵试、更新、查看凯正、搜索毙玻、發(fā)布等。npm的背后廊散，是基于couchdb的一個數(shù)據(jù)庫桑滩，詳細(xì)記錄了每個包的信息，包括作者允睹、版本运准、依賴、授權(quán)信息等缭受。它的一個很重要的作用就是：將開發(fā)者從繁瑣的包管理工作（版本胁澳、依賴等）中解放出來，更加專注于功能的開發(fā)贯涎。
1.2.2 npm包安裝模式
在具體介紹npm包的管理之前听哭，我們首先得來了解一下npm包的兩種安裝模式。
本地安裝 vs 全局安裝（重要）
node包的安裝分兩種：本地安裝塘雳、全局安裝陆盘。兩者的區(qū)別如下
本地安裝：package會被下載到當(dāng)前所在目錄，也只能在當(dāng)前目錄下使用败明。
全局安裝：package會被下載到到特定的系統(tǒng)目錄下隘马，安裝的package能夠在所有目錄下使用。(注：帶有-g字樣的命令行就是全局安裝妻顶，反之就是本地安裝)
1.2.3 npm國內(nèi)鏡像
使用國內(nèi)鏡像酸员，下載速度更快蜒车，推薦安裝淘寶鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后輸入
npm info underscore
如果上面配置正確的話會出現(xiàn)response
1.2.4 package.json配置文件
每個項目的目錄下面，一般都有一個package.json文件幔嗦，定義了這個項目所需要的各種模塊酿愧，以及項目的配置信息（比如名稱、版本邀泉、許可證等元數(shù)據(jù)）嬉挡。
npm install 命令根據(jù)這個配置文件，自動下載所需的模塊汇恤，也就是配置項目所需的運行和開發(fā)環(huán)境庞钢。下面是一個完整的package.json文件
字段說明
- 1 name 定義項目的名稱（必填）
- 2 version 定義項目的版本（必填）
- 3 description 項目的簡介（選填）
- 4 scripts 指定運行腳本命令的npm命令行的縮寫，比如dev指定了npm run dev時因谎，所需要執(zhí)行的命令
- 5 dependencies 指定了項目運行所依賴的的模塊
- 6 devDependencies 指定了項目開發(fā)所需要的模塊
比如：
npm install jquery --save時表示jquery模塊會寫入dependencies屬性
npm install css-loader --save -dev 表示該css-loader模塊會寫入devDependencies屬性
1.3 webpack
1.3.1 webpack介紹
Vue的組件都是通過.vue或者像微信小程序的.wxml和.wxss等自定義的組件都無法被用戶端的各種瀏覽器解析基括，需要被翻譯和打包成js文件。
這里我們所用的webpack版本號是2.3.3（注：：后面我在介紹我們工程當(dāng)中webpack是怎么進(jìn)行配置的财岔，其實webpack是需要一定的時間才能掌握风皿，這里我們只是把它當(dāng)做工具來用，知道它在我們整個工程是用來干什么的就行了）
1.3.2 webpack的安裝
npm install webpack -g
這個時候由于我們安裝了淘寶鏡像使鹅，cnpm就是代表使用淘寶鏡像設(shè)置npm（這個時候必須感謝一波揪阶，才讓我們不要老是搭梯子）
cnpm install webpack -g
(注： 兩者其實實現(xiàn)的效果是一樣的昌抠，區(qū)別在于前一個是在外國服務(wù)器下的模塊患朱，后者是國內(nèi)的服務(wù)器，下載起來會快一點)
1.4 vue腳手架
1.4.1 vue-cli介紹
vue-cli是用來生成模板的vue工程炊苫，相當(dāng)于按照設(shè)計好的圖來蓋房子裁厅。微信小程序一開始也會以可視化界面的方式問你是否創(chuàng)建示例工程，其實就是封裝了類似的腳手架侨艾。
1.4.2 vue-cli安裝
npm install vue-cli -g
這個時候我們?nèi)职惭b的包已經(jīng)ok了执虹，這個時候我們需要在硬盤中找一個文件夾放工程用的，打開終端進(jìn)入該目錄
比如我在f盤里創(chuàng)建了vue名稱的文件夾唠梨，然后
cd vue
2 創(chuàng)建Vue工程
2.1 創(chuàng)建項目
然后輸入命令行（我們現(xiàn)在用的是 vue2.2.6,也就是 vue2.0 的版本）
vue init webpack 工程名字<工程名字不能用中文>
vue init webpack-simple 工程名字<工程名字不能用中文>（創(chuàng)建一個項目結(jié)構(gòu)簡單的vue工程）
vue init webpack#1.0 工程名字<工程名字不能用中文> (創(chuàng)建Vue1.0的版本)
這里我們的工程名字取demo08（隨便取的袋励，這是工程名，可以看你的心情了取名字）然后會有一些初始化的設(shè)置
- Project name (demo08) 直接回車默認(rèn)
- Project description (A Vue.js project) 直接回車默認(rèn)
- Author dzh 寫上你的大名
- Install vue-router? (Y/n) 這個是問你是否安裝路由功能茬故，打上Y（yes）省的后面還要再去下（主要還是這個東西必不可少）
- Use ESLint to lint your code? (Y/n) 這個是一個QA工具，用來避免低級錯誤和統(tǒng)一代碼的風(fēng)格蚁鳖，可根據(jù)自己的情況去選擇
- Setup unit tests with Karma + Mocha? (Y/n) 這個是問你需要使用karma進(jìn)行vue組件自動化測試嗎磺芭？這是后面進(jìn)行單元測試用的，根據(jù)自己實際情況選擇
- Setup e2e tests with Nightwatch? (Y/n) 設(shè)置端到端測試醉箕，Nightwatch钾腺？ 當(dāng)然這些都看你自己的愛好了徙垫，我這里是沒有選擇測試功能。
我的選擇如圖所示
然后回車會出現(xiàn)下面的提示放棒，就是告訴你接下來怎么做
這個時候我們的項目已經(jīng)創(chuàng)建好了
2.2 項目配置
cd demo08 進(jìn)入創(chuàng)建的工程目錄工程
工程目錄如圖所示：
安裝項目依賴
cnpm install
這個比較快姻报，不過有可能會出現(xiàn)缺了很多依賴庫（不過本人用著好像還沒出現(xiàn)問題，一旦出了問題就只能npm install重新再進(jìn)行一次安裝項目依賴了间螟，不過從國外服務(wù)器下逗抑，需要一定的網(wǎng)速和梯子了，否則賊慢）
npm install
這個時候你會發(fā)現(xiàn)的的demo08文件夾下面多了一個叫 node_modules 的文件夾寒亥，這個是一個類似倉庫的東西邮府，用來存放我們所依賴的包
2.3 啟動項目
終于要到了激動人心的時刻了，對我們要啟動項目了溉奕，項目啟動的默認(rèn)端口號是8080褂傀；所以小伙伴們啟動項目的時候要注意是否端口被占用的情況。(注：我用的是8088)
npm run dev / cnpm run dev
輸入完命令會自動啟動瀏覽器,就會看到這帥帥的界面了加勤。
