Vue开发实例(三)项目引入Element-UI

项目引入Element-UI

  • 一、引入Element-UI
  • 二、注册组件
    • 1、vue2使用element-ui
    • 2、vue3使用element-ui
  • 三、使用Element组件
    • 1、轻微改造
    • 2、验证element是否生效

一、引入Element-UI

npm i element-ui --save
npm install element-ui -S

在这里插入图片描述
等待安装完成

二、注册组件

1、vue2使用element-ui

在main.js中注册

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// Vue3不是这种语法,请注意
Vue.use(ElementUI);

vue2全部main.js代码

import Vue from 'vue'
import App from './App.vue'import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.config.productionTip = false
Vue.use(ElementUI);new Vue({render: h => h(App),
}).$mount('#app')

注意:在使用Vue3全局注册element的时候,发现错误如下:

Uncaught TypeError: Cannot read properties of undefined (reading ‘prototype’)
at eval (webpack-internal:///./node_modules/element-ui/lib/utils/types.js:39)
at Object…/node_modules/element-ui/lib/utils/types.js (chunk-vendors.js:2923)
at webpack_require (app.js:849)
at fn (app.js:151)
at eval (webpack-internal:///./node_modules/element-ui/lib/utils/util.js:19)
at Object…/node_modules/element-ui/lib/utils/util.js (chunk-vendors.js:2935)
at webpack_require (app.js:849)
at fn (app.js:151)
at eval (webpack-internal:///./node_modules/element-ui/lib/locale/format.js:49)
at Object…/node_modules/element-ui/lib/locale/format.js (chunk-vendors.js:2526)

那么如何解决呢,继续往下看…

2、vue3使用element-ui

vue3中使用element-plus,它对Vue3进行了支持。

npm install element-plus --save

vue3 在main.js注册element-plus

注意这里与Vue2的注册有些不一样,比如:

const app = createApp(App);

先创建app 在用 use

import { createApp } from 'vue'
import App from './App.vue'import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App);
app.use(ElementPlus);app.mount('#app')

三、使用Element组件

1、轻微改造

启动项目,正常显示即代表项目运行正常
在这里插入图片描述
改造项目代码

位置:HelloWorld.vue

<template><div class="hello"><h1>{{ msg }}</h1></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String}
}
</script><style scoped>
</style>

在这里插入图片描述
这样代码看上去比较简单,干净

2、验证element是否生效

<template><div class="hello"><h1>{{ msg }}</h1><el-button>这是一个按钮</el-button></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String}
}
</script><style scoped>
</style>

在这里插入图片描述
从上面的页面可以看到,element注册成功了

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

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

相关文章

【Leetcode每日一题】前缀和(难度⭐)(25)

1. 题目解析 题目链接&#xff1a;DP34 【模板】前缀和 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 核心在于计算题目所给区间数组元素和返回即可。 2. 算法原理 为了提高计算效率&#xff0c;我们可以预先计算出一个「前缀…

在github的README.md中插入视频;在github的README.md中添加gif演示动画

最近需要再github中上传项目的源代码&#xff0c;应导师的要求&#xff0c;需要再README中加入对实验视频的展示&#xff0c;但是github的README.md其实就是一个markdown文件&#xff0c;据我的理解这个文件里应该无法直接插入视频吧&#xff1f;&#xff08;如果后续有办法直接…

UE4c++ ConvertActorsToStaticMesh ConvertProceduralMeshToStaticMesh

UE4c ConvertActorsToStaticMesh 创建Edior模块&#xff08;最好是放Editor模块毕竟是编辑器代码&#xff09;创建蓝图函数UBlueprintFunctionLibraryUTestFunctionLibrary.hUTestFunctionLibrary.cpp:.Build.cs 目标:为了大量生成模型&#xff0c;我们把虚幻带有的方法迁移成函…

机器学习_10、集成学习-随机森林

随机森林算法 随机森林&#xff08;Random Forest&#xff09;是一种集成学习方法&#xff0c;特别用于分类、回归和其他任务&#xff0c;它通过构建多个决策树&#xff08;Decision Trees&#xff09;在训练时进行预测&#xff0c;并采用平均或多数投票的方式来提高整体模型的…

【vue】keep-alive清除缓存最简单暴力的方法

项目场景&#xff1a; 场景一&#xff1a; 使用vue开发移动端&#xff0c; 有ABC三个页面&#xff0c;点击A跳转到B&#xff0c;点B跳转到C&#xff1b; 点C返回B&#xff0c;点B返回A。 场景二&#xff1a; 场景一实现之后&#xff0c;会出现这样一个问题&#xff1a; 先从A跳…

LeetCode 每日一题 2024/2/26-2024/3/3

记录了初步解题思路 以及本地实现代码&#xff1b;并不一定为最优 也希望大家能一起探讨 一起进步 目录 2/26 938. 二叉搜索树的范围和2/27 2867. 统计树中的合法路径数目2/28 2673. 使二叉树所有路径值相等的最小代价2/29 2581. 统计可能的树根数目3/1 2369. 检查数组是否存在…

leetcode 热题 100_三数之和

