资讯专栏INFORMATION COLUMN

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

3403771864 / 50人阅读

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

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

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

  首先下载element-plus

  npm install element-plus

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

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

  优点:上手快

  缺点:会增大包的体积

  在main.ts文件中

  import { createApp } from 'vue'
  // 全局引入
  import ElementPlus from 'element-plus'
  import 'element-plus/dist/index.css'
  import App from './App.vue'
  import router from './router'
  import store from './store'
  const app = createApp(App)
  app.use(router)
  app.use(store)
  app.use(ElementPlus)
  app.mount('#app')

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

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

  <template>
  <div>
  <el-button>Default</el-button>
  <el-button type="primary">Primary</el-button>
  <el-button type="success">Success</el-button>
  <el-button type="info">Info</el-button>
  <el-button type="warning">Warning</el-button>
  <el-button type="danger">Danger</el-button>
  <el-button>中文</el-button>
  </div>
  </template>
  <script>
  import { defineComponent } from 'vue'
  // 局部引入
  import { ElButton } from 'element-plus'
  import 'element-plus/theme-chalk/el-button.css'
  import 'element-plus/theme-chalk/base.css'
  export default defineComponent({
  components: { ElButton },
  setup() {
  return {}
  }
  })
  </script>
  <style></style>

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

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

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

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

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

  // 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 = {
  outputDir: './build',
  // 和webpapck属性完全一致,最后会进行合并
  configureWebpack: {
  resolve: {
  alias: {
  components: '@/components'
  }
  },
  //配置webpack自动按需引入element-plus,
  plugins: [
  AutoImport({
  resolvers: [ElementPlusResolver()]
  }),
  Components({
  resolvers: [ElementPlusResolver()]
  })
  ]
  }
  }

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

  <template>
  <div>
  <el-button>Default</el-button>
  <el-button type="primary">Primary</el-button>
  <el-button type="success">Success</el-button>
  <el-button type="info">Info</el-button>
  <el-button type="warning">Warning</el-button>
  <el-button type="danger">Danger</el-button>
  <el-button>中文</el-button>
  </div>
  </template>
  <script>
  import { defineComponent } from 'vue'
  export default defineComponent({
  setup() {
  return {}
  }
  })
  </script>
  <style></style>

  效果:

1.png

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


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

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

相关文章

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

    ...很多问题,报错是其中常见问题之一,例如在创建 Vue3 + Element-plus 项目中安装插件,在按照要求配置后运行项目,npm 报错,究竟是怎么回事那?</p><p>&nbsp; &nbsp; &nbsp; 我们在 采用自动导入,Element-plus 文档后,...

    3403771864 评论0 收藏0
  • Vue3实现刷新页面局部内容示例代码

    ...seBold,&nbsp;ArrowDownBold&nbsp;}&nbsp;from&nbsp;&#39;@element-plus/icons-vue&#39;   import&nbsp;type&nbsp;{&nbsp;MenuItem&nbsp;}&nbsp;from&nbsp;&#39;@/interface/menu&#39;   import&nbsp;{&nbsp;useMenuRouterStore&nbsp;}&n...

    3403771864 评论0 收藏0
  • Vue3管理后台项目实现高德地图选点

    ...索选点和直接点击。</p><p>  搜索选点:使用 element-plus autocomplete 组件结合地图搜索服务实现下拉选择地点</p><p>  点击选点:借助地图点击事件获取地点经纬度信息,然后使用地图逆地理编码api解析出...

    3403771864 评论0 收藏0
  • 关于Vue2一些值得推荐文章 -- 五、六月份

    ... Vue 3 Vue CLI 3 项目构建基础 你了解vue3.0响应式数据怎么实现吗? 模拟 vue3.0 rfcs createComponent api 中props类型推导 Vue-cli 3.5.1 + Webstorm 使用手机访问演示页面 用vue3公开思路从0实现最简化vue 在 WebStorm 中,配置能够识别 Vue CLI 3...

    Terry_Tai 评论0 收藏0
  • 关于Vue2一些值得推荐文章 -- 五、六月份

    ... Vue 3 Vue CLI 3 项目构建基础 你了解vue3.0响应式数据怎么实现吗? 模拟 vue3.0 rfcs createComponent api 中props类型推导 Vue-cli 3.5.1 + Webstorm 使用手机访问演示页面 用vue3公开思路从0实现最简化vue 在 WebStorm 中,配置能够识别 Vue CLI 3...

    sutaking 评论0 收藏0

发表评论

0条评论

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