安裝

1、安裝node

vue 3需要node10以上版本

node官網(wǎng)下載地址以往的版本 | Node.js

2、安裝vue/cli

如果已經(jīng)全局安裝過(guò)舊版本的vue-cli

npm uninstall vue-cli -g   //yarn global remove vue-cli

然后安裝

npm install -g @vue/cli   //yarn global add @vue/cli

為什么要先卸載vue-cli，在安裝vue/cli

如果是安裝vue3以下版本的腳手架，命令npm install -g vue-cli@版本號(hào)
如果是安裝3以上版本的腳手架，命令npm install -g @vue/cli@版本號(hào)

參考腳手架vue-cli和@vue/cli的搭建及區(qū)別

執(zhí)行vue-v 查看版本

?

?創(chuàng)建項(xiàng)目

1、新建一個(gè)文件夾,然后右鍵選擇打開(kāi)命令行窗口
2、在命令窗口輸入指令? vue create 項(xiàng)目名稱?? ?

選擇初始化項(xiàng)目的配置：

第一步：Default是自動(dòng)安裝，在這里我選擇最后一個(gè)手動(dòng)安裝，按下回車(chē)鍵進(jìn)行選擇

①default（vue3 babel，eslint）：默認(rèn)設(shè)置（直接enter）非常適合快速創(chuàng)建一個(gè)新vue3項(xiàng)目的原型，沒(méi)有帶任何輔助功能的 npm包

② default（vue2 babel，eslint）：默認(rèn)設(shè)置（直接enter）非常適合快速創(chuàng)建一個(gè)新vue2項(xiàng)目的原型，沒(méi)有帶任何輔助功能的 npm包

③ Manually select features：自定義配置（按方向鍵 ↓）是我們所需要的面向生產(chǎn)的項(xiàng)目，提供可選功能的 npm 包

第二步：配置自定義設(shè)置

???? 1 Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
???? 2 ( ) Babel //轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。
???? 3 ( ) TypeScript// TypeScript是一個(gè)JavaScript（后綴.js）的超集（后綴.ts）包含并擴(kuò)展了 JavaScript 的語(yǔ)法，需要被編譯輸出為 JavaScript在瀏覽器運(yùn)行，目前較少人再用
???? 4 ( ) Progressive Web App (PWA) Support// 漸進(jìn)式Web應(yīng)用程序
???? 5 ( ) Router // vue-router（vue路由）
???? 6 ( ) Vuex // vuex（vue的狀態(tài)管理模式）
???? 7 ( ) CSS Pre-processors // CSS 預(yù)處理器（如：less、sass）
???? 8 ( ) Linter / Formatter // 代碼風(fēng)格檢查和格式化（如：ESlint）
???? 9 ( ) Unit Testing // 單元測(cè)試（unit tests）
??? 10 ( ) E2E Testing // e2e（end to end） 測(cè)試

第三步：選擇vue版本，我選擇3.x

?第四步：Use history mode for router?
路由模式, 是否選擇history模式，啟用history模式，項(xiàng)目build之后，可能會(huì)出現(xiàn)打開(kāi)頁(yè)面空白的情況哦（待驗(yàn)證）。我這里先選擇n

第五步：選擇一種css 預(yù)處理器，我這里選擇第一個(gè)

第六步： Where do you prefer placing config for Babel, ESLint, etc.?
Babel, PostCSS, ESLin等配置文件怎么存放, 是放到單獨(dú)的配置文件中?還是package.json里? 這里方便配置清晰好看, 我選擇每個(gè)配置單獨(dú)文件。

第七步：Save this as a preset for future projects?

是否需要保存當(dāng)前配置，在以后的項(xiàng)目中可快速構(gòu)建? 保存后, 后續(xù)創(chuàng)建項(xiàng)目時(shí)可以直接選擇該配置, 不需單獨(dú)配置，我選擇no

備注：

以上是我項(xiàng)目配置的選項(xiàng)，還有以下配置本次項(xiàng)目中沒(méi)有遇到

 8 ( ) Linter / Formatter // 代碼風(fēng)格檢查和格式化（如：ESlint）

Pick a linter / formatter config?
選擇一種代碼格式化檢測(cè)工具

Pick additional lint features?
代碼檢查方式: 保存時(shí)檢查 or 提交時(shí)檢查; 我選擇, 保存時(shí)檢查，我選擇第一個(gè)

? Pick a unit testing solution: (Use arrow keys)

? 選擇unit testing類型

? Cypress (Test in Chrome, Firefox, MS Edge, and Electron)

??? Cypress 支持瀏覽器：Chrome、Firefox、Electron

?Pick browsers to run end-to-end test on (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)

. Save this as a preset for future projects? (y/N) N 是否保存上述配置

?然后點(diǎn)擊回車(chē)，會(huì)自動(dòng)初始化項(xiàng)目

項(xiàng)目創(chuàng)建完成，目錄結(jié)構(gòu)如下：

?你也可以點(diǎn)擊此處下載代碼

https://gitee.com/pearwf/vue3-studay文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-407334.html

到了這里，關(guān)于Vue3 項(xiàng)目創(chuàng)建的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！