题解一&#xff1a; 双指针遍历&#xff1a;暴力解法的三层遍历会超时&#xff0c;因此需要优化遍历的过程。首先是需要对结果进行去重&#xff0c;这里采用排序跳过重复值的做法&#xff0c;在指针遍历时跳过已经遍历过的相同值。在第一层循环确定第一个值后&#xff0c;剩下两…

模型部署 - onnx 的导出和分析 -(1) - PyTorch 导出 ONNX - 学习记录

onnx 的导出和分析 一、PyTorch 导出 ONNX 的方法1.1、一个简单的例子 -- 将线性模型转成 onnx1.2、导出多个输出头的模型1.3、导出含有动态维度的模型 二、pytorch 导出 onnx 不成功的时候如何解决2.1、修改 opset 的版本2.2、替换 pytorch 中的算子组合2.3、在 pytorch 登记&…

vscode+remote突然无法连接服务器以及ssh连接出问题时的排错方法

文章目录 设备描述状况描述解决方法当ssh连接出问题时的排错方法 设备描述 主机&#xff1a;win11&#xff0c;使用vscode的remote-ssh插件 服务器&#xff1a;阿里云的2C2GUbuntu 22.04 UFIE 状况描述 之前一直使用的是vscode的remote服务&#xff0c;都是能够正常连接服务…

【Qt】界面布局

Qt常用布局 除Qt Designer支持可视化设计和布局界面之外&#xff0c;Qt 提供了代码方式来进行界面布局&#xff0c; 以下是几种常用的界面布局方式&#xff1a; 水平布局&#xff08;QHBoxLayout&#xff09;和垂直布局&#xff08;QVBoxLayout&#xff09;&#xff1a; QHBo…

Redis常用数据结构--Zset

Zset ZADDZCARDZCOUNTZRANGE/ZREVRANGEZRANGEBYSCOREZPOPMAX/ZPOPMINBZPOPMAX/BZPOPMINZRANK/ZREVRANKZSCOREZREMZREMRANGEBYRANKZREMRANGEBYSCOREZINCRBYZINTERSTORE/ZUNIONSTORE内部编码使⽤场景 ZADD 添加或者更新指定的元素以及关联的分数到 zset 中&#xff0c;分数应该符…

如何在 Angular 测试中使用 spy

简介 Jasmine spy 用于跟踪或存根函数或方法。spy 是一种检查函数是否被调用或提供自定义返回值的方法。我们可以使用spy 来测试依赖于服务的组件&#xff0c;并避免实际调用服务的方法来获取值。这有助于保持我们的单元测试专注于测试组件本身的内部而不是其依赖关系。 在本…

空调压缩机补充润滑油的方法

空调压缩机补充润滑油的方法有三种&#xff0c;从吸气截止阀旁边通孔吸入&#xff0c;从加油孔中加入&#xff0c;从曲轴箱下部加入&#xff0c;具体操作步骤如下&#xff1a; 1关闭吸气截止阀&#xff0c;启动压缩机几分钟&#xff0c;将曲轴箱中制冷剂排入冷凝器&#xff0c…

vue2结合electron开发桌面端应用

一、Electron是什么&#xff1f; Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 。允许您保持一个 JavaScript 代码代码库并创建可在Windows、macOS和Linux上运行的跨平台应用 。 Electron 经常与 Ch…

scrapy 中间件

就是发送请求的时候&#xff0c;会经过&#xff0c;中间件。中间件会处理&#xff0c;你的请求 下面是代码&#xff1a; # Define here the models for your spider middleware # # See documentation in: # https://docs.scrapy.org/en/latest/topics/spider-middleware.html…

【快速上手ProtoBuf】基本使用

文章目录 1 :peach:初识 ProtoBuf:peach:1.1 :apple:序列化概念:apple:1.2 :apple:ProtoBuf 是什么:apple:1.3 :apple:ProtoBuf 的使用特点:apple: 2 :peach:创建 .proto ⽂件:peach:3 :peach:编译 .proto 文件:peach:3 :peach:序列化与反序列化的使用:peach: 1 &#x1f351;初…

洛谷 2036.PERKET

采用递归法的方式进行题解。 思路&#xff1a;首先我们知道在n种材料当中&#xff0c;我们需要从中选择至少有一种得配料才行。也就是说&#xff0c;我们选择的配料数目是自己决定的&#xff0c;而不是那种组合型得对于你有要求的组合型递归方式。 所以我们会想到用指数型得递…

(五)网络优化与超参数选择--九五小庞

网络容量 网络中神经单元数越多&#xff0c;层数越多&#xff0c;神经网路的拟合能力越强。但是训练速度&#xff0c;难度越大&#xff0c;越容易产生过拟合。 如何选择超参数 所谓超参数&#xff0c;也就是搭建神经网路中&#xff0c;需要我们自己去选择&#xff08;不是通…

LeetCode 刷题 [C++] 第45题.跳跃游戏 II

题目描述 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 < j < nums[i]i j < n 返回到达 nums[n …

递归函数(c++题解)

题目描述 对于一个递归函数w(a, b, c)。 如果a < 0 or b < 0 or c < 0就返回值1。 如果a > 20 or b > 20 or c > 20就返回W(20,20,20)。 如果a < b并且b < c 就返回w(a, b, c − 1) w(a, b − 1, c − 1) − w(a, b − 1, c)&#xff0c; 其它别…