vue3 + vite 創建項目

因為菜鳥使用了vite，所以很顯然已經完全不想回 webpack 的身邊了（可能人就是這樣：喜新厭舊），然后菜鳥翻了一圈掘金，沒發現自己寫過 vue3+vite 的文章，所以這里就先從這里講起！

菜鳥之前寫的：vue3+webpack+eslint|prettier+elementplus+國際化+axios封裝+pinia，感覺eslint|prettier部分沒有寫好，所以這里重新搞了一下！

創建項目

npm create vue@latest

執行結果

注意

jsx 按需要引入！

這里可以見：差點因為性能優化而被"優化"！虛擬化表格（Virtualized Table）性能優化

如果創建項目選了 eslint + prettier

下載 eslint 和 prettier 插件（下方《從零教你使用 eslint + prettier 有截圖》），并直接在新建的項目下執行

npm i

這個時候eslint就生效了，但是現在vue3創建時會給你默認的配置，這個時候只需要修改 eslint.config.js，將rules加到后面即可（如果放前面會被后面的覆蓋）

但是如果你創建項目時沒有選 eslint + prettier，那就看看下面的吧！

從零教你使用 eslint + prettier

首先假如你是剛下載的vscode，且你新建的項目沒有選擇 eslint + prettier ，這個時候該怎么辦？

第一步，下載eslint

npm i eslint --save-dev

第二步，創建eslint配置文件，并下載好其他插件

npx eslint --init

創建過程如下：

生成文件如下：

這里暫時使用的都是默認的配置，如果需要自己加配置可以這樣加：

這個時候 eslint 雖然生效了，但是vscode并不會提示，因為還差一個 eslint 插件！

現在 eslint 基本上已經可以使用了，但是要我們人為的一個一個去改這些報錯就很難受，這個時候 prettier 就該上線了！

注意

eslint 報錯不會影響項目運行！以前webpack項目是會影響的，原因如下：

第三步：安裝 prettier

npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

其中：

安裝后配置 eslint (2025/2/7 補充)

這里菜鳥已經換成了cjs的寫法，為什么換，見：element plus 使用問題

const globals = require("globals");
const pluginJs = require("@eslint/js");
const pluginVue = require("eslint-plugin-vue");
const autoImportConfig = require("./.eslintrc-auto-import.json");module.exports = [require("eslint-config-prettier"),{files: ["**/*.{js,mjs,cjs,vue}"]},{ignores: ["node_modules", "dist", "bin"] // 忽略不需要檢查的文件},pluginJs.configs.recommended,...pluginVue.configs["flat/essential"],{languageOptions: {globals: {...globals.browser,...globals.node,...autoImportConfig.globals}}},{plugins: {prettier: require("eslint-plugin-prettier")}},{rules: {"prettier/prettier": "error", // 讓 Prettier 報告格式錯誤，并作為 ESLint 錯誤處理"no-console": "off","semi": ["error", "always"],// avoidEscape: true 推薦添加"quotes": ["error", "double", { avoidEscape: true }],"vue/multi-word-component-names": 0}}
];

第四步：設置 prettier 規則

創建 .prettierrc.json 文件，常用規則如下：

{"semi": true,"singleQuote": false,"tabWidth": 2,"printWidth": 80,"trailingComma": "none"
}

但是完成上述操作后并不會自動格式化，還需要你安裝插件

安裝完成后，你可以右鍵，點擊格式化選擇 prettier 進行格式化

但是菜鳥感覺還是不夠智能，要是能直接保存時自己格式化不是更香嗎？

注意

其實只要安裝了 prettier - code formatter 這個插件，就可以自動格式化，但是使用的是這個插件里面的版本就是不是你自己下載的版本！

第五步：修改 vscode 配置

在vscode設置中，找到在setting.json中編輯

添加如下代碼：

{"editor.formatOnSave": true,"editor.defaultFormatter": "esbenp.prettier-vscode","[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"eslint.validate": ["javascript", "vue"],"eslint.run": "onType","eslint.format.enable": true
}

重啟vscode，你將獲得很棒的體驗！

注意

不管是改eslint還是prettier，都一定要重啟IDE，不然就會不生效，讓你感覺你配錯了！！！

eslint 配置

當你以為萬事大吉開始開發的時候，刪除掉 vue 自帶的文件，并新建如菜鳥這樣的文件時

你會發現報錯這個

Component name "xxxxx” should always be multi-word

這里的主要原因是

但是感覺這個規范確實不需要（部分文件不是兩個單詞拼接），只需要在 eslint.config.js 里面加上這一行

方便復制

"vue/multi-word-component-names": 0,

element plus

這里比較多，直接提出成一篇文章了：element plus使用問題

vite 使用 sass

vite天然支持postcss，所以要使用sass也很簡單，直接

npm i sass

即可開箱即用！

剩余

剩余的感覺之前寫的就可以，回到之前的：vue3+webpack+eslint|prettier+elementplus+國際化+axios封裝+pinia