31.vue3项目设置自动引入

vue3+vite项目设置自动引入Vue API、组件、Element Plus。避免在每个页面重复引入，以此来节省重复代码和提高开发效率。

插件	概念	自动导入对象
unplugin-auto-import	按需自动导入API	ref，reactive,watch,computed 等API
unplugin-vue-components	按需自动导入组件	Element Plus 等三方库和指定目录下的自定义组件

安装插件依赖

pnpm add unplugin-auto-import unplugin-vue-components -D

相关配置

1. 自动导入Vue API

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      AutoImport({
        include: [/\.[tj]sx?$/, /\.vue\??/],
        // 自动导入Vue相关函数，如：ref、reactive，toRef等
        // import: ['vue', 'vue-router'],
        imports: [
          'vue',
          'vue-router',
          '@vueuse/core',
          {
            vue: ['createVNode', 'render'],
            'vue-router': [
              'createRouter',
              'createWebHistory',
              'useRouter',
              'useRoute'
            ],
            // 全局使用 _.xxx()
            'lodash-es': [
              // default imports
              ['*', '_'] // import { * as _ } from 'lodash-es',
            ]
          },
          // type import
          {
            from: 'vue',
            imports: [
              'App',
              'ComponentPublicInstance',
              'ComponentPublicInstanceCostom'
            ],
            type: true
          },
          {
            from: 'vue-router',
            imports: [
              'RouteRecordRaw',
              'RouteLocationRaw',
              'LocationQuery',
              'NavigationFailure',
              'RouteParams',
              'RouteLocationNormalizedLoaded',
              'RouteRecordName',
              'NavigationGuard'
            ],
            type: true
          }
        ],
        // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
        eslintrc: {
          enabled: true, // 是否自动生成 eslint 规则，建议生成之后设置 false 
          // filepath: "./.eslintrc-auto-import.json", //自动导入函数 eslint 规则的文件默认路径： ./.eslintrc-auto-import.json
        },
      });
      // 自动导入组件TS类型声明文件，默认 ./components.d.ts
      Components(),
    ]
  }
})

2. .eslintrc.js

"extends": [
  "./.eslintrc-auto-import.json"
],

3. 自动导入TS类型声明文件引入

// tsconfig.json
{
  "include": ["src/**/*.d.ts"]
}

4. 整合Element Plus

• 安装Element Plus

pnpm add Element Plus

• 配置

// vite.config.ts
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
export default ({ mode }) => {
  return {
    plugins: [
      // ...
      AutoImport({
        // ...  
        resolvers: [
          // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
          ElementPlusResolver(),
        ]
        vueTemplate: true, // 是否在 vue 模板中自动导入
        // 自动导入函数TS类型声明文件，默认路径
        dts: './auto-imports.d.ts',
      }),
      Components({ 
        resolvers: [
          // 自动导入 Element Plus 组件
          ElementPlusResolver()
        ],
      }),
    ],
  };
}