Window環境下搭建Vue.js開發環境

原文連接:http://blog.csdn.net/solo95/article/details/72084907

 

筆者最近在進行前端的學習，在點完了HTML五、CSS三、JavaScript等技能樹以後，是時候開始框架的學習了。目前爲止前端框架呈現出React、Angular、Vue三足鼎立的局面，在這三種框架中，Vue最爲簡單，使用場景最爲普遍，所以筆者從Vue開始學習，可是發現網上能搜到的Vue安裝教程均不全面，因此寫出此篇供你們學習。

大體步驟

• 安裝Node.js
• 安裝Vue.js
• 安裝Webpack

Step1: 安裝Node.js

Node.js是一個Javascript運行環境(runtime)。實際上它是對Google V8引擎進行了封裝。V8引 擎執行Javascript的速度很是快，性能很是好。Node.js對一些特殊用例進行了優化，提供了替代的API，使得V8在非瀏覽器環境下運行得更好。

Node.js是一個基於Chrome JavaScript運行時創建的平臺， 用於方便地搭建響應速度快、易於擴展的網絡應用。Node.js 使用事件驅動， 非阻塞I/O 模型而得以輕量和高效，很是適合在分佈式設備上運行數據密集型的實時應用。

Node.js 的包管理器 npm，是全球最大的開源庫生態系統。後續安裝都依賴於npm命令(筆者注)。

官方下載地址：
https://nodejs.org/en/download/

1. 下載完成後直接安裝，選擇默認路徑，Windows仍是比較方便的，這時候請注意，其餘教程都有設置Path的步驟，其實你能夠不設置，由於Windows下安裝的時候默認有add to Path功能。
2. Win + R打開cmd，而後輸入node --version看到版本信息說明安裝成功，接下來輸入npm install node安裝node的二進制文件，這可能耗費一點時間。

若是在上述步驟遇到問題能夠參考這裏：
http://www.runoob.com/nodejs/nodejs-install-setup.html
其中二進制文件的方法與上述步驟有所差別，菜鳥教程是下載exe直接安裝。

Step 2: 安裝Vue.js

首先使用淘寶的鏡像升級npm，使其可使用cnpm命令(單純的npm可能因爲網絡長城於是速度受限)。

1. 升級npm
   npm install -g cnpm --registry=https://registry.npm.taobao.org

2. 安裝Vue
   cnpm install vue

3. 安裝Vue官方提供的命令行工具
   cnpm install -g vue-cli

Step3: 安裝webpack

WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript、JSX等），並將其打包爲合適的格式以供瀏覽器使用。

1. 安裝WebPack
   cnpm install webpack -g

2. 在合適位置新建一個文件夾，命名爲Vue-Demo，點進文件夾，右鍵git bash here。(若是沒有安裝Git你須要手動在cmd中cd進這個目錄)

3. 使用vue init webpack vue-test建立一個示例目錄,回車下一步，遇到選擇都選n。

4. cd vue-test進入這個目錄,遇到命令行界面卡死，能夠鼠標點進這個目錄，而後git bash here。(若是沒有安裝Git你須要手動在cmd中cd進這個目錄)

5. cnpm install安裝依賴

6. cnpm run dev

7. 瀏覽器輸入localhost:8080看到Vue界面證實全部步驟均成功。

遇到問題參考這裏：

http://www.cnblogs.com/jiajia123/p/6132265.html