Vue3 Cli5按需导入ElementPlus

发布时间:2024年01月23日

1、安装环境

node:16.20.0
vue:3.2.36
vue/cli:5.0.0
element-plus:2.2.25
element-plus/icons-vue:2.0.10
unplugin-auto-import:0.16.1 // 当前环境用这个包,不然会提示各种错误
unplugin-vue-components:0.25.0 // 当前环境用这个包,不然会提示各种错误

2、vue.config.js

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const {ElementPlusResolver} = require('unplugin-vue-components/resolvers')
module.exports = defineConfig({
    configureWebpack: {
        plugins: [
             AutoImport({
                resolvers: [ElementPlusResolver()]
             }),
             Components({
                resolvers: [ElementPlusResolver()]
             })
        ]
    }
})

3、配置完后,重新运行npm run serve。会在根目录下生成auto-imports.d.ts和components.d.ts。

4、配置tsconfig.json。在include中新增以下两项

{
    "include": [
        "auto-imports.d.ts",
        "components.d.ts"
    ]
}

5、由于elementPlus的Icon如果按需引入的话,会破坏最终的使用方式。因此这里按照全局引入的形式使用

// main.ts
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    // @ts-ignore
    app.component(key, component)
}

6、到这里其实可以使用了,但是运行后样式会丢失,因此需要再main.ts中再引入样式文件

import 'element-plus/dist/index.css'

7、国际化,目前有三种引入方式。

7.1、第一种全局引入,但是需要全局导入element-plus。这会破坏按需引入。
7.2、在使用的每个组件中,导入locale。太麻烦了。
7.3、目前我在使用的,在App.vue中使用
<template>
  <el-config-provider :locale="locale">
      <router-view/>
  </el-config-provider>
</template>
<script lang='ts' setup>
import {reactive} from "vue";
// @ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const {locale} = reactive({
  locale: zhCn
})
</script>

文章来源:https://blog.csdn.net/QiZi_Zpl/article/details/135765005
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。