Vue3 + Vite 组件库配置

1. 按需导入

将全局引入 element-plus 方式改成按需导入的方式
首先你需要安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件

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

• vite.config.ts

// 自动导入
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({
      imports: ["vue", "vue-router"], // 顺便自动导入 vue vue-router
      resolvers: [ElementPlusResolver()],
      dts: "src/auto-import.d.ts", // 生成的全局变量放到此目录下
    }),
    Components({
      // 默认只针对src/components目录实现自动导入
      dirs: ["src/components", "src/layout/components"], // 后面布局组件也有相关的组件期望自动导入
      dts: "src/components.d.ts",
      resolvers: [ElementPlusResolver()], // 生成的组件的类型放到这里
    }),
  ],
});

2. element-plus 组件 api 挂载到 app

• @/src/plugins/element.ts

import { App } from "vue";
import { ElMessage, ElNotification, ElMessageBox } from "element-plus";

// 默认自动导入组件插件，只会解析在模板中使用的组件，所以这里需要导入样式
// 这里的样式也可以做到按需导入
import "element-plus/theme-chalk/el-message.css";
import "element-plus/theme-chalk/el-notification.css";
import "element-plus/theme-chalk/el-message-box.css";
export default (app: App): void => {
  // 按需导入组件列表
  // Vue.prototype 替换为 config.globalProperties
  // 文档说明 https://v3.cn.vuejs.org/guide/migration/global-api.html#vue-prototype-%E6%9B%BF%E6%8D%A2%E4%B8%BA-config-globalproperties
  app.config.globalProperties.$message = ElMessage;
  app.config.globalProperties.$notify = ElNotification;
  app.config.globalProperties.$confirm = ElMessageBox.confirm;
  app.config.globalProperties.$alert = ElMessageBox.alert;
  app.config.globalProperties.$prompt = ElMessageBox.prompt;
};

• @/main.ts

// 注册element-plus
import installElementPlus from "./plugins/element";
// 安装element-plus插件
app.use(installElementPlus);

这里要注意的是项目中需要使用其它 element-plus 组件，这样自动导入插件会默认引入公共样式，否则公共样式无法导入，弹框就没有颜色了！

3. 按需导入样式

如果不想手动导入样式，可以通过 unplugin-element-plus 自动解析导入

安装 pnpm install unplugin-element-plus

import ElementPlus from "unplugin-element-plus/vite"
export default defineConfig({
  plugins: [
    ...,
    ElementPlus()
  ],
});

去掉 plugins/element.ts 中的引入即可

// import "element-plus/theme-chalk/el-message.css"
// import "element-plus/theme-chalk/el-notification.css"
// import "element-plus/theme-chalk/el-message-box.css"

4. 组件中使用

<template>
  <div>
    <el-button @click="sayHi">按钮</el-button>
  </div>
</template>

<script setup lang="ts">
// import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance()!;
const sayHi = () => {
  proxy?.$message.success("恭喜你，这是一条成功消息");
};
</script>

<style lang="scss"></style>

5. 解决 Eslint 报错问题

当我们去掉 Vue 导入的变量后，虽然可以正常运行，但是 eslint 提示出错

AutoImport({
  imports: ["vue", "vue-router"],
  resolvers: [ElementPlusResolver()],
+ eslintrc: { enabled: false }, // 改成true生成一次后禁用即可
  dts: "src/auto-import.d.ts",
});

在.eslintrc 文件中引入生成的配置

module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended",
    "@vue/prettier",
+   "./.eslintrc-auto-import.json",
  ],
  plugins: ["vue", "@typescript-eslint"],
  rules: {
    "vue/multi-word-component-names": "off",
    "prettier/prettier": [
      "error",
      {
        singleQuote: false, // 使用单引号
        semi: false, // 末尾添加分号
        tabWidth: 2,
        trailingComma: "none",
        useTabs: false,
        endOfLine: "auto",
      },
    ],
+   "@typescript-eslint/no-non-null-assertion": "off",
  },
};