最近寫個人vue項目话告，最開始用的@vue/cli兼搏，起初項目規(guī)模小時還好，可是隨著項目規(guī)模的增大沙郭，webpack打包是越來越慢了佛呻。。病线。
Vite介紹
Vite 是一個由原生 ESM 驅(qū)動的 Web 開發(fā)構(gòu)建工具吓著。在開發(fā)環(huán)境下基于瀏覽器原生 ES imports 開發(fā)，在生產(chǎn)環(huán)境下基于 Rollup 打包送挑。(不知道比webpack快了十幾倍绑莺，本人親測)
它主要具有以下特點：
- 快速的冷啟動
- 即時的模塊熱更新
- 真正的按需編譯
那廢話少說，我們先直接來試用一下惕耕。
創(chuàng)建模板項目
我們快速用vite創(chuàng)建一個vue3模板項目:
npm init vite-app vite-test
// or
yarn create vite-app vite-test
當(dāng)然纺裁，創(chuàng)建react項目也是可以的：
npm init vite-app --template react
// or
yarn create vite-app --template react
添加router vuex
yarn add vue-router@next vuex@next
添加eslint支持
以前用eslint總感覺不自在，怎么它這也管那也管？用了一會直接把rules的內(nèi)容全部注釋掉了欺缘。就像我把typescript用成了anyScript栋豫。但是用了一段時間后，現(xiàn)在寫項目已經(jīng)離不開它了谚殊，沒有eslint根本沒有碼字的欲望笼才。想要把eslint作為你輔助寫代碼的利器，你需要：
- 打開保存時自動lint络凿，否則看著滿屏的錯誤骡送，手動改會崩潰的
- 找到一個符合你的規(guī)則，這里我用的是業(yè)界公認(rèn)最好的airbnb
yarn add -D eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue
然后在你的項目根目錄創(chuàng)建一個.eslintrc.js絮记，寫入以下內(nèi)容：
module.exports = {
extends: ['plugin:vue/vue3-essential', 'airbnb-base'],
parserOptions: {
ecmaVersion: 2020,
sourceType: 'module',
},
plugins: ['vue'],
rules: {
//自己寫一些想配置的規(guī)則
},
overrides: [
{
files: ['*.vue'],
rules: {
//這里寫覆蓋vue文件的規(guī)則
},
},
],
};
使用sass摔踱？
當(dāng)然你也可以使用其他的css預(yù)處理器
yarn add -D sass
配置vite.config.js
在項目根目錄下新建一個vite.config.js
import path from 'path';
module.exports = {
base: './',
// sourcemap: true,
minify: 'esbuild',
// 配置別名
alias: {
//vite中alias必須以斜線開頭和結(jié)尾，暫時未知原因怨愤，這樣其實挺不方便的
//所以在eslint配置alias和文件中導(dǎo)入路徑也要相應(yīng)的修改
'/@/': path.resolve(__dirname, './src'),
},
cssPreprocessOptions: {
//這里注意派敷，鍵名是scss不是sass！一字之差能讓你折騰好久
scss: {
//這里寫你想導(dǎo)入全局scss變量的路徑
//這里注意只能寫相對路徑撰洗，alias貌似在css中不會生效
additionalData: "@import './src/style/a.scss';",
},
},
// 配置Dep優(yōu)化行為
optimizeDeps: {
include: ['lodash-es'],
},
};
配置eslint的alias
上面只配置了vite的alias篮愉，讓vite在運行時能找到文件位置。但是eslint的alias也是要配置的差导，否則你在寫代碼時试躏，eslint會提示找不到文件路徑。因為eslint不會去讀取vite.config.js设褐，它們二者沒有關(guān)聯(lián)颠蕴。所有我們需要添加一個eslint插件
yarn add -D eslint-import-resolver-alias
然后在.eslintrc.js中追加一下內(nèi)容：
module.exports = {
//之前的內(nèi)容，這里已省略
settings: {
'import/resolver': {
alias: {
map: [
['/@', './src'],
],
extensions: ['.ts', '.js', '.jsx', '.json', '.vue'],
},
},
},
};
具體到文件
//必須以斜線開頭助析！
import xx from '/@/xx.vue';
