vue2使用ElementUI

elementui官网:组件 | Element

1、全部引入

下载:npm i element-ui

在 main.js 中写入以下内容:import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App)
});

然后直接在官网选取合适控件引入使用即可 

 

2、按需引入

借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。

下载:npm i element-uinpm install babel-plugin-component -D
然后,将 babel.config.js 修改为:{"presets": ['@vue/cli-plugin-babel/preset', ["@babel/preset-env", { "modules": false }]],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]
}
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为* Vue.use(Button)* Vue.use(Select)*/new Vue({el: '#app',render: h => h(App)
});

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/239662.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【JavaSE学习专栏】第04篇 Java面向对象

文章目录 1 面向过程&面向对象2 类和对象2.1 对象的特征2.2 java类及类的成员2.3 类的语法格式 3 创建与初始化对象3.1 类的成员之一:属性3.2 类的成员之二:方法3.3 类的成员之三:构造器(构造方法)3.3.1 无参构造方…

手机上的记事本怎么打开?安卓手机通用的记事本APP

有不少上班族发现,自己想要在电脑上随手记录一些工作文字内容,直接使用电脑上的记事本工具来编辑文字是比较便捷的。但是如果想要在手机上记录文字内容,就找不到手机上的记事本了。那么手机上的记事本怎么打开?安卓手机通用的记事…

uni-app 微信小程序之自定义中间圆形tabbar

文章目录 1. 自定义tabbar效果2. pages新建tabbar页面3. tabbar 页面结构4. tabbar 页面完整代码 1. 自定义tabbar效果 2. pages新建tabbar页面 首先在 pages.json 文件中,新建一个 tabbar 页面 "pages": [ //pages数组中第一项表示应用启动页&#xff…

好用的桌面管理软件推荐

随着电脑的普及,桌面管理软件已经成为我们日常生活和工作中不可或缺的一部分。一个好的桌面管理软件可以帮助我们更高效地组织和管理电脑上的文件和应用程序,提高我们的工作效率。下面,我将为大家推荐几款好用的桌面管理软件。 1、腾讯桌面整…

Echarts大屏可视化_05 折线图的定制开发

继续跟着pink老师学习Echarts相关内容!!!!!!!!! 折线图1 1.引入 折线图选取示例地址 标题没有用到就给他删了 直接引入 注意这里是line下面的chart 获取dom元素一定不…

Java 设计模式系列:代理模式

文章目录 介绍静态代理基本介绍应用实例静态代理优缺点 动态代理基本介绍JDK 中生成代理对象的 API Cglib 代理基本介绍实现步骤 介绍 1)代理模式:为一个对象提供一个替身,以控制对这个对象的访问。即通过代理对象访问目标对象 2&#xff09…

论文精读 Co-DETR(Co-DINO、Co-Deformable-DETR)

DETRs with Collaborative Hybrid Assignments Training 基于协作混合分配训练的DETRs 论文链接:2211.12860.pdf (arxiv.org) 源码链接:https://github.com/Sense-X/Co-DETR 总结: Co-DETR基于DAB-DETR、Deformable-DETR和DINO网络进行了实…

Spring Task

1 介绍 Spring Task 是Spring框架提供的任务调度工具,可以按照约定的时间自动执行某个代码逻辑。 定位:定时任务框架 作用:定时自动执行某段Java代码 为什么要在Java程序中使用Spring Task? 应用场景: 1). 信用卡…

Jmeter组件执行顺序与作用域

一、Jmeter重要组件 1)配置元件---Config Element: 用于初始化默认值和变量,以便后续采样器使用。配置元件大其作用域的初始阶段处理,配置元件仅对其所在的测试树分支有效,如,在同一个作用域的任何采样器…

分布式系统中最基础的 CAP 理论及其应用

对于开发或设计分布式系统的架构师、工程师来说,CAP 是必须要掌握的基础理论,CAP 理论可以帮助架构师对系统设计中目标进行取舍,合理地规划系统拆分的维度。下面我们先讲讲分布式系统的特点。 分布式系统的特点 随着移动互联网的快速发展&a…

广州华锐互动:数字孪生系统让生产工艺流程可视化,提高生产效率和质量

随着科技的飞速发展,数字化技术已经深入到各个行业,制造业也不例外。生产制造数字孪生系统作为一种新型的生产管理工具,正逐渐成为制造业的发展新趋势。 生产制造数字孪生系统是一种基于三维数字化技术的生产过程模拟与优化系统。通过对实际生…

【代码】基于麻雀搜索优化Kmeans图像分割算法

程序名称:基于麻雀搜索优化Kmeans图像分割算法 实现平台:matlab 代码简介:首先使用麻雀搜索优化算法来确定 K-means 算法的初始质心位置,然后进行传统的 K-means 聚类。这样做的目的是为了避免 K-means 算法陷入局部最优解&…