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/dist/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>

3、设置组件语言

ElementPlus 组件默认使用英文，如果希望使用其他语言，例如中文，你可以参考下面的方案
首先，引入组件要使用的语言
然后，在全局挂载 ElementPlus 的位置配置 locale 属性

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'// Element Plus
import 'element-plus/dist/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/dist/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>

（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/dist/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>

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/dist/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>

使用前
使用后

总结

ElementPlus 完整引入与按需引入相关推荐

vue.js项目中，关于element-ui完整引入、按需引入的介绍
element-ui引入方式,简单说来有两种:完整引入.按需引入首先谈一下npm安装element-ui的方法: cmd到项目目录,然后执行cmd命令:npm i element-ui -S稍等片刻 ...
vue3+element-plus 配套使用日期时间选择器默认英文修改为中文完整引入和按需引入
默认情况行如下: 一.按需引入的解决方案: 在你使用日期选择器的vue文件夹 1.引入: import zhCn from "element-plus/lib/locale/lang/zh ...
Vue项目mint-ui引入方式（完整引入、按需引入）
一.使用 vue-cli 二.引入 Mint UI 1.完整引入 2.按需引入三.开始使用一.使用 vue-cli npm install -g vue-cli vue init webpack ...
vue项目中引入mint-ui的方式（全部引入与按需引入）
一.全部引入 1.安装mint-ui npm intall mint-ui --save 2.main.js中引入mint-ui import MintUI from 'mint-ui' impor ...
vue3.0+ts+element-plus多页签应用模板：element-plus按需引入与动态换肤
目录系列链接一.安装element-plus 二.按需引入 1. 为什么要按需引入? 2. 如何按需引入? 3. 验证是否引入成功三.动态换肤 1. 制作自定义主题 2. 引入自定义主题 3. ...
Vue使用Element-ui按需引入大坑
vue使用element-ui按需导入大坑前言一.element-ui按需导入二.卸载element-ui 重装三.正确卸载步骤总结前言 element-ui按需导入小编使用了vue ad ...
echarts中x轴文件消失_百度Echarts图表在Vue项目的完整引入以及按需加载
导语近日在项目中需要进行图表展示,百度的Echarts图表是非常合适的一个选择.项目是vue-cli搭建的,如何在项目中引入Echarts就是一个问题了.亲自动手实践了下,整理总结,希望对小伙伴提供 ...
@vue3 element-plus 按需引入，默认英文组件修改为中文
升级到@vue-cli3之后element-ui 也做了相应的升级,这里的版本是:"element-plus": "^1.0.2-beta.44",可能后面的版 ...
element ui需要引入样式吗_彻底学会element-ui按需引入和纯净主题定制
原标题:彻底学会element-ui按需引入和纯净主题定制作者:wuwhs 来源:SegmentFault 思否社区前言手上有些项目用的element-ui,刚好有空琢磨一下怎么减小打包文件大小 ...

ElementPlus 完整引入与按需引入

ElementPlus 全局引入与按需引入

前言

一、完整引入

1、安装组件库

2、在项目中引入

3、设置组件语言

二、按需引入

1、安装组件库

2、Webpack 配置

3、在项目中引入

（1）全局引入

（2）局部引入

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

总结

ElementPlus 完整引入与按需引入相关推荐

最新文章

热门文章