本篇文章给大家带来了关于vue的相关知识,其中主要介绍了关于vue3集成Element-plus使用全局引入以及局部引入方法的相关问题,下面一起来看一下,希望对大家有帮助。

【相关推荐:javascript视频教程、vue.js教程】

首先下载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-componentsunplugin-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>

效果:

扩展:

方式一,全局引用(所有的组件全部集成)

优点:集成比较简单

缺点:组件与样式全部会打包,体积大

用法:npm install element-plus --save

在main.ts中,引用js与css文件

以About.vue页面为例,直接在页面中使用相关组件就行,组件已默认全局注册,不需要在页面中重新注册

方式二:局部引用(按需引用)

优点:包会小一些

缺点:引用比较麻烦一些

用法一:以About.vue页面为例,在页面中引用js文件,局部注册组件,样式依然是全局引用,官方推荐

【相关推荐:javascript视频教程、vue.js教程】

以上就是vue引入Element-plus的全局引入与局部引入(附代码)的详细内容,更多请关注动说科技其它相关文章!

声明:本文转载于:脚本之家,如有侵犯,请联系admin@php.cn删除

  • 相关标签:Vue
  • 推荐:PHP从基础到实战教程视频

    • 上一篇:超详细!总结vue实现路由跳转的3种方式!
    • 下一篇:详解Vue渲染列表指令:v-for

    相关文章

    相关视频


    • 通俗易懂!详解VUEX状态仓库管理
    • 一文解析VUEX getters计算属性的基本使用
    • Vuex状态管理之Mutation的使用详解
    • Vuex状态管理之Action异步操作详解
    • 聊聊Vue的事件监听指令v-on
    • vue引入Element-plus的全局引入与局部...
    • javascript组成部分
    • javascript的书写位置
    • javascript的数据类型
    • javascript数据类型转换

    专题推荐

    • 独孤九贱-php全栈开发教程

      全栈 170W+

      主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门

    • 玉女心经-web前端开发教程

      入门 80W+

      主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门

    • 天龙八部-实战开发教程

      实战 120W+

      主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习

    • Laravel 9 学习正当时—保姆级教程,想学不会都难!

      实战 21317次学习

      主讲:博愿 全栈工程师,拼命探索,不计后果

    • 千万级数据并发解决方案(理论+实战)

      实战 55750次学习

      主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习

    • 共22门课程,总价3725元,开通VIP会员免费学

      实战 55750次学习

      主讲:Peter-Zhu、西门大官人、灭绝师太、欧阳克

    作者信息

    长期闲置

    长风破浪会有时,直挂云帆济沧海。

    最近文章
    实例详解vue基于element-plus的组件二次封装899
    vue引入Element-plus的全局引入与局部引入(附代码)571
    详细介绍ElementUI组件库333
    ❤️‍🔥IPIDEA 爬虫采集无IP封禁 无限并发1679
    讲师入驻(把你的才变成财)
    IPIDEA,高度匿名的真实住宅代理,爬虫采集无IP封禁,千万IP资源,无限并发,领取2G流量,住宅IP免费用
    ❤️‍🔥IPIDEA,高度匿名的真实住宅代理,爬虫采集无IP封禁,千万IP资源,无限并发,领取2G流量,住宅IP免费用
    • 最新文章
    • 热门排行

    • ❤️‍🔥共22门课程,总价3725元,开通VIP会员免费学习
    • 一文掌握vue-router的安装与使用
    • 深入探讨Vue中数据双向绑定的原理及实现
    • 实例详解Vue中v-model指令的用法
    • 详解Vue项目如何创建路由页面
    • 实例详解vue基于element-plus的组件二次封装
    • 深析Vue router-link组件实现路由导航
    • 详解Vue渲染列表指令:v-for
    • vue引入Element-plus的全局引入与局部引入(附代码)

    • 共22门课程,总价3725元,开通VIP会员免费学习!
    • vue3.0和vue2.0的区别是什么?
    • .vue 是什么
    • vue子组件怎么向父组件传值
    • vue父组件怎么调用子组件的方法
    • vue子组件怎么调用父组件的方法
    • vue-cli-service不是内部或外部命令怎么解决
    • vue中elementUI是什么
    • vue常用指令有哪些
    视频教程分类
    • php视频教程
    • html视频教程
    • css视频教程
    • JS视频教程
    • jQuery视频教程
    • mysql视频教程
    • Linux视频教程
    • Python视频教程

    Comment list 共有 0 条评论

    暂无评论

    微信小程序

    微信扫一扫体验

    立即
    投稿

    微信公众账号

    微信扫一扫加关注

    发表
    评论
    返回
    顶部