npm i element-ui -S命令错误

博客讲述了在Vue3项目中遇到引入element-ui库时的不兼容问题,原因是element-ui不支持vue3,官方推荐使用element-plus。提供了element-plus的安装步骤和在main.js中的引入方式,包括使用yarn添加依赖并进行样式导入,最后展示如何注册和挂载到应用上。
摘要由CSDN通过智能技术生成

项目前提:

项目需要引入element-ui


报错问题:

vue2和vue3引入elementui库是不一样的,一开始是跟着element-ui的官网去做的,发现npm下载报错了
在这里插入图片描述


报错分析:

elemen-ui不适配vue3,官方已经将vue3版本更新为element-plus
element-plus安装教程

如果是vue2安装element-ui就跟着官网去做就好了
element-ui官网安装教程


解决问题:

安装(我是用yarn下载的,看个人情况,你有yarn就用yarn,没有就npm,yarn安装的快一点叭…)

yarn add element-plus

引入(在main.js中引入即可)

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

引用\[1\]:新建 /src/components/element/index.js 文件,index.js 示例代码如下: import { Button, Input, Radio, Table, Form } from 'element-ui' const coms = \[ Button, Input, Radio, Table, Form \] export default { install(Vue, options){ coms.map(c => { Vue.component(c.name, c) }) } } 。 引用\[2\]:在 main.js 中引入自定义 element 插件: import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' //引入 element 插件 import element from './components/element' Vue.use(element) Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app') 。 引用\[3\]:在 main.js 入口文件中引入组件: import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import { Button } from 'element-ui'; // 按需引入组件 Vue.component(Button.name, Button); // 注册全局组件 // 或 // Vue.use(Button) // 或指定组件名称 // Vue.component('my-button', Button); Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app') 第6步:使用组件 <template> <div id="app"> <el-button type="primary">按钮</el-button> <!-- <my-button>按钮</my-button> --> </div> </template> 封装 Element 模块 。 问题: npmi element-ui --save 回答: npmi element-ui --save 是一个错误命令。正确的命令应该是 npm install element-ui --save。这个命令用于在你的项目中安装 element-ui 包,并将其添加到项目的依赖中。 #### 引用[.reference_title] - *1* *2* *3* [Vue 项目中按需引入 ElementUI 的正确方法](https://blog.csdn.net/p445098355/article/details/121207285)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值