Vue.js安裝教程

安裝步驟

1. 安裝 node.js (網址：https://nodejs.org/en/)。

2. 基於 node.js ,利用淘寶 npm 鏡像安裝相關依賴。在 cmd 里直接輸入：npm install -g cnpm –registry=https://registry.npm.taobao.org，回車，等待安裝。

3. 安裝全局 vue-cli 腳手架,用於幫助搭建所需的模板框架，在 cmd 里

   1. 輸入：cnpm install -g vue-cli，回車，等待安裝；

   2. 輸入： vue ，回車，若出現 vue 信息說明表示成功。

4. 創建項目，在 cmd 里輸入：vue init webpack vue_test(項目文件夾名) ，回車，等待一小會兒，依次出現下列選項，輸入后創建成功。

    

   

   create vue project

5. 安裝依賴，在 cmd 里

   1. 輸入：cd vue_test ，回車，進入到具體項目文件夾

   2. 輸入：npm install，回車，等待一小會兒，安裝依賴。

6. 測試環境是否搭建成功

   1. 在 cmd 里輸入：npm run dev

   2. 在瀏覽里輸入：localhost:8080(默認端口為8080)

   運行起來后的效果如下圖所示：

    

   

   Vue running

安裝中遇到的問題

vue init webpack vue_test

C:\Users\h\Desktop>vue init webpack vue_test C:\Users\h\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60 let template = program.args[0] ^^^ SyntaxError: Block-scoped declarations (let, const, function, class) not yet sup ported outside strict mode at exports.runInThisContext (vm.js:54:16) at Module._compile (module.js:375:25) at Object.Module._extensions..js (module.js:406:10) at Module.load (module.js:345:32) at Function.Module._load (module.js:302:12) at Function.Module.runMain (module.js:431:10) at startup (node.js:141:18) at node.js:977:3 

nodejs版本太低，去官網更新即可。

npm install

C:\Users\h\Desktop\vue_test>npm install > chromedriver@2.33.2 install C:\Users\h\Desktop\vue_test\node_modules\chromedri ver > node install.js Downloading https://chromedriver.storage.googleapis.com/2.33/chromedriver_win32. zip Saving to C:\Users\h\AppData\Local\Temp\chromedriver\chromedriver_win32.zip ChromeDriver installation failed Error with http(s) request: Error: connect ETIM EDOUT 172.217.160.112:443 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fse vents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@ 1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"} ) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! chromedriver@2.33.2 install: `node install.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the chromedriver@2.33.2 install script. npm ERR! This is probably not a problem with npm. There is likely additional log ging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\h\AppData\Roaming\npm-cache\_logs\2017-11-25T07_25_19_228Z -debug.log 

因為 chromedriver 被牆了，所以需要輸入命令 cnpm install chromedriver ，安裝 chromedriver 。

 

免費源碼下載地址：http://github.crmeb.net/u/defu