Preface
When we write vue projects, we will introduce some component libraries. Sometimes there may be more than one component library, which will make our project particularly large after packaging, and may use a large number of components in the components.importIntroduce the components used to make the projects after packaging less large, and no matter which one is developers friendly.
Next, share a few plugins to make the components less usedimportOr not to useimportYou can introduce components on demand for us to use
-
unplugin-vue-components: Automatically introduce components on demand -
vite-plugin-style-import: Automatically introduce styles -
unplugin-auto-import: Automatically introduce API -
unplugin-icons: Automatically introduce icons
If installed, it should be:
//Direct npm i stutternpm i unplugin-vue-components unplugin-auto-import vite-plugin-style-import unplugin-icons
unplugin-vue-components
After the installation is completed,Just introduce the element-plus component library used here
//
import Components from "unplugin-vue-components/vite";
//Introduce Ele.me components, as long as you install ep, there will be a prompt here.import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
export default defineConfig({
plugins: [
//...
Components({
dts: "./src/",//Create ts file extensions:['vue'],//Specify the suffix of the file dirs: ["src/components/"],//Specify the path and automatically import custom components resolvers: [ElementPlusResolver()],//Specify the automatically imported component library, that is, the one exported from the plug-in }),
],
});This simple configuration is completed. At this time, we can use the components as we want in the components
<template>
<div>
<el-button @click="btn">Click</el-button>
<!-- In the plugin，Under the specified path，You can also use custom components directly -->
<HelloWorld/>
</div>
</template>
<script setup lang="ts">
const btn = () => {
("iceCode");
};
</script>vite-plugin-style-import
Of course, sometimes, not all components come with styles, such as the message prompt component in antdv, which requires the introduction of styles separately.
It can be used herevite-plugin-style-importAutomatically import styles
import { createStyleImportPlugin, AndDesignVueResolve} from "vite-plugin-style-import";
//Before 2.0//import styleImport { AndDesignVueResolve} from "vite-plugin-style-import";
export default defineConfig({
plugins: [
//...
createStyleImportPlugin({
resolves: [AndDesignVueResolve()],//Introduced here }),
//The following writing method makes the writing method before this plugin 2.0 // styleImport( {
// libs: [
// {
// libraryName: "ant-design-vue",
// esModule: true,
// resolveStyle: (name: string) => {
// return `ant-design-vue/dist/`;
// },
// },
// ],
// })
],
});At this time, we can use the antdv message component and display it normally without introducing styles.
<template>
<div>
<Button @click="btn">Click</Button>
</div>
</template>
<script setup lang="ts">
import { Button, message } from "ant-design-vue";
const btn = () => {
("iceCode");
};
</script>unplugin-auto-import
In the vue3 option, we need to use import to introduce vue APIs.unplugin-auto-importThis allows us to avoid introducing it when writing vueref，reactiveWait for the API, which reduces the number of times we frequently write imports
import AutoImport from "unplugin-auto-import/vite"; //Introduce componentsexport default defineConfig({
plugins: [
///...
AutoImport({
imports: ["vue", "vue-router", "pinia", "@vueuse/core"],//This is the project that automatically introduces the API dts: "./src/",//Create a file here. resolvers: [ ElementPlusResolver()],//The APIs in the component can also be automatically introduced, for example, message needs to be introduced separately }),
],
});In this way, we no longer need to introduce API when we do some operations in vue3
<script setup lang="ts">
const num = ref<number>(0);
const newNum = computed<number>( () => + 1 );
interface n{
n:number
}
const numObj = reactive<n>({
n: ,
});
(toRaw(numObj));
</script>unplugin-icons
If you need to introduce a large number of icons in the project and don't want to introduce them manually, you can use itunplugin-iconsTo carry out automatic introduction
//Automatically introducing icons need to be used with plug-ins that automatically introduce componentsimport 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/",//Create ts file extensions:['vue'],//Specify the suffix of the file dirs: ["src/components/"],//Specify the path and automatically import custom components resolvers: [IconsResolve()],//Icon Component // { enabledCollections: ['ep'], }, some will pass this parameter in IconsResolve(), but I can test that it is OK not to pass }),
Icons({
//What kind of framework to use to parse compiler: "vue3",
//Is it installed automatically autoInstall: true,
}),
],
});It's also a bit special when used
<template>
<div>
<!-- This is the Ele.me componenticonuse，Need to addi-ep- 才能正常use -->
<i-ep-user/>
</div>
</template>This automatically introduces icon plugin,If the icons are not used in the project, it is not recommended to use them, and there are not many places to use them. After adding this plug-in, the package size will be larger
Overall code
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";
// /config/
export default defineConfig({
plugins: [
vue(),
//Automatically introduce API AutoImport({
imports: ["vue", "vue-router", "pinia", "@vueuse/core"],
dts: "./src/",
resolvers: [AntDesignVueResolver(), ElementPlusResolver()],
} ),
//Automatically introduce components Components({
dts: "./src/",
extensions: ["vue"],
dirs: ["src/components/"],
resolvers: [
AntDesignVueResolver({
importStyle: false, // css in js
}),
ElementPlusResolver(),
IconsResolve(),
],
} ),
// Automatically introduce styles createStyleImportPlugin({
resolves: [AndDesignVueResolve(), ElementPlusResolve()],
} ),
//Automatically introduce icon Icons({
//What kind of framework to use to parse compiler: "vue3",
//Is it installed automatically autoInstall: true,
}),
],
});Ending
In the automatic introduction of components and automatic introduction of API, you will find an attribute that creates ts files.If you are using the Ts project, be sure to write it, as it will cause the Ts to be reported incorrectlyBy default, these two plug-ins will create . files in the root directory, but our project files are all in the src directory. Even if there is a ts file in the root directory, it cannot be accessed.Here we actively add the corresponding files in the src directory to prevent us from not knowing after automatic introduction and reporting an error to us!
The above is a detailed explanation of the method of automatically introducing components in the vue project. For more information about introducing components in vue, please pay attention to my other related articles!