根据Elementplus UI 配置组件及样式的自动导入

自动导入推荐#

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

Vite#

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

这样配置太过简单，你会发现目录会多出两个文件，auto-imports.d.ts和components.d.ts。

他们的作用就是不需要开发者手动导入，你所使用的组件库和依赖都会在这里看到。如下components.d.ts文件。

 如果只是以上简单的配置auto-imports.d.ts你会发现他是一个空文件，所以还需要你加配置，配置如下：

dts配置生成文件的路径，默认是根路径。但是使用默认路径会存在问题，页面会报依赖未定义的错误，放到src下会解决这一问题。如果不想放在src下，你可以修改tsconfig文件，如下配置

"include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/style/blackTheme.scss"
  ]

 因为ts只配置了src下的.d.ts文件，自动生成的文件和sec同级所以报错，将src/**/*.d.ts改为**/*.d.ts即可

imports配置可以自动引入的依赖，我配置的是vue，vue-router，axios等，配置完成以后，他会将你配置的依赖显示到auto-imports.d.ts中，

同时设置vueTemplate:true，在页面使用（ref,reactive）时不在需要引入。

    AutoImport({
      resolvers: [ElementPlusResolver()],
      dts: "src/auto-imports.d.ts",
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/, // .md
      ],
      vueTemplate: true,
      imports: [
        "vue",
        "vue-router",
        "vue/macros",
        // custom
        {
          "@vueuse/core": [
            // named imports
            "useMouse", // import { useMouse } from '@vueuse/core',
            // alias
            ["useFetch", "useMyFetch"], // import { useFetch as useMyFetch } from '@vueuse/core',
          ],
          axios: [
            // default imports
            ["default", "axios"], // import { default as axios } from 'axios',
          ],
        },
      ],
    }),

    Components({
      // allow auto load markdown components under `./src/components/`
      extensions: ["vue", "md"],
      // allow auto import and register components used in markdown
      include: [/\.vue$/, /\.tsx$/, /\.vue\?vue/, /\.md$/],
      resolvers: [ElementPlusResolver()],
      dts: "src/components.d.ts",
    }),

如果你想使用$ref也可以配置好，无需在自己引入了。$ref定义的变量不需要.value哦

vue({
      include: [/\.vue$/, /\.md$/],
      // 可以使用$ref
      reactivityTransform: true,
    }),

注意：自动引入会出现一些样式的丢失，如：ElMessage、ElNotification等，解决方法如下，在vite.config.ts中进行如下配置。这里会用到vite-plugin-style-import插件，自己下载即可。

 import {
  createStyleImportPlugin,
  ElementPlusResolve,
} from "vite-plugin-style-import";

// 解决message和notification引入不生效问题
    createStyleImportPlugin({
      resolves: [ElementPlusResolve()],
    }),

 想要动态改变浏览器中title，可以使用vite-plugin-html，可以进行title的动态配置,然后可以在index.html根目录下进行渲染了，如下

createHtmlPlugin({
      inject: {
        data: {
          title: "vite+vue3+ts",
          description: "系统",
          version: "1.0.1",
        },
      },
    }),

<title><%-title%></title>

配置全局的css、less、scss，可以如下配置：我在项目main.ts引入了样式所以这里注释了

css: {
    preprocessorOptions: {
      // less: {
      // 全局添加less
      // additionalData: `@import '@/assets/styles/common/var.less';`,
      // javascriptEnabled: true,
      // },
    },
  },

然后就是打包时代码的一些配置了。配置去除console.log、debugger以及注释等。

 /** Vite 2.6.x 以上需要配置 minify: "terser", terserOptions 才能生效 */
    minify: "terser",
    /** 在打包代码时移除 console.log、debugger 和 注释 */
    terserOptions: {
      //打包后移除console和注释
      compress: {
        drop_console: false,
        drop_debugger: true,
        pure_funcs: ["console.log"],
      },
      format: {
        /** 删除注释 */
        comments: false,
      },
    },

更详细的配置：https://gitee.com/liu--zicheng/vue3-vite-template/blob/master/vite.config.tshttps://gitee.com/liu--zicheng/vue3-vite-template/blob/master/vite.config.ts