Vue3引入Element-UI流程以及注意事项
赵美*
web前端;vue3;npm;node.js;vue3项目搭建;
项目描述
简单介绍vue3中Element-UI组件库的引入
上传时间
2023.06.24
浏览人数
410人
赵美*
未知
Hot:2087
ElementUI 它是由饿了么前端团队推出的基于 Vue 封装的 UI 组件库，简化了常用组件的封装，降低开发难度。
Element-UI 和 Element-Plus 的区别
Element-UI 组件的升级版（3.x）是 Element-Plus；
Element-UI 对应 Element2：基本不支持手机版，适用于Vue2 框架
Element-Plus 对应 Element3：组件布局考虑了手机版展示，适用于 Vue3 框架
具体安装步骤 ：
1. 安装 Element plus：
npm install element-plus --save
注意：有些 npm 版本过高或者过低的时候下载Echarts的过程中可能会报错，遇到这种问题可以在后面加上 --legacy-peer-deps ; 在安装时，一定要先使用 cd 命令进入到项目文件夹！！！
npm install element-plus --S --legacy-peer-deps
2. 判断 Element plus 是否安装成功
查看配置文件 package.json，是否有element-plus组件的版本号
3. 引入 Element plus 样式文件
在 main.js 文件夹里配置 Element plus 样式文件
// 原生组件配置文件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// Element plus 配置文件
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
import locale from 'element-plus/lib/locale/lang/zh-cn'
// 这里添加 use(ElementPlus, { locale })
createApp(App).use(store).use(router).use(ElementPlus, { locale }).mount('#app')
4. 使用 Element plus 创建一个表格示例
代码如下：
<template>
<!-- 原生界面代码 -->
<div class="about">
<h1>This is an about page</h1>
<!-- 表格组件主要代码 -->
<el-table style="width: 60%;margin: 0 auto">
<el-table-column label="Date"/>
<el-table-column label="Name"/>
<el-table-column label="Address"/>
</el-table>
</div>
</template>
运行后如图：
至此Vue3引入Element-plus并使用教程结束！！！
赵美*
