资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/vue3集成Element-plus实现按需自动引入组件的方法汇总

vue3集成Element-plus实现按需自动引入组件的方法汇总

3403771864 / 1585人阅读

　　本篇文章就是介绍关于vue3集成Element-plus实现按需自动引入组件的相关资料,为了让大家详细了解，附有详细内容。

　　element-plus正是element-ui针对于vue3开发的一个UI组件库，

　　它的使用方式和很多其他的组件库是一样的，其他类似于ant-design-vue、NaiveUI、VantUI都是差不多的；安装element-plus

　　首先下载element-plus

</>复制代码 
  1. 　　npm install element-plus

　　1、第一种方式，使用全局引入

　　引入element-plus的方式是全局引入，代表的含义是所有的组件和插件都会被自动注册，

　　优点：上手快

　　缺点：会增大包的体积

　　在main.ts文件中

</>复制代码 
  1. 　　import { createApp } from 'vue'
  2. 　　// 全局引入
  3. 　　import ElementPlus from 'element-plus'
  4. 　　import 'element-plus/dist/index.css'
  5. 　　import App from './App.vue'
  6. 　　import router from './router'
  7. 　　import store from './store'
  8. 　　const app = createApp(App)
  9. 　　app.use(router)
  10. 　　app.use(store)
  11. 　　app.use(ElementPlus)
  12. 　　app.mount('#app')

　　2、第二种方式，使用局部引入

　　局部引入也就是在开发中用到某个组件对某个组件进行引入，

</>复制代码 
  1. 　　<template>
  2. 　　<div>
  3. 　　<el-button>Default</el-button>
  4. 　　<el-button type="primary">Primary</el-button>
  5. 　　<el-button type="success">Success</el-button>
  6. 　　<el-button type="info">Info</el-button>
  7. 　　<el-button type="warning">Warning</el-button>
  8. 　　<el-button type="danger">Danger</el-button>
  9. 　　<el-button>中文</el-button>
  10. 　　</div>
  11. 　　</template>
  12. 　　<script>
  13. 　　import { defineComponent } from 'vue'
  14. 　　// 局部引入
  15. 　　import { ElButton } from 'element-plus'
  16. 　　import 'element-plus/theme-chalk/el-button.css'
  17. 　　import 'element-plus/theme-chalk/base.css'
  18. 　　export default defineComponent({
  19. 　　components: { ElButton },
  20. 　　setup() {
  21. 　　return {}
  22. 　　}
  23. 　　})
  24. 　　</script>
  25. 　　<style></style>

　　要注意的是在开发时每次使用都要手动在组件中引入对应的css样式，这样使用时就会很麻烦

　　3、按需自动引入element-plus推荐

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

</>复制代码 
  1. 　　npm install -D unplugin-vue-components unplugin-auto-import

　　安装完成之后在vue.config.js文件中配置

</>复制代码 
  1. 　　// vue.config.js
  2. 　　const AutoImport = require('unplugin-auto-import/webpack')
  3. 　　const Components = require('unplugin-vue-components/webpack')
  4. 　　const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
  5. 　　module.exports = {
  6. 　　outputDir: './build',
  7. 　　// 和webpapck属性完全一致，最后会进行合并
  8. 　　configureWebpack: {
  9. 　　resolve: {
  10. 　　alias: {
  11. 　　components: '@/components'
  12. 　　}
  13. 　　},
  14. 　　//配置webpack自动按需引入element-plus，
  15. 　　plugins: [
  16. 　　AutoImport({
  17. 　　resolvers: [ElementPlusResolver()]
  18. 　　}),
  19. 　　Components({
  20. 　　resolvers: [ElementPlusResolver()]
  21. 　　})
  22. 　　]
  23. 　　}
  24. 　　}

　　 按需自动引入配置完之后，在组件中可直接使用，不需要引用和注册 这里已经实现了按需自动移入Element-plus组件 组件中直接使用：

</>复制代码 
  1. 　　<template>
  2. 　　<div>
  3. 　　<el-button>Default</el-button>
  4. 　　<el-button type="primary">Primary</el-button>
  5. 　　<el-button type="success">Success</el-button>
  6. 　　<el-button type="info">Info</el-button>
  7. 　　<el-button type="warning">Warning</el-button>
  8. 　　<el-button type="danger">Danger</el-button>
  9. 　　<el-button>中文</el-button>
  10. 　　</div>
  11. 　　</template>
  12. 　　<script>
  13. 　　import { defineComponent } from 'vue'
  14. 　　export default defineComponent({
  15. 　　setup() {
  16. 　　return {}
  17. 　　}
  18. 　　})
  19. 　　</script>
  20. 　　<style></style>

　　效果：

1.png

　　欢迎大家观看更多精彩内容。


GPU云服务器 云服务器 16种常用的数据分析方法汇总 python引入方法 自动更新组件 自动加载类实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/128378.html

相关文章

  • Vue3+Element-plus项目自动导入报错的解决方案

    　　在项目中遇见很多问题，报错是其中常见问题之一，例如在创建 Vue3 + Element-plus 项目中安装插件，在按照要求配置后运行项目，npm 报错，究竟是怎么回事那？ 我们在 采用自动导入，Element-plus 文档后，安装 unplugin-vue-components 和 unplugin-auto-import 两款插件，之后就运行项目，结果出现npm 报错　　ERROR ...

    3403771864 评论0 收藏0

  • Vue3实现刷新页面局部内容的示例代码

    　　可以用实现局部组件（dom）的重新渲染可以实现页面的局部刷新。有一个最简单办法，我们可以用Vue中的v-if指令来实现。　　我们的思路是：除了上述用Vue中的v-if指令来实现，我们也可以用另一个方法就是新建一个空白组件，需要刷新局部页面时跳转至这个空白组件页面，然后在空白组件内的beforeRouteEnter守卫中又跳转回原来的页面。　　如下图所示，在Vue3.X中不仅可以实现点击刷新，按...

    3403771864 评论0 收藏0

  • 用Vue3管理后台项目实现高德地图的选点

    　　现在客户来了一个项目简况：有一个业务场景是添加门店的地址和经纬度，地址可以输入，参考用经纬度当然不行，目前有最好方式就是让用户在地图上搜索或者直接点击获取点的经纬度等详细信息。现在我们就看具体的内容。　　登录高德开放平台　　创建应用，添加Key，选择Web端(JS API)，生成Key和安全密钥　　引入地图 JSAPI　　项目中使用了官方推荐的 JSAPILoader 来加载地图　　安装官方 ...

    3403771864 评论0 收藏0

  • 关于Vue2一些值得推荐的文章 -- 五、六月份

    摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...

    sutaking 评论0 收藏0

发表评论

登陆后可评论

0条评论

3403771864

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<