The use of automatic import in vite+vue3+ts

The use of automatic import in vite+vue3+ts

Please follow my above article (vite+ vue3 +ts novice tutorial) to install vite+vue3+ts.

1. Install the required libraries

pnpm install -D unplugin-vue-components unplugin-auto-import //安装unplugin-vue-components 和 unplugin-auto-import

pnpm install --save element-plus ant-design-vue//所用的组件element和ant给以演示

The following is used according to Element Plusand UI component libraryAnt Design Vue

2. Configure the root directory vite.config.ts

import {
    
     defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 自动导入vue中hook reactive ref等
import AutoImport from "unplugin-auto-import/vite"

//自动导入ui-组件 比如说ant-design-vue  element-plus等
import Components from 'unplugin-vue-components/vite'
//Ant
import {
    
     AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
//element
import {
    
     ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
    
    
  plugins: [
    vue(),
    Components({
    
    //自定义的模块
      dirs: ['src/components'],
      extensions: ['vue', 'ts'],
      resolvers: [AntDesignVueResolver(), ElementPlusResolver()],//所自动导入的element和Ant
    }),
    AutoImport({
    
     // 插件进行自动导入相关的依赖库
      //安装两行后你会发现在组件中不用再导入ref，reactive等
      imports: ['vue', 'vue-router'],
       // 可选，用于自动导入组件类型
      dts: 'src/components.d.ts', 
    }),
  ],
})

3. tsconfig.jsonAdd the following compilerOptions and include attributes in

{
    
    
  "compilerOptions": {
    
    
    ...
    "plugins": [{
    
     "name": "typescript-plugin-css-modules" }],
  },
  "include": ["./src/**/*"]
}

4.Use

Use it directly in the project without citing it

<template>
  <div>
     ant
     <a-button type="primary">Primary Button</a-button>
     __
     <a-button type="primary" loading>Loading</a-button>
     el
     <el-button>element-plus</el-button>
     __
     <el-button type="warning">Warning</el-button>
  </div>
</template>