Vue.2Vue.3项目引入Element-UI教程踩坑

说明：Vue.2 & Vue.3项目引入Element UI 时下载的组件库对应的是Element UI & Element plus；

下面给出相应的方法和示例：

Vue.2引入Element-UI参考

Vue 2- Element UI 官方

1.安装Element UI：

npm i element-ui -S

注意：有些npm版本过高或者过低的时候下载Echarts的过程中可能会报错，遇到这种问题可以在后面加上 --legacy-peer-deps试试！如下：

npm i element-ui -S --legacy-peer-deps

2.引入Element UI以及原生组件样式文件

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)
});

主要加入以下几行代码：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);

3.使用element ui 创建一个表格示例

主要代码如下：

<template><div class="hello"><h1>{{ msg }}</h1>//表格组件主要代码<el-table :data="list" border style="width: 100%" class="tableel12"><el-table-column prop="tradeId" label="序号" width="180" /><el-table-column prop="stockHolderId" label="股民id" width="180" /><el-table-column prop="bankCardId" label="卡号" /><el-table-column prop="addedMoney" label="交易金额" /><el-table-column prop="state" label="状态" /><el-table-column prop="type" label="操作股票方式" /><el-table-column label="重传"><template #default="scope"><el-button type="primary" @click="update2(scope.row.tradeId, scope.row.state)">重传</el-button><!-- <el-button link type="primary" size="small">Edit</el-button> --></template></el-table-column></el-table></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

运行后如图：

至此Vue.2引入Element-UI并使用教程结束！！！

Vue.3引入Element-UI

Vue 3- Element Plus 官方

注意：element ui 官方文档上没有说明element ui不支持Vue.3版本,我也是自己测试了才知道，Vue.3引入element ui时，没有出现报错，但是运行后浏览器出现了白屏的问题，所以需要安装element plus。

1.安装Element plus：

npm install element-plus --save

注意：有些npm版本过高或者过低的时候下载Echarts的过程中可能会报错，遇到这种问题可以在后面加上 --legacy-peer-deps试试！如下：

npm install element-plus --S --legacy-peer-deps

2.引入Element plus以及原生组件样式文件

//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-plus/theme-chalk/index.css';
import locale from 'element-plus/lib/locale/lang/zh-cn'createApp(App).use(store).use(router).use(ElementPlus, { locale }).mount('#app')

主要加入以下几行代码：

//main.js
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
import locale from 'element-plus/lib/locale/lang/zh-cn'createApp(App).use(ElementPlus, { locale })

3.使用element plus 创建一个表格示例

主要代码如下：

<template><div class="home"><img alt="Vue logo" src="../assets/logo.png"><HelloWorld msg="Welcome to Your Vue.js App" />//表格组件主要代码<el-table :data="list" border style="width: 100%" class="tableel12"><el-table-column prop="tradeId" label="序号" width="180" /><el-table-column prop="stockHolderId" label="股民id" width="180" /><el-table-column prop="bankCardId" label="卡号" /><el-table-column prop="addedMoney" label="交易金额" /><el-table-column prop="state" label="状态" /><el-table-column prop="type" label="操作股票方式" /><el-table-column label="重传"><template #default="scope"><el-button type="primary" @click="update2(scope.row.tradeId, scope.row.state)">重传</el-button><!-- <el-button link type="primary" size="small">Edit</el-button> --></template></el-table-column></el-table></div>
</template><script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'export default {name: 'HomeView',components: {HelloWorld}
}
</script>

运行后如图：

至此Vue.3引入Element-UI并使用教程结束！！！

知识分享，持续更新，求关注不迷路~

Vue.2Vue.3项目引入Element-UI教程踩坑相关推荐

element ui 组件踩坑记录--后台管理系统-最全
说明:很久没有开发过后台管理系统,elementui都好久没有用过了,踩了一些小坑,特意记录下: element 特点:a.组件的一般输入的值/可以选择的值,都是绑定在v-model 上面 b. 在组 ...
win10快速搭建vue开发环境并使用element ui
1,环境 1.1 node.js安装下载对应你系统的Node.js版本:https://nodejs.org/en/download/ 选安装目录进行安装(安装过程就是全程next,注意不要取消自动 ...
vue表格显示图片，采用element ui实现
项目场景: vue表格显示图片,采用element ui实现 <template><el-table :data="tableData" style=" ...
记一次成功把Vue2后台项目改造成Vite2的踩坑经历
文章目录前言一.项目背景 1.1.为什么要选择Vite 二.迁移前的准备 2.1.补全.vue后缀 2.2.移动public/index.html的位置 2.2.1.通过vite-plugin-h ...
使用VUE仿写【E宠商城】踩坑点
使用VUE仿写[E宠商城]踩坑点 1.无论是否是否写了!important 父元素的规则都是被子元素继承的继承的样式优先级小所以这边的字体大小还是保留reset那边的样式!!! 2.canvas ...
iphone se 一代不完美越狱 14.6 视频壁纸教程(踩坑笔记)
iphone se 一代不完美越狱 14.6 加视频壁纸教程-踩坑笔记越狱流程 1.爱思助手制作启动u盘坑点: 2.越狱好后视频壁纸软件 1.源 2.软件安装越狱流程 1.爱思助手制作启动 ...
从无到有 Ubuntu16.04 18.04 20.04安装+Todesk+Chrome+NVIDIA驱动+CUDA+Cudnn+Anaconda3+Pycharm 超详细教程+踩坑问题
从无到有 Ubuntu16.04 18.04 20.04安装+Todesk+Chrome+NVIDIA驱动+CUDA+Cudnn+Anaconda3+Pycharm 超详细教程+踩坑问题(有部分图片忘 ...
【2】Vue项目引用Element UI（饿了么框架）菜单导航条初期配置
首先要理解Vue项目加载顺序: index.html → main.js → App.vue → nav.json→ routes.js → page1.vue index.html建议加入样式 &l ...
Vue项目引入Echarts可视化图表库教程踩坑
Apache ECharts是一个基于 JavaScript 的开源可视化图表库,ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表. ...
VUE2版本引入Element UI
一句话的事儿 1,在cmd中打开vue项目文件夹,输入命令: vue add element 2,加载后的选项如下: How do you want to import Element? Fully ...

Vue.2Vue.3项目引入Element-UI教程踩坑

Vue.2Vue.3项目引入Element-UI教程踩坑相关推荐

最新文章

热门文章