vite+vue3+ts中自动导入的使用

vite+vue3+ts中自动导入的使用

请按照我的上述文章(vite+vue3+ts新手使用教程)安装vite+vue3+ts.

1.安装需要的库

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给以演示

以下根据Element Plus 和 Ant Design Vue UI 组件库来使用

2.配置根目录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.json 中添加以下 compilerOptions 和 include 属性

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

4.使用

直接在项目中使用无需在引用

<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>