Vue3+vite搭建基础架构（2）--- 使用Element Plus

说明

这里记录下自己在Vue3+vite的项目使用Element Plus的过程，不使用ts语法，方便以后直接使用。

官方文档

Element Plus官方文档：https://element-plus.gitee.io/zh-CN/guide/installation.html

vite-demo目录结构说明

这里我使用webstorm打开上一篇博客创建的vite-demo项目。目录如下：

安装Element Plus

由于Vue3不再支持IE11，所以Vue3项目不用element-ui，要使用Element Plus。

安装命令

npm install element-plus --save

在webstorm里面的Terminal输入npm install element-plus --save命令安装该依赖。

执行完如下:

package.json会增加element-plus版本号

node_modules也会增加对应文件

使用Element Plus组件

在main.js文件里面改写代码如下:

main.js改写代码后：

根据官方文档使用按钮测试如下：

删除App.vue原有内容，改为如下代码：

启动项目：

浏览器效果:
出现按钮效果，说明element-plus在项目中引入成功。

组件显示语言为英文问题

element-plus里面有很多组件字体显示的是英文，如日期选择器，分页等组件。这里以日期选择器为例。
在App.vue组件里面增加日期选择器代码，如下：

如下，日期组件里面的显示的是英文字体，它不是中文：

解决方法如下：
在main.js里面直接引用中文语言包并使用即可。

浏览器效果如下:
日期选择器变为中文。

到这里element-plus安装和测试使用就结束了。可以任意使用element-plus里面的组件进行开发了。