一、安裝node.js
1、本例環(huán)境
node.js: v16.14.0
npm：8.3.1
vue：@vue/cli 5.0.1
2、node.js環(huán)境安裝與測試
由于vue的安裝與創(chuàng)建依賴node.js（JavaScript的運(yùn)行環(huán)境）里的npm（包管理和分發(fā)工具），因此需要先確保安裝node.js。
下載地址：Node.js (nodejs.org)
下載完成安裝之后，檢測一下，查看是否安裝成功。
檢測方式：打開cmd命令窗口（Window + R，輸入cmd然后回車），輸入?node -v?回車，正常顯示node.js版本代表已安裝。如上圖所示。
npm會隨著node.js一起安裝，所以，只要是node.js正常安裝，就代表npm已經(jīng)安裝。檢測方式：cmd命令窗口輸入?npm -v?回車，能正常顯示npm版本。
二、安裝vue腳手架：Vue CLI?
下載地址：Home | Vue CLI (vuejs.org)
官方文檔說明，安裝命令為“npm install -g @vue/cli”。然而，原生npm的下載速度，實(shí)在不敢恭維，因此，我們使用淘寶鏡像來安裝。
命令：npm install -g @vue/cli --registry=https://registry.npm.taobao.org ，安裝完成后，cmd命令窗口輸入 vue -V（V大寫） 回車，能正常顯示@vue/cli版本則說明安裝成功。
三、創(chuàng)建vue項(xiàng)目
?首先我們計劃在D盤根目錄下創(chuàng)建項(xiàng)目，命令窗口輸入?d:?回車，再輸入 vue create myvue回車創(chuàng)建myvue文件夾，出現(xiàn)如下圖所示
Default (bable，eslint） // 默認(rèn)
Manually select features // 選擇手動創(chuàng)建項(xiàng)目?(在這里，我們選擇手動創(chuàng)建，用上下箭頭選擇)
(*) Babel? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 支持高階語法轉(zhuǎn)換
( ) TypeScript? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 支持使用 TypeScript 書寫源碼
( ) Progressive Web App (PWA) Support? ? ? ? ? ? ? ? ? // 支持PWA
(*) Router? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 路由
(*) Vuex? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// store
( ) CSS Pre-processors? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // CSS 預(yù)處理器
( ) Linter / Formatter? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 代碼風(fēng)格檢查和格式化
( ) Unit Testing ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 支持單元測試
( ) E2E Testing ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 支持E2E測試
回車之后，使用空格鍵與上下箭頭鍵與圖中所選保持一致，然后再點(diǎn)擊回車
選擇3.x,回車
回車之后再次選擇No，再次點(diǎn)擊回車，此時正在下載依賴包，創(chuàng)建項(xiàng)目
?下載完成之后則出現(xiàn)下圖所示
輸入：cd myvue? 回車，進(jìn)入myvue項(xiàng)目中
輸入：npm run serve 回車，啟動服務(wù)
?瀏覽器地址欄輸入?http://localhost:8080/?，正常打開網(wǎng)頁表示項(xiàng)目創(chuàng)建成功，下圖所示文章來源：http://www.zghlxwxcb.cn/news/detail-429658.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-429658.html
到了這里，關(guān)于Vue創(chuàng)建項(xiàng)目的詳細(xì)步驟的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
