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

目录
  • 1、第一种方式,使用全局引入
  • 2、第二种方式,使用局部引入
  • 3、按需自动引入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 class="app">
    <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 lang="ts">
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 lang="less"></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 class="app">
    <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 lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    return {}
  }
})
</script>

<style lang="less"></style>

效果:

总结

到此这篇关于vue3集成Element-plus实现按需自动引入组件的文章就介绍到这了,更多相关vue3按需自动引入组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue3引入Element-plus的详细步骤记录

    目录 vue3引入Element-plus的详细步骤 附:vue3 element plus按需引入最优雅的用法 总结 vue3引入Element-plus的详细步骤 前提是安装好了npm 以及创建好了vue脚手架 1.打开控制台到到你所在的根目录: 2.输入引入指令: npm install element-plus --save 3.等待安装好后,在脚手文件中打package.json查看是否安装好 看到有 "element-plus": "^2.1.5"就是安

  • Vue-cli4 配置 element-ui 按需引入操作

    在按照element-ui文档和网上各个文章的描述方式都未能正确配置出按需加载的功能.经小编一番摸索之后,终于搞定了,本篇文章记录实现的全过程 #1 node与vue的版本情况 #2 未按需加载打包后的文件情况 由上图看出,只是引入了 element-ui 框架后,js文件急剧的上升到了 783KB,这显然是不能接受的. element-ui 按需加载文档:https://element.eleme.cn/#/zh-CN/component/quickstart #3 添加 babel-plug

  • vite+vue3+element-plus项目搭建的方法步骤

    使用vite搭建vue3项目 通过在终端中运行以下命令,可以使用 Vite 快速构建 Vue 项目. $ npm init vite-app <project-name> $ cd <project-name> $ npm install $ npm run dev 引入Element Plus 安装Element Plus: npm install element-plus --save main.js中完整引入 Element Plus: import { createApp

  • vue项目中如何实现element-ui组件按需引入

    目录 element-ui组件按需引入 按需引入 完整引入 vue项目搭建 + 引入element-ui 初始化单页系统 ElementUI整合项目 element-ui组件按需引入 按需引入 1.借助 babel-plugin-component ,引入我们需要的组件,减少项目体积 npm install babel-plugin-component -D 2.修改 babel.config.js 的内容 //babel.config.js 全文内容如下 module.exports = {

  • vue使用element-ui按需引入时踩过的那些坑

    众所周知,使用element-ui,为了达到减小项目体积的目的 ,我们在实际项目中更多的是采用按需引入的方法, 下面就来讲讲那些我踩过的坑. 步骤: 第一步:安装 element-ui 时把 element 也安装一下, 执行命令 npm i element-ui -S 和 npm i element -S 第二步:安装 babel-plugin-component , 执行命令 npm install babel-plugin-component -D 第三步 :踩坑一: element-ui

  • 详解Vue3怎么使用element-plus

    目录 1.安装 2.在main.js引入 3.使用 vue3出来一段时间了,element也更新了版本去兼容vue3,在这里简单的介绍一下如何使用element-plus吧 1.安装 npm install element-plus --save 2.在main.js引入 import { createApp, Vue } from 'vue'; import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css

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

    目录 1.第一种方式,使用全局引入 2.第二种方式,使用局部引入 3.按需自动引入element-plus  推荐 总结 element-plus正是element-ui针对于vue3开发的一个UI组件库, 它的使用方式和很多其他的组件库是一样的,其他类似于ant-design-vue.NaiveUI.VantUI都是差不多的:安装element-plus 首先下载element-plus npm install element-plus 1.第一种方式,使用全局引入 引入element-plu

  • Vue3的setup在el-tab中动态加载组件的方法

    公司某项目需求在页面显示的组件是根据角色变化而变化的,在这个项目中我使用了elementplus的el-tabs来动态的显示这些组件,如下图所示 <template> <component style="margin-top:15px" v-for="item in pageList" :is="item.module_id"/> </template> 数据内容大概是这样的 在未使用setup语法糖时候我要引

  • jQuery之自动完成组件的深入解析

    简单实例 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=&

  • Vue3+Vite项目按需自动导入配置以及一些常见问题修复

    目录 一.Vue API自动导入 1.1 配置unplugin-auto-import 1.2 可能遇到ts,eslint不识别而导入报错的问题 1.3 配置src/component目录下的组件自动引入 二.按需引入UI组件库(antd,element-plus) 2.1.按需引入element-plus 2.2 ant-design-vue 按需引入 2.3 自动导入 Element Plus Icon 三.关于配置文件 总结 一.Vue API自动导入 解决的问题:避免在每个vue组件中都

  • 浅谈element中InfiniteScroll按需引入的一点注意事项

    大家为了节省空间,常常进行按需引入来节省空间,这里我给大家来介绍一下element中按需引入无限滚动指令注意的事项. 针对前面element 按需引入的一些配置这里就不再详细介绍了. 那么这里讲的是在main.js写入以下代码. import { InfiniteScroll } from 'element-ui'; Vue.use(InfiniteScroll) 好,这样引入.注册了,那么我们接下来做得事情就是在页面使用它. <template> <ul class="inf

  • Vue3 封装 Element Plus Menu 无限级菜单组件功能的详细代码

    目录 1 数据结构定义 1.1 菜单项数据结构 1.2 菜单配置数据结构 2 使用 tsx 实现封装 2.1 tsx 基本结构 2.2 定义 prop 2.3 递归实现组件 3 使用 SFC 实现菜单封装 3.1 封装菜单项的渲染 3.2 封装菜单组件 4 测试组件 4.1 菜单测试数据 4.2 测试页面 4.3 运行效果 总结: 本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plus el-menu 组件进行二次封装,实现配置化的菜单,有了配置化的菜单,后续便可以根据路由

  • AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法

    本文实例讲述了AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法.分享给大家供大家参考,具体如下: 接着前面那篇<AngularJS使用ng-app自动加载bootstrap框架问题分析>,现在我们看下如何使用带属性值的ng-app命令,让ng-app自动加载我们自定义的模块作为根模块. <!DOCTYPE html> <html> <head> <script src="angular.js">&l

  • golang之tcp自动重连实现方法

    操作系统: CentOS 6.9_x64 go语言版本: 1.8.3 问题描述 现有一个tcp客户端程序,需定期从服务器取数据,但由于种种原因(网络不稳定等)需要自动重连. 测试服务器示例代码: /* tcp server for test */ package main import ( "fmt" "net" "os" "strings" "time" ) func checkError(err err

  • 通过npm或yarn自动生成vue组件的方法示例

    不知道大家每次新建组件的时候,是不是都要创建一个目录,然后新增一个.vue文件,然后写template.script.style这些东西,如果是公共组件,是不是还要新建一个index.js用来导出vue组件.虽然有vscode有代码片段能实现自动补全,但还是很麻烦,今天灵活运用scripts工作流,自动生成vue文件和目录. 实践步骤 安装一下chalk,这个插件能让我们的控制台输出语句有各种颜色区分 npm install chalk --save-dev yarn add chalk --s

  • 如何给element添加一个抽屉组件的方法步骤

    近来因为业务需要,对比iview和element库,发现element确实要比实习期间使用的iview强大点,尤其文档更为友好,但是iview的组件功能更多一点,比如分割线和抽屉组件 今天特意手写一个抽屉组件,方便自己使用element库,写好的组件我已经放在我的githup了, 点这里 一.实践 1.分析 一个抽屉组件的z-index必定是在当前页面之上的,在抽屉主体之外的区域还会有一层半透明的遮罩层,知道这些就很容易了 // drawer.vue <template> <div cl

随机推荐