首页 > 其他分享 >element-ui全局配置和按需配置

element-ui全局配置和按需配置

时间:2022-11-21 13:00:20浏览次数:46  
标签:Vue 配置 js ui element import main

全局配置:
1.导入:
main.js全局引入element-ui:
import ElementUI from "element-ui"

2.注册:
使用Vue注册element-ui:
Vue.use(ElementUI)

3.使用:(任何组件中使用element-ui组件)
按钮

el-button样式:
type属性有:primary,info,danger,success

按需配置:
1.安装插件:
npm install babel-plugin-component -D

2.配置babel.config.js(配置):
module.exports = {
presets:[
'@vue/cli-plugin-babel/preset'
],
'plugins':[
[
'component',
{
"libraryName":"element-ui",
"styleLibraryName":"theme-chalk"
}
]
]
}

3.main.js按需引入element-ui:
import {Button} from "element-ui"

4.main.js按需注册
Vue.use(Button)

修改配置文件必须重启:
npm run dev/serve


将element-ui 从main.js中抽离出来
src/plugins/element.js

将3,4步抽离至该组件(还要把vue引进来,因为需要它注册)
1.main.js按需引入element-ui:
import {Button} from "element-ui"

2.main.js按需注册
Vue.use(Button)

3.将独立封装的组件引入到main.js中
import '@/plugins/element.js'

标签:Vue,配置,js,ui,element,import,main
From: https://www.cnblogs.com/strundent/p/16911085.html

相关文章

  • AStyle配置简介
    转自:https://www.cnblogs.com/vonly/p/13853169.html####大括号三种基本风格:##attach:大括号前一个与上一行在同一行(java)##break:大括号与前一块隔开为两行(allma......
  • Spring-boot-源码-BeanMetadataElement
    org.springframework.beans.BeanMetadataElement接口BeanMetadataElement/**Interfacetobeimplementedbybeanmetadataelementsthatcarryaconfiguration......
  • springboot配置多数据源
    最近在做一个换电站的项目需要用到多数据源,配置方法如下一:在yml文件里先把数据源信息配置好spring:application:name:base-serverdatasource:type:co......
  • 【转载】python的魔法方法———A Guide to Python's Magic Methods
    原文地址:https://rszalski.github.io/magicmethods/     =========================================================== AGuidetoPython'sMagicMetho......
  • WGCLOUD v3.4.2 配置使用监测 MongoDB 教程
    WGCLOUD是一款高效轻量的运维平台它可以监测各种数据库的运行状态,如果出现连不上的情况,也会及时告警,比如SQLServer、Oracle、MySQL、PostgreSQL、Redis等,我们就看下它怎么......
  • 适合编程初学者的开源博客系统(鸿蒙ArkUI版)
    目标为编程初学者打造入门学习项目,使用各种主流编程语言来实现。让想学编程的,一个都不落下。上述基本涵盖了当前编程开发所有主流语言(我这里说的主流,直白点讲就是互联网公司......
  • 用十种编程语言开发秒表应用-第八篇-鸿蒙ArkUI版
    用十种编程语言开发秒表应用安卓Kotlin(安卓App)安卓Kotlin+JetpackCompose(安卓App)Swift(iOS应用,采用SwiftUI)Dart(Flutter应用,跨平台,适用安卓、ios、mac、windows、web)微信......
  • 网卡配置文件
    TYPE=#设备类型,一般为Ethernet#使用ifconfig确认网卡的默认名称(ifconfig需安装net-tools)BOOTPROTO=#地址分配模式。static、DHCP、NAME=#网卡名称ONBOOT=#是否开机自......
  • 超级详细的Vue安装与配置教程
    原文: https://www.jb51.net/article/251371.htm超级详细的Vue安装与配置教程 Vue web前端三大主流框架之一,是一套用于构建用户界面的渐进式框架,下面这篇文章主要......
  • Prometheus监控之热加载更新配置
    在Prometheus的日常维护中,一定会对配置文件prometheus.yml进行再编辑操作,通常对Prometheus服务进行重启操作即可完成对配置文件的加载。当然也可以通过动态的热加载来......