一、安裝 vue3.0 腳手架
如果之前安裝了2.0的腳手架，要先卸載掉，輸入：npm uninstall vue-cli -g 進(jìn)行全局卸載
然后重新安裝：npm install @vue/cli -g
二、項(xiàng)目搭建過(guò)程
由于 git bash 來(lái)執(zhí)行命令的時(shí)候無(wú)法使用鍵盤上下鍵來(lái)進(jìn)行選項(xiàng)選擇，所以我們要使用? cmd / powershell，這里使用 cmd
1.vue create + 項(xiàng)目名稱
?2.模板選擇，通過(guò)鍵盤上下鍵來(lái)選擇，我們選擇第三個(gè) 自定義
這三個(gè)選擇分別是 vue2 / vue3默認(rèn)模板 / Manually select features 手動(dòng)選擇（自定義）的意思
?3.選擇我們需要的默認(rèn)配置（通過(guò)空格鍵來(lái)選中）
4.vue版本的選擇，我們選擇 vue3
?5.是否使用 class 風(fēng)格的 component，不使用，輸入N
?6.是否使用 babel 來(lái)處理 ts 代碼，選擇，輸入 Y
7.是不是用 history 模式來(lái)創(chuàng)建路由，不使用，輸入n，后續(xù)需要使用可以在配置中做修改
?8.選擇 css 處理器，這里選擇 less
?9.選擇代碼檢測(cè)方式，我選擇 eslint = prettier
10.選擇什么時(shí)候?qū)Υa做 eslint，這里選擇保存代碼的時(shí)候
11.對(duì)于剛才選擇的配置，是選擇生成獨(dú)立的配置文件，還是保存到 pack.json中，這里選擇獨(dú)立的文件
?12.最后一步是 是否將本次配置保存成一個(gè)預(yù)設(shè)，選擇不保存，輸入N，敲一下回車，就開始創(chuàng)建項(xiàng)目了
?三、項(xiàng)目搭建完成后代碼規(guī)范配置
1.集成 editorconfig 配置
EditorConfig 有助于為不同的 IDE 編輯器上處理同一項(xiàng)目的多個(gè)開發(fā)人員維護(hù)一致的編碼風(fēng)格。
VSCode 需要安裝一個(gè)插件：EditorConfig for VS Code
我們需要在代碼主目錄下，創(chuàng)建一個(gè) .editorconfig 文件，將下面的配置復(fù)制進(jìn)去即可：
# http://editorconfig.org
root = true
[*] # 表示所有文件適用
charset = utf-8 # 設(shè)置文件字符集為 utf-8
indent_style = space # 縮進(jìn)風(fēng)格（tab | space）
indent_size = 2 # 縮進(jìn)大小
end_of_line = lf # 控制換行類型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始終在文件末尾插入一個(gè)新行
[*.md] # 表示僅 md 文件適用以下規(guī)則
max_line_length = off
trim_trailing_whitespace = false
————————————————
版權(quán)聲明：本文為CSDN博主「前端.攻城獅」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_45304198/article/details/1217208732.使用 prettier 工具
Prettier 是一款強(qiáng)大的代碼格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、LESS、JSX、Angular、Vue、GraphQLQ、JSON、Markdown等語(yǔ)言，基本上前端能用到的文件格式它都可以搞定，是當(dāng)下最流行的代碼格式化工具。
VSCode需要安裝 prettier 的插件
1.安裝 prettier
npm install prettier -D2.創(chuàng)建 .prettierrc 文件
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 80,
"singleQuote": true,
"trailingComma": "none",
"semi": false
}
- useTabs：使用 tab 縮進(jìn)還是空格縮進(jìn)，選擇 false；
- tabWidth：tab 是空格的情況下，是幾個(gè)空格，選擇 2 個(gè)；
- printWidth：當(dāng)行字符的長(zhǎng)度，推薦 80，也有人喜歡 100 或者 120；
- singleQuote：使用單引號(hào)還是雙引號(hào)，選擇 true，使用單引號(hào)；
- tralilingComma：在多行輸入的尾逗號(hào)是否添加，設(shè)置為 none；
- seml：語(yǔ)句末尾是否要加分號(hào)，默認(rèn)值 true，選擇 false 表示不加；
3.創(chuàng)建 .prettierignore 忽略文件
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*4.可以在 package.json 中配置一個(gè) script，方便執(zhí)行一下腳本就可以對(duì)全部文件做格式化
"prettier": "prettier --write ."3.使用 ESLint 檢測(cè)
VSCode 需要安裝 ESLint 插件
?1.解決 eslint 和 prettier 沖突的問題：
安裝插件：（vue在創(chuàng)建項(xiàng)目時(shí)，如果選擇 prettier，那么這兩個(gè)插件會(huì)自動(dòng)安裝，就不用手動(dòng)再安裝）
npm i eslint-plugin-prettier eslint-config-prettier -D添加 prettier 插件到 .eslintrc.js 中："plugin:prettier/recommended"
extends: [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/typescript/recommended",
"@vue/prettier",
"@vue/prettier/@typescript-eslint",
"plugin:prettier/recommended"
],
————————————————
版權(quán)聲明：本文為CSDN博主「前端.攻城獅」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_45304198/article/details/121720873
重要提示
1.如果配置完后，發(fā)現(xiàn)保存代碼并沒有自動(dòng)格式化，則需要如下配置
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-455494.html
?2.在頁(yè)面代碼處，右鍵，選擇“Format Document”，然后選擇 prettier，保存頁(yè)面，頁(yè)面代碼自動(dòng)格式化文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-455494.html
到了這里，關(guān)于Vue3 腳手架搭建項(xiàng)目詳細(xì)過(guò)程的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
