vue項(xiàng)目?jī)?yōu)雅實(shí)現(xiàn)自動(dòng)引入組件的方法詳解

更新時(shí)間：2023年09月13日 10:00:00 作者：iceCode

在我們寫vue項(xiàng)目的時(shí)候,都會(huì)引入一些組件庫,有時(shí)候有可能還不止一個(gè)組件庫,那么如何優(yōu)雅的實(shí)現(xiàn)自動(dòng)引入組件呢,下面小編就來和大家詳細(xì)講講吧

前言

在我們寫vue項(xiàng)目的時(shí)候，都會(huì)引入一些組件庫，有時(shí)候有可能還不止一個(gè)組件庫，這樣會(huì)使我們的項(xiàng)目打包之后特別龐大，再或者在組件內(nèi)使用大量的import引入所使用的組件，讓其打包之后的項(xiàng)目不那么龐大，不論哪一種對(duì)開發(fā)者都不太友好。

接下來分享幾個(gè)插件，讓組件中使用較少的import或者不使用import就能按需引入組件供我們使用

unplugin-vue-components：自動(dòng)按需因引入組件
vite-plugin-style-import：自動(dòng)引入樣式
unplugin-auto-import：自動(dòng)引入api
unplugin-icons：自動(dòng)引入圖標(biāo)

安裝的話應(yīng)該都會(huì) ：

//直接npm i 梭哈
npm i unplugin-vue-components unplugin-auto-import vite-plugin-style-import unplugin-icons

unplugin-vue-components

安裝完成之后，在vite.confing.ts引入即可，在這里使用的element-plus組件庫

//vite.confing.ts 
import Components from "unplugin-vue-components/vite";
//引入餓了么的組件，只要安裝的ep,這里就會(huì)有提示的
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
export default defineConfig({
  plugins: [
  //...
    Components({
      dts: "./src/components.d.ts",//創(chuàng)建ts文件
      extensions:['vue'],//指定文件的后綴
      dirs: ["src/components/"],//指定路徑，自動(dòng)導(dǎo)入自定義組件
      resolvers: [ElementPlusResolver()],//指定自動(dòng)引入的組件庫，也就是從插件中導(dǎo)出的那個(gè)
    }),
   ],
});

這樣簡(jiǎn)單的配置就完成了，這個(gè)時(shí)候我們?cè)诮M件里面就可以為所欲為的使用組件了

app.vue

<template>
  <div>
    <el-button @click="btn">點(diǎn)擊</el-button>
    <!-- 在插件內(nèi)，指定的路徑下，也可以直接使用自定義組件 -->
    <HelloWorld/>
  </div>
</template>
<script setup lang="ts">
const btn = () => {
  ElMessage.error("iceCode");
};
</script>

vite-plugin-style-import

當(dāng)然有時(shí)候，不是所有的組件都自帶樣式的，就例如antdv中的message提示組件，這個(gè)是需要單獨(dú)引入樣式的

這里就可以使用vite-plugin-style-import來對(duì)樣式的自動(dòng)導(dǎo)入了

vite.confing.ts

import { createStyleImportPlugin, AndDesignVueResolve} from "vite-plugin-style-import";
//2.0之前
//import styleImport { AndDesignVueResolve} from "vite-plugin-style-import";
export default defineConfig({
  plugins: [
  //...
    createStyleImportPlugin({
      resolves: [AndDesignVueResolve()],//這里引入
    }),
     //下面這種寫法使在這個(gè)插件2.0之前的寫法
    // styleImport( {
    //   libs: [
    //     {
    //       libraryName: "ant-design-vue",
    //       esModule: true,
    //       resolveStyle: (name: string) => {
    //         return `ant-design-vue/dist/antd.css`;
    //       },
    //     },
    //   ],
    // })
   ],
});

這個(gè)時(shí)候我們?cè)偈褂胊ntdv的message組件無需引入樣式也可以正常展示了

app.vue

<template>
  <div>
    <Button @click="btn">點(diǎn)擊</Button>
  </div>
</template>
<script setup lang="ts">
import { Button, message } from "ant-design-vue";
const btn = () => {
  message.success("iceCode");
};
</script>

unplugin-auto-import

在vue3選項(xiàng)式中，我們需要大量使用import引入vue的api，unplugin-auto-import可以使我們?cè)趯憊ue的時(shí)候不用再引入ref，reactive等api了，減少了我們頻繁寫import的次數(shù)

vite.confing.ts

