elementplus最新版js实现按需导入

版本说明

element-plus中文网

本次导入 项目使用的是vue3 + js + webpack 搭建。 vue 和 element-plus 的版本如下：

    "element-plus": "^2.1.11",
    "vue": "^3.2.13",

安装

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

按需导入

需要使用额外的插件来导入要使用的组件

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

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

Webpack中配置

我们需要在 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()]
      })
    ]
  }
})

配置完成后，就可以再项目中直接使用了，无需再添加其他引用了。当我们再项目中使用element-plus组件时，前面安装的两个插件，会自动导入，并在项目的根目录下自动生成auto-imports.d.ts文件：

element-plus默认是英文

如果是全局导入:

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

app.use(ElementPlus, {
  locale: zhCn,
})

如果是按需导入，就使用下面这种方式

在 app.vue 加上 ElConfigProvider

<template>
    <el-config-provider :locale="locale">
      <router-view></router-view>
    </el-config-provider>
</template>
<script setup>
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
const locale = zhCn
</script>

项目中封装导入

注意：若使用上面的插件导入，就无需使用下面的封装了

在 src 目录下创建 global 文件夹,然后创建 index.js 和 register-element.js 文件。

register-element.js 文件 主要是封装 element-plus 的导入 需要什么组件，直接在 components 数组中添加即可

import { ElButton } from 'element-plus'

const components = [ElButton]

export default function (app) {
  for (const component of components) {
    app.component(component.name, component)
  }
}

index.js 文件 主要是对第三方组件导入管理。

import registerElement from './register-element'

export function globalRegister(app) {
  app.use(registerElement)
  //...可以继续导入其他组件
}

封装完成，然后在 main.js 中再导入,这样 main.js 中就很简洁。

import { createApp } from 'vue'

//导入全局注册的文件
import { globalRegister } from './global'

import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App)

//全局注册第三方组件
app.use(globalRegister)

app.use(store)
app.use(router)
app.mount('#app')

在页面中就可以愉快的使用了,无需再添加其他引入了

  <div>
    <el-button type="success">成功按钮</el-button>
  </div>