腳手架安裝
Shift+鼠標右鍵 選擇打開命令窗口
創建項目之前,需先確保本機已經安裝node
在命令窗口中確認node環境與JavaScript生態包npm是否安裝
執行命令
node -v
npm -v
切換npm淘寶鏡像
一般情況下用npm安裝東西比較慢,可以使用淘寶鏡像 在命令窗口中執行
npm install cnpm -g --registry=https://registry.npm.taobao.org
安裝成功之后,cnpm就可以替代npm
安裝vue-cli腳手架工具
cnpm install vue-cli -g或者npm install vue-cli -g
安裝之后,在命令窗口中執行vue -V(V為大寫)查看是否安裝成功,成功會出現版本
以上步驟成功之后,相當於基礎環境已經部署完成,就可以使用npm來創建項目了
選擇路徑,創建項目
如d盤創建一個文件夾,進入文件夾,在命令窗口中
執行vue init webpack 項目名稱(自己命名)
Project name(項目名稱):回車
Project description(項目介紹):回車
Author:作者名
Vue build(是否安裝編譯器):回車
Install vue-router(是否安裝Vue路由):y 回車
Use ESLint to lint your code(是否使用ESLint檢查js代碼):n 回車
Set up unit tests(安裝單元測試工具):n 回車
Setup e2e tests with Nightwatch(是否安裝端到端測試工具):n 回車
Should we run npm install for you after the project has been created? (recommended):回車。
啟動項目
cd 項目名稱
npm run dev
瀏覽器輸入localhost: 端口號即可
流程圖
新版本安裝與老版本卸載
TIPS:
關於舊版本。Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。如果你已經全局安裝了舊版本的 vue-cli(1.x 或 2.x),你需要先通過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。
npm run serve