import AutoImport from "unplugin-auto-import/vite"; //引入組件
export default defineConfig({
  plugins: [
   ///...
   AutoImport({
      imports: ["vue", "vue-router", "pinia", "@vueuse/core"],//這里是自動(dòng)引入api的項(xiàng)目
      dts: "./src/auto-imports.d.ts",//在這創(chuàng)建.d.ts文件
      resolvers: [ ElementPlusResolver()],//組件中的api也是可以自動(dòng)引入的，比如message是需要單獨(dú)引入的
    }),
   ],
});

這樣，我們?cè)僭趘ue3中進(jìn)行一些操作的時(shí)候就無需再引入api了

app.vue

<script setup lang="ts">
const num = ref<number>(0);
const newNum = computed<number>( () => num.value + 1 );
interface n{
  n:number
}
const numObj = reactive<n>({
  n: newNum.value,
});
console.log(toRaw(numObj));
</script>

unplugin-icons

如果項(xiàng)目中需要大量引入圖標(biāo)的時(shí)候，又不想手動(dòng)引入，就可以使用unplugin-icons來進(jìn)行自動(dòng)引入

vite.confing.ts

//自動(dòng)引入圖標(biāo)需要搭配自動(dòng)引入組件的插件來用
import Components from "unplugin-vue-components/vite";
import Icons from "unplugin-icons/vite";
import IconsResolve from "unplugin-icons/resolver";
export default defineConfig({
  plugins: [
  //...
    Components({
      dts: "./src/components.d.ts",//創(chuàng)建ts文件
      extensions:['vue'],//指定文件的后綴
      dirs: ["src/components/"],//指定路徑，自動(dòng)導(dǎo)入自定義組件
      resolvers: [IconsResolve()],//圖標(biāo)組件
     // { enabledCollections: ['ep'], }，有的會(huì)在IconsResolve()中傳入這個(gè)參數(shù)，但我測(cè)試不傳也是可以的
    }),
      Icons({
      //使用哪種框架解析
      compiler: "vue3",
      //是否自動(dòng)安裝
      autoInstall: true,
    }),
   ],
});

使用的時(shí)候也是有點(diǎn)特殊

<template>
  <div>
  <!-- 這是餓了么組件的icon使用，需要加上i-ep- 才能正常使用 -->
    <i-ep-user/>
  </div>
</template>

這個(gè)自動(dòng)引入icon的插件，如果不是項(xiàng)目中需要大量使用圖標(biāo)，也不太推薦使用，使用的地方不太多，加入這個(gè)插件之后，會(huì)使打包的體積變大

整體代碼

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import AutoImport from "unplugin-auto-import/vite";
import Icons from "unplugin-icons/vite";
import IconsResolve from "unplugin-icons/resolver";
import { AntDesignVueResolver, ElementPlusResolver } from "unplugin-vue-components/resolvers";
import { createStyleImportPlugin, AndDesignVueResolve, ElementPlusResolve } from "vite-plugin-style-import";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    //自動(dòng)引入api
    AutoImport({
      imports: ["vue", "vue-router", "pinia", "@vueuse/core"],
      dts: "./src/auto-imports.d.ts",
      resolvers: [AntDesignVueResolver(), ElementPlusResolver()],
    } ),
    //自動(dòng)引入組件
    Components({
      dts: "./src/components.d.ts",
      extensions: ["vue"],
      dirs: ["src/components/"],
      resolvers: [
        AntDesignVueResolver({
          importStyle: false, // css in js
        }),
        ElementPlusResolver(),
        IconsResolve(),
      ],
    } ),
    // 自動(dòng)引入樣式
    createStyleImportPlugin({
      resolves: [AndDesignVueResolve(), ElementPlusResolve()],
    } ),
    //自動(dòng)引入icon
    Icons({
      //使用哪種框架解析
      compiler: "vue3",
      //是否自動(dòng)安裝
      autoInstall: true,
    }),
  ],
});

結(jié)尾

在自動(dòng)引入組件和自動(dòng)引入api中會(huì)發(fā)現(xiàn)有一個(gè)創(chuàng)建ts文件的屬性，如果是使用的ts項(xiàng)目，務(wù)必要寫，因?yàn)闀?huì)使ts報(bào)錯(cuò)，默認(rèn)情況下這兩個(gè)插件會(huì)在根目錄下創(chuàng)建好.d.ts文件，但是我們的項(xiàng)目文件都在src目錄下，即使根目錄下有著ts文件，卻訪問不到，這里就是主動(dòng)在src目錄下添加對(duì)應(yīng)的.d.ts文件，防止自動(dòng)引入之后ts不知道，給我們報(bào)錯(cuò)！

以上就是vue項(xiàng)目?jī)?yōu)雅實(shí)現(xiàn)自動(dòng)引入組件的方法詳解的詳細(xì)內(nèi)容，更多關(guān)于vue引入組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: