使用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