Vue3+Vite項目按需自動導入配置以及一些常見問題修復
更新時間：2023年02月08日 10:52:24 作者：Sophie_U
Vite是一種新型前端構(gòu)建工具,能夠顯著提升前端開發(fā)體驗,下面這篇文章主要給大家介紹了關(guān)于Vue3+Vite項目按需自動導入配置以及一些常見問題修復的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
一、Vue API自動導入
解決的問題：避免在每個vue組件中都重復性的去聲明ref,reactive等。如下：
import {ref, reactive} from 'vue' // 配置自動導入，用來省略這句手動引入
const test = ref('aaaa')
1.1 配置unplugin-auto-import
具體配置：
安裝vite插件：unplugin-auto-import
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
export default defineConfig({
plugins: [
vue(),
AutoImport({
// 自動導入 Vue 相關(guān)函數(shù)，如：ref, reactive, toRef 等
imports: ['vue'],
}),
],
});
1.2 可能遇到ts,eslint不識別而導入報錯的問題
1、typescript 報錯：
'reactive' is not defined.
原因：TS未識別到vue api,沒有相應的模塊聲明文件
處理：在vite中配置并生成auto-imports.d.ts ，并在tsconfig.json中引入
// vite.config.js
export default defineConfig({
plugins: [
vue(),
AutoImport({
// 自動導入 Vue 相關(guān)函數(shù)，如：ref, reactive, toRef 等
imports: ['vue'],
// 生成自動導入的TS聲明文件
dts: "/auto-import.d.ts",
}),
],
});
tsconfig.json
{
"include": [
"src/**/*.d.ts",
"./*.d.ts",
"./auto-imports.d.ts" // 導入上一步生成的配置文件
],
}
2、eslint不識別報錯
error 'reactive' is not defined no-undef
原因：未配置自動導入相應的eslint規(guī)則
處理：通過autoimport中的配置生成對應.eslintrc-auto-import.json配置文件，并在.eslintrc中引入
// vite.config.js
{
// ......
AutoImport({
imports: ["vue"],
resolvers: [ElementPlusResolver()],
dts: "/auto-import.d.ts",
eslintrc: {
enabled: true, // 1、改為true用于生成eslint配置。2、生成后改回false，避免重復生成消耗
},
}),
}
extends: [
//....此處活力之前配置.
"./.eslintrc-auto-import.json",
],
1.3 配置src/component目錄下的組件自動引入
在頁面組件中，不用手動導入組件，直接使用組件的方式：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
export default defineConfig({
plugins: [
vue(),
AutoImport({
// 自動導入 Vue 相關(guān)函數(shù)，如：ref, reactive, toRef 等
imports: ['vue'],
}),
Components({
// 指定自動導入的組件位置，默認是 src/components
dirs: ['src/components','src/otherComponents'],
}),
],
});
二、按需引入UI組件庫（antd,element-plus）
2.1、按需引入element-plus
官方文檔很清晰，用到
unplugin-vue-components和unplugin-auto-import這兩款插件
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
// 自動導入element相關(guān)函數(shù)，如：ElMessage, ElMessageBox..
resolvers: [ElementPlusResolver()],
}),
Components({
// 自動導入element相關(guān)組件
resolvers: [ElementPlusResolver()],
}),
],
})
2.2 ant-design-vue 按需引入
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [
AntDesignVueResolver(),
],
}),
]
})
2.3 自動導入 Element Plus Icon
element-plus 圖標是用 svg 渲染的，需要額外的導入方法。官方文檔對于icons也有相應說明。
- 安裝額外插件：
npm install -D unplugin-icons - 配置自動導入
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [
// ....
// 自動導入圖標組件
IconsResolver({
prefix: 'Icon',
}),
],
}),
Components({
resolvers: [
// .....
// 自動注冊圖標組件
IconsResolver({
enabledCollections: ['ep'], //@iconify-json/ep 是 Element Plus 的圖標庫，所以 IconsResolver 配置了 enabledCollections: ['ep']
}),
],
}),
Icons({
autoInstall: true,
}),
],
});
注意：通過此方法自動引入后，使用icon時，請采用以下方式才生效。（添加i-eq作為icon前綴）
<el-icon :size="70" color="#409EFC" class="no-inherit"> <i-ep-share /> </el-icon>
三、關(guān)于配置文件
unplugin-auto-import會默認在要目錄生成auto-imports.d.ts文件，unplugin-vue-components對應會在根目錄生成components.d.ts文件，分別描述自動導入的 API、component。通過在tsconfig.json的include中引入對應配置文件，避免TS報錯。
AutoImport({
// ...
// 配置文件生成位置，默認是根目錄 /auto-imports.d.ts
// dts: './auto-imports.d.ts',
}),
Components({
// ...
// 配置文件生成位置，默認是根目錄 /components.d.ts
// dts: './components.d.ts',
}),
總結(jié)
到此這篇關(guān)于Vue3+Vite項目按需自動導入配置以及一些常見問題修復的文章就介紹到這了,更多相關(guān)Vue3 Vite項目按需自動導入配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
VUE3使用Element-Plus時如何修改ElMessage中的文字大小
在使用Element-plus的Elmessage時使用默認的size無法滿足我們的需求時,我們可以自定義字體的大小,但是直接重寫樣式后,并沒有起作用,甚至使用::v-deep深度選擇器也沒有效果,本文介紹VUE3使用Element-Plus時如何修改ElMessage中的文字大小,感興趣的朋友一起看看吧2023-09-09
這篇文章主要給大家介紹了關(guān)于vue3中輕松實現(xiàn)switch功能組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要介紹了jquery和vue對比，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了vue自定義指令用法,結(jié)合實例形式總結(jié)分析了vue自定義指令常見寫法與相關(guān)操作注意事項,需要的朋友可以參考下2019-03-03
這篇文章主要為大家詳細介紹了Vue.js下拉菜單組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
在工作中遇到N次input無法輸入的問題,所以下面這篇文章主要給大家介紹了關(guān)于vue?el-input輸入框輸入不了的解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
本篇文章主要介紹了vue-resouce設(shè)置請求頭的三種方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家介紹了vue3 name 屬性的使用技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要為大家詳細介紹了Vue實現(xiàn)開始時間和結(jié)束時間的范圍查詢，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家詳細介紹了vue+mock.js實現(xiàn)前后端分離，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07