记录vue3使用element 正确使用方法

已于 2022-05-02 01:46:05 修改
阅读量505 收藏
点赞数
分类专栏： 笔记 文章标签： 网络 vue elementui
于 2022-05-02 01:44:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45223074/article/details/124535890
版权

记录vue3使用element 正确使用方法

命令

npm install --save element-plus

 

切记注意vue3 引入的是element plus

注意引入的element plus 样式的路径 现在已经没有lib 这个目录了，导致现在很多人都是错的

追梦男孩～
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3.0结合element
weixin_42220953的博客
12-18 862
在创建好一个vue项目的时候，你可以安装npm i element-ui -S 项目中配置element vue add element 第三步：接下来会出现一些选项需要选择一下 第一条选项比较重要，问是全部引入还是按需引入~ 大家根据需要选择即可，我选的默认全部。 第四步：检查是否安装成功 装完后cmd还会温馨提示建议使用git管理~ 我们通过package.json来确认一下，安装成功后pa...
Element Breadcrumb 面包屑的使用方法
10-15
1. **引入组件**：在使用前，需要确保已经安装了 Element UI，并在 Vue 实例中导入 Breadcrumb 组件。 ```html <!-- 面包屑项 --> import { ElBreadcrumb } from 'element-ui'; export default { ...
vue3中使用elementui组件
dsxjinzhiqiang的博客
03-18 1万+
vue3出来好一段时间了，一直想着用一下，今日集成elementui使用一下 首先创建一个vue3的基础项目 执行以下命令 npm init @vitejs/app vue3Projece -- --template react 出现如图所示的选择，按上下键选择 vue 按回车就可创建一个vue3的项目 然后用编辑工具打开项目，这里演示用vsCode 集成elementUi环境 element兼容vue3的时候换成element-plus 执行npm install ...
Vue3与Element-plus整合及项目实战
sinat_30844883的博客
05-14 4210
Element-plus简介是ElementUI的升级版，是一套基于vue2与vue3的桌面端组件库，它提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的前端页面。
(vue)vue3使用element
nyf_unknow的博客
04-01 1575
element-ui支持vue2版本，当vue3项目安装element-ui的时候会报错，应安装element-plus版本。2、修改main.js或main.ts文件。1、首先安装element-plus。package.json文件中查看。
解决vue3使用element-ui
xiaoyao_zhy的博客
06-15 1万+
vue3使用element-ui
vue3.0中使用element
浩星
03-01 2万+
前言： 在vue3.0中使用element框架，因为element是支持vue2.0的，他推出的支持vue3.0的版本叫element-plus 目录： 官网入口：点我进入 一、个人遇到的问题与解决办法： 遇到的问题： 我直接用cnpm ielement-plus-S 装的版本，不知道为啥，一直报错 图1，版本型号 图2 ，我的代码中使用图3 ​图1 ​图2 ​图3 解决办法： 我把package.json中的element-plus的版本更换成 下面这句...
Element Collapse 折叠面板的使用方法
10-15
Element Collapse 折叠面板是Vue.js组件库Element UI中的一个功能组件，用于创建可折叠的内容区域，方便用户按需查看和隐藏详细信息。这个组件在网页设计中常用于节省空间，提升用户体验，尤其是在处理大量信息时。...
vue项目-服务端 基于element-ui实现
03-16
在这个基于Vue的项目中，使用了Element-UI库来加速和优化开发过程。Element-UI是一个轻量级且易于使用的组件库，尤其适合企业级后台管理界面。以下是这个“vue项目-服务端 基于element-ui实现”中涉及的关键知识点：...
vue-element-admin.zip
12-03
10. `README.md`：项目的说明文档，通常包含项目简介、安装步骤、使用方法等信息，方便其他开发者理解和使用项目。 通过这个项目，开发者可以学习到 Vue.js 的基本使用，包括组件化开发、状态管理（可能使用 Vuex）...
vue-ts-admin-master.zip
03-05
例如，使用Vue3的生命周期钩子实现动态数据加载，借助TypeScript的类型系统确保API接口参数的正确性，利用Element UI的表单组件快速创建用户交互界面。 为了进一步了解这个项目，你可以解压"vue-ts-admin-master....
【vue】vue3使用element ui
努力变好
08-03 3万+
element-ui支持vue2版本，当用vue3安装element-ui的时候会报错，这就需要安装element-plus版本来用到vue3项目中。
Vue3——Vue3怎么使用element
Lora_0925的博客
07-26 423
Element Plus是基于 Vue 3.0 的组件库。 安装 npm install element-plus --save 引入：main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementPlus from 'element-plus'; import 'element-
vue3中elementui组件的使用
m0_66089610的博客
03-31 1469
elementui的全局引入；一定要注意 vue版本 //安装： npm install element-plus --save //在main.js内引入element-plus以及样式: import ElementPlus from 'element-plus' import 'element-plus/dst/index.css' //挂载 createApp(App).use(ElementPlus) elemtnt-ui的按需引入 //安装： npm install element-plu
Vue3如何使用element-ui，vue3使用Element，Element使用
weixin_54048131的博客
02-13 709
【代码】Vue3如何使用element-ui。
终于被我搞掂了 Vue3 + Element 的正确打开方式（直接拿来就用）
江帅帅
06-10 426
vue3 + element-plus
Vue3项目中引入ElementUI使用详解
热门推荐
蓑笠翁
06-18 3万+
Vue3项目中引入 ElementUI详解，ElementPlus引入使用。
vue脚手架及Element-UI的基本使用
l2345432l的博客
11-16 803
安装vue脚手架的大致流程 安装vue脚手架前需要安装node.js和npm npm在安装node.js时候自带 Vue脚手架可以快速生成Vue项目基础的架构。 安装最新版本的Vue脚手架： window+R按键下输入cmd打开命令行输入： npm install -g @vue/cli 这个过程依赖于你的网速，一般等待时间因人而异，我安装时候足足等待了半小时。 基于3.x版本的脚手架创建Vue项目： 1).使用命令创建Vue项目 cmd命令：vue create my-project 选择Manuall
vue3学习9：使用element plus
weixin_43788986的博客
07-10 3059
ElementPlus 是一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。 本次举例怎么使用： 首先安装 然后进行全局引入，在main.js加入： 现在可以试一下 举个栗子...
vue3报错Cannot read properties of null (reading 'parentNode') 帮我解决
最新发布
07-03
在 Vue.js 3 中，遇到 "Cannot read properties of null (reading 'parentNode')" 这样的错误通常是由于尝试访问一个null或未定义的对象的父节点。这可能发生在以下几个情况： 1. **组件实例没有挂载**：如果在数据初始化之前尝试访问元素，可能会导致这个错误。确保你在引用DOM元素前，该元素已经被Vue实例正确地挂载到页面上。 ```javascript export default { mounted() { this.myElement = document.querySelector('#my-element'); // 在这里处理元素 } }; ``` 2. **条件渲染中的无效路径**：检查你的模板中是否在v-if或v-show指令下访问了未被渲染的节点。 ```html <div v-if="showElement" @click="handleClick">...</div> // 如果showElement一开始为false并且没有改变过，会报错 ``` 修复方法是确保`showElement`在初始时是可判定的（非null）。 3. **回调函数中的错误**：在事件监听器或其他异步操作中，确保你的回调函数里处理的是已存在的元素。 ```javascript this.$nextTick(() => { if (this.myElement) { this.myElement.parentNode.removeChild(this.myElement); } }); ``` 4. **销毁后的元素**：如果你尝试在组件卸载后继续访问其元素，也会得到这个错误。在适当的地方移除对已销毁组件的引用。 为了解决这个问题，你需要根据具体的上下文定位并修复代码中的潜在空对象引用。针对每个场景分别检查，并使用 `?.` 或者 `|| null` 来安全地访问属性，防止null异常。同时记得添加适当的错误处理和日志记录，以便更好地追踪问题。如需更多帮助，请提供具体代码片段以供分析。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值