盡管官網(wǎng)https://element-plus.gitee.io/zh-CN/guide/quickstart.html 也有講,但"每個(gè)人都有不同的境遇,我們不一樣..."

按需自動(dòng)導(dǎo)入

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

vite.config.ts 改動(dòng)如下:

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()],
    }),
   
  ],
});

此時(shí)此刻要以結(jié)果為準(zhǔn),要在代碼用個(gè)組件試一下,pnpm run build,如果有700kb的包,像下面這樣

image.png

請(qǐng)檢查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");

因?yàn)槲耶?dāng)時(shí)是從上到下讀的官網(wǎng),然后就....阿巴阿巴

image.png

ElMessageBox、ElMessage 樣式失效

  ElMessageBox.prompt("Please input your e-mail", "Tip", {
    inputPattern:
      /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
    inputErrorMessage: "Invalid Email",
  });

不要執(zhí)著于this.$message的方式了,在vue原型鏈上掛載東西本就不好...

看到網(wǎng)上一些解決方法是在main.ts再引入一遍,像這樣

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

其實(shí)只需要重啟一遍就可以了,auto-imports.d.ts會(huì)多出如下代碼

export {}
declare global {
  const ElMessage: typeof import('element-plus/es')['ElMessage']
}

實(shí)際上這個(gè)東西在保存的時(shí)候就出現(xiàn),所以只需調(diào)整一下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報(bào)錯(cuò)

image.png

其實(shí)auto-imports.d.ts已經(jīng)有了,原因在于tsconfig.json中有如下

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

問(wèn)題就出在"src/**/*.d.ts",沒(méi)有包含auto-imports.d.ts,改成"**/*.d.ts" 就好了

github項(xiàng)目地址 https://github.com/xiaodun/sf-vue3