Vue.js安裝及環境搭建

Vue.js環境搭建-Windows版

 

步驟一：安裝node.js

在搭建vue的開發環境以前，須要先下載node.js，vue的運行是要依賴於node的npm的管理工具來實現，node能夠在官網或者中文網裏面下載，根據本身的電腦選擇是32仍是64 ，

網址1：http://nodejs.cn/download/

網址2：https://nodejs.org/dist/

爲了成員之間統一版本，咱們使用的node-v8.9.1版本：（安裝到本身的自定義目錄）

連接：https://pan.baidu.com/s/18N4k1Dxdl2TGbWs9Ayn2yw
提取碼：n431

 

步驟二：安裝鏡像

因爲 npm install安裝速度慢，因此本文使用阿里淘寶鏡像及其命令 cnpm進行安裝，cmd黑窗口輸入命令：

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

 

 

步驟三：安裝Vue

輸入：cnpm install vue ，回車等待終端給出響應。

 

 

 

 

 

步驟四：安裝全局vue-cli腳手架

輸入： cnpm install --global vue-cli,安裝全局vue-cli腳手架，用於快速搭建大型單頁應用。

 

 

步驟五：檢查Vue是否安裝成功

輸入： vue -V檢查是否安裝成功，若是返回版本號則說明安裝成功。

 

步驟六：查看官網提供的模板(這個步驟能夠省略)

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

步驟七：建立一個基於 webpack 模板的新項目（可略）

終端切換到你的目標目錄下建立一個項目，這裏以在vue的安裝目錄下建立一個叫作my-vue-project的項目爲例:輸入

vue init webpack my-vue-project

終端會給你返回以下內容：

 

而後一路回車。

步驟八：啓動項目，訪問項目（可略）

　　8.1進入項目

       　　 cd my-vue-project

　　8.2啓動項目

     cnpm run dev

　　8.3測試訪問

　　　　成功執行以上命令後訪問 http://localhost:8080/

 

 

 

可能遇到的問題：

1. 權限問題

　　　　安裝vue後，執行vue –V 命令報錯以下：

vue : 沒法加載文件 C:\Users\zs\AppData\Roaming\npm\vue.ps1，由於在此係統上禁止運行腳本。

             解決：不經過Windows PowerShell執行命令，經過cmd執行

　 　2. 啓動spt-marking-vue項目報錯

11 404s will fallback to /index.html

12 fs.js:127

13  throw new ERR_INVALID_CALLBACK();

14  ^

15 TypeError [ERR_INVALID_CALLBACK]: Callback must be a function 16    at maybeCallback (fs.js:127:9)

17    at Object.write (fs.js:531:14)

18    at /MyWorkProject/hcg/build/webpack.dev.config.js:12:8

19    at FSReqWrap.oncomplete (fs.js:139:20)

20 error code ELIFECYCLE

21 error errno 1

22 error iview-project@2.0.0 dev: `webpack-dev-server --content-base ./ --open --inline --hot --compress --history-api-fallback --config webpack.dev.config.js`

22 error Exit status 1

23 error Failed at the iview-project@2.0.0 dev script.

23 error This is probably not a problem with npm. There is likely additional logging output above.

24 verbose exit [ 1, true ]

 

問題緣由：node 版本問題，node v10 以上 fs.write 的callback 是必須的，下降Node版本可解決。

不安裝node也能夠，能夠將webpack.dev.config.js 和 webpack.prod.config.js 中的代碼修改便可：給fs.write添加必要的callback函數，具體操做是修改以上兩個文件中的如下代碼：

fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {});

修改成：

fs.write(fd, buf, 0, 'utf-8', function(err, written, buffer) {});

 

 

按照上面指定的node版本不會出現該問題。