ElementPlus 全局引入与按需引入

  • 前言
  • 一、完整引入
  • 1、安装组件库
  • 2、在项目中引入
  • 3、设置组件语言
  • 二、按需引入
  • 1、安装组件库
  • 2、Webpack 配置
  • 3、在项目中引入
  • （1）全局引入
  • （2）局部引入
  • 4、按需引入时设置组件语言
  • 总结


前言

  • 之前使用 ElementPlus 做项目的时候，由于不会使用按需引入，一个仅需要几个 ElementPlus 组件的 Vue 项目，全局引入 ElementPlus 组件库，导致项目体积非常大
  • 接下来将介绍在 Vue 中如何引入 ElementPlus

一、完整引入

1、安装组件库

  • 安装 ElementPlus
npm install element-plus --save

2、在项目中引入

  • 在 mian.js 文件中配置如下：
  • 如果使用到 icon 图标，需要安装之后再引入
// 安装 Icon 图标
npm install @element-plus/icons-vue --save
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// Element Plus
import 'element-plus/theme-chalk/index.css'  // 引入 ElementPlus 组件样式
// 图标和组件需要分开引入
import ElementPlus from 'element-plus';   // 引入 ElementPlus 组件
import { Edit } from '@element-plus/icons-vue'  // 按需引入 Icon 图标 

const app = createApp(App)

// 全局注册 Icon 图标
app.component('Edit', Edit)

app.use(ElementPlus)  // 全局挂载 ElementPlus
app.use(router).mount('#app')
  • 使用示例
<template>
  <div class="home">
    <el-button type="primary">按钮</el-button>
    <!-- icon 图标 -->
    <edit style="width: 36px; height: 36px" />
  </div>
</template>

<script>
export default {
  name: "Home"
};
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: #eee;
}
</style>

element plus中文语言 element—plus_vue.js

3、设置组件语言

  • ElementPlus 组件默认使用英文，如果希望使用其他语言，例如中文，你可以参考下面的方案
  • 首先，引入组件要使用的语言
  • 然后，在全局挂载 ElementPlus 的位置配置 locale 属性
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// Element Plus
import 'element-plus/theme-chalk/index.css'  // 引入 ElementPlus 组件样式
// 图标和组件需要分开引入
import ElementPlus from 'element-plus';   // 引入 ElementPlus 组件
import { Edit } from '@element-plus/icons-vue'  // 按需引入 Icon 图标 

// 引入组件要使用的语言（示例是中文）
import zhCn from 'element-plus/es/locale/lang/zh-cn'

const app = createApp(App)

// 全局注册 Icon 图标
app.component('Edit', Edit)

app.use(ElementPlus, { locale: zhCn })  // 全局挂载 ElementPlus
app.use(router).mount('#app')

二、按需引入

1、安装组件库

  • 安装 ElementPlus
npm install element-plus --save
  • 安装导入组件的插件
npm install -D unplugin-vue-components unplugin-auto-import

2、Webpack 配置

  • 在 webpack.config.js 文件中添加如下代码
  • 一般新创建的项目没有自动生成 webpack.config.js 文件，需要在项目根目录下手动创建（和 src 目录平级）
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

3、在项目中引入

（1）全局引入

  • 在 mian.js 文件中配置如下：
  • 如果使用到 icon 图标，需要安装之后再引入
// 安装 Icon 图标
npm install @element-plus/icons-vue --save
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// Element Plus
import 'element-plus/theme-chalk/index.css'  // 引入组件样式
// 图标和组件需要分开引入
import { ElButton } from 'element-plus';   // 按需引入组件
import { Edit } from '@element-plus/icons-vue'  // 按需引入 Icon 图标 

const app = createApp(App)

// 全局注册组件
app.component('ElButton', ElButton)
// 全局注册 Icon 图标
app.component('Edit', Edit)

app.use(router).mount('#app')
  • 使用示例
<template>
  <div class="home">
    <el-button type="primary">按钮</el-button>
    <div>
      <edit style="width: 26px; height: 26px" />
    </div>
  </div>
</template>

<script>
export default {
  name: "Home"
};
</script>
<style lang="less" scoped>
.home {
  width: 500px;
  height: 200px;
  line-height: 100px;
  text-align: center;
  background-color: #ddd;
}
</style>

element plus中文语言 element—plus_javascript_02

（2）局部引入

  • 在 mian.js 文件中配置如下：
  • 如果使用到 icon 图标，需要安装之后再引入
// 安装 Icon 图标
npm install @element-plus/icons-vue --save
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router).mount('#app')
  • 使用示例
<template>
  <div class="home">
    <el-button type="primary">按钮</el-button>
    <div>
      <edit style="width: 26px; height: 26px" />
    </div>
  </div>
</template>

<script>
// Element Plus
import "element-plus/theme-chalk/index.css"; // 引入组件样式
// 图标和组件需要分开引入
import { ElButton } from "element-plus"; // 按需引入组件
import { Edit } from "@element-plus/icons-vue"; // 按需引入 Icon 图标

export default {
  name: "Home",
  components: {
    ElButton,
    Edit,
  },
};
</script>
<style lang="less" scoped>
.home {
  width: 500px;
  height: 200px;
  line-height: 100px;
  text-align: center;
  background-color: #ddd;
}
</style>

element plus中文语言 element—plus_javascript_02

4、按需引入时设置组件语言

  • ElementPlus 组件默认使用英文，如果希望使用其他语言，例如中文，你可以参考下面的方案
  • 首先，在 main.js 文件中按需引入 ElConfigProvider 组件，并注册
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// Element Plus
import 'element-plus/theme-chalk/index.css'  // 引入组件样式
// 图标和组件需要分开引入
import { ElConfigProvider, ElButton } from 'element-plus';   // 按需引入组件
import { Edit } from '@element-plus/icons-vue'  // 按需引入 Icon 图标 

const app = createApp(App)

// 全局注册组件
// 语言国际化设置
app.component('ElConfigProvider', ElConfigProvider)
app.component('ElButton', ElButton)
// 全局注册 Icon 图标
app.component('Edit', Edit)

app.use(router).mount('#app')
  • 然后，在 App.vue 文件中引入需要的语言，并配置到 ElConfigProvider 组件的 locale 属性上
<template>
  <div class="app">
    <el-config-provider :locale="locale">
      <router-view />
    </el-config-provider>
  </div>
</template>
<script>
// 使用中文
import zhCn from "element-plus/es/locale/lang/zh-cn";
export default {
  data() {
    return {
      locale: zhCn,
    };
  },
};
</script>
<style lang="less">
html,
body,
.app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>
  • 使用前
  • 使用后

总结