尽管官网element-plus.gitee.io/zh-CN/guide… 也有讲,但"每个人都有不同的境遇,我们不一样…"
按需自动导入
npm install -D unplugin-vue-components unplugin-auto-import
vite.config.ts 改动如下:
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}), ],
});
此时此刻要以结果为准,要在代码用个组件试一下,pnpm run build ,如果有700kb的包,像下面这样
请检查main.ts,是否加载了全部
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(ElementPlus).mount("#app");
因为我当时是从上到下读的官网,然后就…阿巴阿巴
ElMessageBox、ElMessage 样式失效
ElMessageBox.prompt("Please input your e-mail", "Tip", {inputPattern:/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage: "Invalid Email",});
不要执着于this.$message的方式了,在vue原型链上挂载东西本就不好…
看到网上一些解决方法是在main.ts再引入一遍,像这样
import "element-plus/theme-chalk/el-message.css";
import "element-plus/theme-chalk/el-message-box.css";
其实只需要重启一遍就可以了,auto-imports.d.ts会多出如下代码
export {}
declare global {const ElMessage: typeof import('element-plus/es')['ElMessage']
}
实际上这个东西在保存的时候就出现,所以只需调整一下vite.config.ts插件的顺序即可
export default defineConfig({plugins: [AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),vue(),],
});
组件中文化
<script setup lang="ts">
import zhCn from "element-plus/lib/locale/lang/zh-cn";
</script>
<template><el-config-provider :locale="zhCn"></el-config-provider>
</template>
解决TS报错
其实auto-imports.d.ts已经有了,原因在于tsconfig.json中有如下
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
问题就出在"src/**/*.d.ts",没有包含auto-imports.d.ts,改成"**/*.d.ts" 就好了
github项目地址 github.com/xiaodun/sf-…