上手vue2的学习笔记5之在vue2项目中调用elment-ui

前言

上手vue2的学习笔记4之搭建vue环境

参考链接:vue2.0项目引入element-ui

一、安装elment-ui

进入搭建的vue项目中

cd vue_bing_test 

安装 element

npm i element-ui

在这里插入图片描述

二、引入elment-ui

elment官方教程

在这里插入图片描述
将main.js改成如下内容:

import Vue from 'vue'
import App from './App'
import router from './router'// 引入elemetn-ui组件库
import ElementUI from 'element-ui';
// 引入element-ui全部css
import 'element-ui/lib/theme-default/index.css'
// 使用element
Vue.use(ElementUI)Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})

但是出现了报错
在这里插入图片描述
解决办法:

import 'element-ui/lib/theme-default/index.css'

改成

import 'element-ui/lib/theme-chalk/index.css'

成功解决!
在这里插入图片描述

三、在 src/App.vue 下使用 element

添加

<el-button type="success">Success</el-button>

完整版如下

<template><div id="app"><img src="./assets/logo.png"><router-view/><el-button type="success">Success</el-button></div>
</template><script>
export default {name: 'App'
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

四、运行项目,查看效果

npm run dev

界面由这样
在这里插入图片描述
变成这样
在这里插入图片描述
成功调用elment-ui添加了一个按钮控件!

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

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

相关文章

我们正在开发一套组件库,欢迎你的加入~

项目地址 github地址 可以先点进来康康~ 技术栈 目前我们整体采用的是vue3typescriptless作为整体的开发的选择 需要说的是&#xff0c;我们并没有采用很多组件库采用的TSX的写法&#xff0c;而是选择了SFC的写法&#xff0c;这是因为我们觉得对于大部分的vue开发者来说&am…

MySQL八股学习记录4事务的实现from小林coding

MySQL八股学习记录4事务的实现from小林coding 事务的概念与特性并行事务引发的问题脏读不可重复读幻读 MySQL的应对策略InnoDB引擎可重复读详解ReadView在MVCC中的工作方式两种隔离级别通过MVCC实现幻读被完全解决了吗 事务的概念与特性 概念:一个操作要么执行成功,要么回滚到…

ORACLE实时SQL监控视图

引言 实时的SQL监控&#xff08;Real Time SQL Monitoring&#xff09;是Oracle 11g的一个新特性&#xff0c;它是一项强大的工具&#xff0c;用于监视和分析正在执行的SQL语句的性能和执行计划。该功能允许我们实时地跟踪SQL查询的执行过程&#xff0c;以及了解其资源消耗、等…

Java的五种数据类型解析

Java的五种数据类型解析 不知道大家对java的简单数据类型是否了解&#xff0c;下面针对Java的五种类型简单数据类型表示数字和字符&#xff0c;进行详细的讲解和分析。 一、简单数据类型初始化 在Java语言中&#xff0c;简单数据类型作为类的成员变量声明时自动初始化为默认值…

Ext JS中定义和使用类Ext JS风格的html 按钮

Ext JS 的按钮样式如下: 按钮的背景色默认为应用的主色调或是灰色系, 也可以通过样式设置按钮的背景色, 详细可以参考: Ext JS 如何设置工具栏按钮和一般按钮保持统一样式 但是, 在实际开发的场景中有可能某些按钮是不能通过Ext JS的Button 类进行创建的, 但是页面效果…

leetcode第354场周赛补题

6889. 特殊元素平方和 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a;模拟 class Solution { public:int sumOfSquares(vector<int>& nums) {int res 0;for(int i 0; i < nums.size(); i ){if(nums.size() % (i 1) 0) res nums[i] * nums[i];}r…

SQL Server 存储过程

Transact-SQL中的存储过程&#xff0c;非常类似于Java语言中的方法&#xff0c;它可以重复调用。当存储过程执行一次后&#xff0c;可以将语句缓存中&#xff0c;这样下次执行的时候直接使用缓存中的语句。这样就可以提高存储过程的性能。 存储过程的概念 存储过程Procedure是…

如何快速入门「组织结构图」?

组织结构图&#xff0c;对于公司老板和HR可谓是家常便饭&#xff0c;公司发展好&#xff0c;组织结构要升级和调整&#xff0c;人员“正常”流动&#xff0c;都需要用到它。组织结构图可以让人快速的了解公司的行政结构和权利体系&#xff0c;也是让新员工或客户快速了解公司相…

JAVA+Selenium最简单的处理登录弹窗的方式

在做自动化测试遇到需要处理登录弹窗情况&#xff0c;例如我的用户名为admin, 密码为admin, 那么想要登录http://10.10.168.1, 只需要使用以下链接访问即可立即登录, 并免除弹窗: http://账号:密码网址

python-函数用法-F.conv_transpose2d

F.conv_transpose2d torch.nn.functional.conv_transpose2d(input, weight, biasNone, stride1, padding0, output_padding0, groups1, dilation1) → Tensor对由多个输入平面组成的输入图像应用二维转置卷积算子, 有时也称为反卷积. >>> # With square kernels and…

C#设计模式之---外观模式

外观模式&#xff08;Facade Pattern&#xff09; 外观模式&#xff08;Facade Pattern&#xff09;提供了一个简单且公用的接口去处理复杂的子系统&#xff0c;并且没有减少子系统的功能。降低子系统的复杂性&#xff0c;避免了客户与子系统直接链接&#xff0c;它也减少了子…

composer的劈坑

现在是php8盛行的天下&#xff0c;安装php8我就不多说了&#xff0c;宝塔、小出面板一大堆&#xff0c;一键安装。真心说方便。&#xff08;好吧&#xff0c;不打广告了&#xff09;&#xff0c;以下是针对 linux 系统 1、安装composer 安装composer之前&#xff0c;需要要先在…

Android 13 设置自动进入wifi adb模式

Android 13 设置自动进入wifi adb模式 文章目录 Android 13 设置自动进入wifi adb模式一、前言&#xff1a;二、解决Android 13 wifi adb每次重启自动重置问题方法1、分析系统中每次重置wifi adb属性的代码2、在开机广播里面进行设置wifi adb 相关属性&#xff08;1&#xff09…

wpf控制垂直滚动条到最上方

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 使用场景上代码 使用场景 wpf项目中有个datagrid列表&#xff0c;当数据出现垂直滚动条时拉倒最下方&#xff0c;现在当数据刷新时需要自动返回到数据最上方。 提示…

Unity VR 开发教程 OpenXR+XR Interaction Toolkit(八)手指触控 Poke Interaction

文章目录 &#x1f4d5;教程说明&#x1f4d5;XR Poke Interactor&#x1f4d5;与 UI 进行触控交互⭐添加 Tracked Device Graphic Raycaster 和 XR UI Input Module 让 UI 可被交互 &#x1f4d5;与物体进行交互⭐XR Simple Interactable⭐XR Poke Filter 往期回顾&#xff1a…

Mysql四种常见备份表方式,历史表

1、将表备份到物理机 mysqldump -h 域名 -P 端口 -u用户 -p密码 库名 表名 > /路径/表名.{$date}.bak 2、将表备份在库里面&#xff08;create复制表结构、insert复制表内容&#xff09; create table one_bak like one; 复制表结构 insert into one_bak select * from …

简单工厂模式详解

文章目录 前言一、简单工厂模式定义二、举个例子三、简单工厂模式的缺点总结 前言 本篇我们了解一下简单工厂模式&#xff0c;它是设计模式的雏形&#xff0c;是学习设计模式的开端&#xff0c;我会结合案例说明它的设计思路。 一、简单工厂模式定义 简单工厂模式并不是GoF23…

看一眼Mysql查询语句

目录 &#x1f6fb; 查询数据 &#x1f6fb;基本查询语句 &#x1f6fb;单表查询 &#x1f695;查询所有字段 &#x1f695;查询指定字段 &#x1f695;查询指定记录 &#x1f695;带in关键字的查询 &#x1f695;带between and的范围查询 &#x1f695;带like的字符匹…

【Eigen】Eigen内存对齐超详细讲解

Eigen是一个非常常用的矩阵运算库&#xff0c;由于使用了SSE指令集进行向量化加速&#xff0c;因此它的矩阵运算能力还是很厉害的&#xff0c;在SLAM等领域是一个不可或缺的的工具。然而&#xff0c;有时候在vector容器或者class类中使用Eigen时&#xff0c;可能会出现一些奇奇…

10个在线ai文案自动生成器,轻松写出高质量原创文案

在数字营销时代&#xff0c;撰写引人注目的标题和吸引人的营销文案至关重要。然而&#xff0c;写作优质文案需要耗费时间和精力。幸运的是&#xff0c;现在有许多在线AI文案自动生成器可以帮助我们快速创作出高质量的标题和营销文案。本文将介绍十款值得推荐的在线AI文案自动生…