Vue-cli引入element-ui简单示例

Vue-cli引入element-ui简单示例参考官方项目创建添加element-ui安装引入示例参考官方vue：https://cn.vuejs.org/nodejs：http://nodejs.cn/element-ui：http://element-cn.eleme.io/#/zh-CN/component/installation项目创建请参考：https://blog.csd...

平揽星尘

2714人浏览 · 2019-01-11 19:39:04

平揽星尘 · 2019-01-11 19:39:04 发布

Vue-cli引入element-ui简单示例

参考官方
项目创建
添加element-ui
- 安装
- 引入
示例

参考官方

vue：https://cn.vuejs.org/
nodejs：http://nodejs.cn/
element-ui：http://element-cn.eleme.io/#/zh-CN/component/installation

项目创建

请参考：https://blog.csdn.net/qq_15764943/article/details/86300310

添加element-ui

安装

（1）方式一：npm安装

cnpm i element-ui -S

（2）方式二：依赖安装

package.json添加依赖 "element-ui": "^2.2.1"
cnpm install

引入

在main.js中，引入

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

在这里插入图片描述

示例

添加element按钮
（1）创建组件
在这里插入图片描述
（2）注册路由

（3）首页使用

（4）页面效果

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}$/, //不连续的两位字母// /^