Vue3 _ 26. Vue-CLI 4.5+ 引入 Element

一、Element & Element-plus

先来说说什么是 Element，我们打开它的官网：https://element.eleme.cn/#/zh-CN

这个 Element，是一套比较完整的桌面端组件库，可以说我们常用的都已经涵盖了。这个东西对于我这样的后端开发者是福音（因为我 css 是真的差）。

但是！！！这个 Element 是给 Vue 2 提供的，而我们现在用的是 Vue 3 ，所以我们在当前项目中没有办法引入 Element。

这里我们引入的是 Element 的升级版：Element-plus（下面用 ep 代替）

二、Vue 3 项目中引入 Element-plus

官网：https://element-plus.gitee.io/#/zh-CN

我们想要引入 ep，首先得安装一下

npm install element-plus --save

很快啊，大概十几秒就下载下来了。

安装好之后，我们再将这个 ep 引入到我们的项目中。

打开 main.js，我们配置一下

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

const app = createApp(App);

// Element Plus
import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css";
import "dayjs/locale/zh-cn";
import locale from "element-plus/lib/locale/lang/zh-cn";

// Element Plus
app.use(ElementPlus, { locale });

import axios from "axios";
// axios 全局超时时间 2 秒
axios.defaults.timeout = 2000;

// Vue 3 需要使用这个方式进行挂载
app.config.globalProperties.$axios = axios;

app.use(store).use(router).mount("#app");

三、测试

引入好之后，我们来试一下 Element

在 App.vue 组件中，我们来用一下它给我们提供的按钮。

直接复制即可。然后我们保存运行一下。

可以看到啊，这个是可以使用的。 

接下来可以一边看着 ep 的 API，一边开发了~~~

这一篇东西不是很多，自己动手练习一下~~

有问题可以联系我：QQ 2100363119，欢迎大家访问我的个人网站：https://www.lemon1234.com

最近网站已经做好，并且已经上线，欢迎各位留言~~