新建一個(gè)小而全的vue3項(xiàng)目
-
準(zhǔn)備工作
安裝node - 安裝vue腳手架...
檢查版本：node -v npm -v vue -V
image-20210324103256277.png
-
新建項(xiàng)目
- vue create [項(xiàng)目名稱]：vue create vue3-todolist
image-20210324103644960.png
* 選擇手動(dòng)創(chuàng)建：Manually select features
* 選擇要安裝的插件：上下箭頭移動(dòng)灿渴，空格鍵選擇取消介劫，Enter鍵確認(rèn)
* Choose Vue version 必選色瘩，因?yàn)槭且獙W(xué)習(xí)vue3.0
* babel 要選
* TypeScript 可不選
* P.....可不選
* Router 非必選
* Vuex 非必選
* Css預(yù)編譯工具 非必選(但這是好東西宝当，建議學(xué)習(xí))
* 代碼規(guī)范工具，就是es-linter（建議選斩郎，隨時(shí)好習(xí)慣）
* 單元測試和E2E測試不選
image-20210324104201281.png
* 選擇版本：因?yàn)樯厦婀催x了Choose Vue version眠砾，選3.x
image-20210324104400663.png
* 是否以history...作為路由模式：Y
image-20210324104557144.png
* 選擇css預(yù)編譯工具
image-20210324104650048.png
* 選擇eslint的一種格式化方式
image-20210324152315530.png
* ESLint with error prevention only
> 只配置使用 ESLint 官網(wǎng)的規(guī)范
* ESLint + Airbnb config 愛彼迎規(guī)范
> ESLint 官網(wǎng)推薦的規(guī)范 + Airbnb 愛彼迎第三方配置
* ESLint + Standard config 通用規(guī)范
> ESLint 官網(wǎng)推薦的規(guī)范 + Standard 常規(guī)的第三方配置
* ESLint + Prettier 比較漂亮的規(guī)范
> 使用 ESLint 官網(wǎng)推薦的規(guī)范 + Prettier 第三方的配置 Prettier 是單獨(dú)的文件，可做風(fēng)格統(tǒng)一阅虫，代碼格式化工具
* 選擇lint生效的時(shí)機(jī)演闭，保存的時(shí)候還是提交的時(shí)候
image-20210324152427815.png
* 選擇配置文件存放的位置
* 單獨(dú)文件
* 放在package.json文件中
image-20210324152605760.png
* 是否保存為默認(rèn)的配置
image-20210324152730600.png
* 預(yù)設(shè)起一個(gè)名字
image-20210324152831544.png
完整如下：
image-20210324152900281.png
創(chuàng)建成功，打開項(xiàng)目
-
打開項(xiàng)目
image-20210324154037496.png
- 啟動(dòng)項(xiàng)目
image-20210324154142072.png
- 網(wǎng)頁中打開
image-20210324154318096.png
image.png
* 有錯(cuò)誤歡迎指出