1. 程式人生 > 其它 >使用vs code一步一步搭建vue2腳手架

使用vs code一步一步搭建vue2腳手架

安裝nodejs

【1】安裝nodejs

vue腳手架需要nodejs環境,所以首先需要安裝nodejs。

nodejs安裝方法:https://www.cnblogs.com/yyee/p/15209612.html

驗證nodejs是否安裝成功,開啟cmd視窗,輸入 node -v 命令,看到node版本資訊說明nodejs安裝成功。

設定阿里npm源,如果不用國內映象源,安裝vue腳手架會失敗。

npm config set registry http://registry.npm.taobao.org

幾個管理命令:

node -v #(版本低引起:bash: npm: command not found)
npm -v     #以上幫助檢查是否安裝 node npm  
vue -V #檢視vue版本
輸入vue    #測試vue是否安裝成功
輸入vue list   #看vue中有哪些子類 npm install vue

配置vue2腳手架環境

【2】配置vue2腳手架環境

【以管理員許可權】開啟powershell命令列視窗,不是cmd,注意要以管理員許可權開啟powershell,不然不行。powershell所在位置:【C:\Windows\System32\WindowsPowerShell\v1.0】

安裝vue腳手架:

cnpm install -g vue-cli  或者  npm install -g vue-cli
vue -V  #大寫-V,檢視vue安裝狀態

安裝的時候如果提示 cnpm : 無法載入檔案 D:\Program Files\nodejs\node_global\cnpm.ps1。未對檔案 D:\Program Files\nodejs\node_global\cnpm.ps1進行數字簽名。無法在當前系統上執行該指令碼。

解決方法:

1、在終端執行:get-ExecutionPolicy,顯示Restricted(表示狀態是禁止的)或者AllSigned(表示需要簽名)。
2、在終端執行:set-ExecutionPolicy RemoteSigned ,選擇Y或A 。
3、在終端執行:get-ExecutionPolicy,顯示RemoteSigned (表示不需要簽名)。

檢視vue安裝狀態,vue -V

安裝 webpack 打包工具:

cnpm install -g webpack  或者  npm install -g webpack

安裝開發可能會用到的依賴

#安裝 Promise, vuex, axios, qs
npm install es6
-promise --save cnpm install vuex --save cnpm install axios --save cnpm install qs #安裝style,css,less npm install css-loader style-loader --save-dev npm install less less-loader --save-dev #安裝saas cnpm install -g sass --save-dev cnpm install node-sass --save-dev cnpm install sass-loader --save-dev
建立vue2專案

【3】建立vue2專案

切換到專案存放目錄,比如【 F:\code\web 】,輸入vue init webpack 專案名 ,專案名稱用小寫英文命名,然後一路回車,

 vue init webpack vue2_demo