vue整合ElementUI(适合新手快速入门)

vue整合ElementUI1、安装这里我使用的是vs打开的vue项目，黑窗口模式进入项目路径也可。npm i element-ui -S执行完上述命令。2、引入Element这里我直接完整引入，当然大家也可以按需引入。在项目的 main.js中写入以下内容：import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/

xwli

8915人浏览 · 2020-12-13 10:42:19

xwli · 2020-12-13 10:42:19 发布

vue整合ElementUI

1、安装

这里我使用的是vs打开的vue项目，黑窗口模式进入项目路径也可。

npm i element-ui -S

在这里插入图片描述

执行完上述命令。

2、引入Element

这里我直接完整引入，当然大家也可以按需引入。

在项目的 main.js中写入以下内容：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3、测试

在ElementUI官网上看到这样一个实例，我们试着运行它看看。

在这里插入图片描述

查看它的代码，将它的代码复制到我们的App.vue文件中

在这里插入图片描述

在终端执行命令npm run dev

在这里插入图片描述

查看网站

在这里插入图片描述

证明整合ElementUI已经成功了~大家可以试着去玩玩。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^