官网
Element - The world's most popular Vue UI framework
下载安装
npm install --save element-uiA.完整引用
import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) });
B.按需引用
1.设置CSS和JS文件,在public/index.html中引入
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.8/theme-chalk/index.css" /> <script src="https://cdn.staticfile.org/element-ui/2.15.8/index.js"></script>2.设置全局样式,在assets文件夹下面添加css文件夹，创建global.css文件,添加全局样式
/* 全局样式表 */ html,body,#app{ width: 100%; height: 100%; margin: 0; padding: 0; }3.在src文件夹下新建plugins文件夹
4.复制里面的文件进项目(在码云项目里查找https://gitee.com/ZhiMaKes/vue_shop)
5.在main.js引入这个文件
import Vue from 'vue' import App from './App.vue' import router from './router' ---------------------------------------开始 import './plugins/element.js' import './assets/css/global.css' ----------------------------------------结束 Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount('#app')6.安装babel-plugin-component
npm install babel-plugin-component -D7.更改babel.config.js文件
module.exports = { presets: [ '@vue/app' ], plugins: [ [ 'component', { libraryName: 'element-ui', styleLibraryName: 'theme-chalk' } ] ] }
添加第三方字体
1.复制素材中的fonts文件夹到assets中,在入口文件main.js中导入import './assets/fonts/iconfont.css'
然后直接在 <el-input prefix-icon="iconfont icon-3702mima"></el-input>
接着添加登录盒子
el-form 表单
1. :model="loginForm" 双向绑定数据
2. ref="LoginFormRef" 引用，通过this.$refs.LoginFormRef进行使用
3. :rules="loginFormRules" 对表单数据进行校验
4. label-width="0px"
<el-form :model="loginForm" ref="LoginFormRef" :rules="loginFormRules" label-width="0px" class="login_form">
<!-- 用户名 -->
<el-form-item prop="username">
<el-input v-model="loginForm.username" prefix-icon="iconfont icon-user" ></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item prop="password">
<el-input type="password" v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"></el-input>
</el-form-item>
<!-- 按钮 -->
<el-form-item class="btns">
<el-button type="primary" @click="login">登录</el-button>
<el-button type="info" @click="resetLoginForm">重置</el-button>
</el-form-item>
</el-form>
// 功能1:重置表单
this.$refs.LoginFormRef.resetFields()
//功能2：表单验证规则（给<el-form>添加属性:rules="loginFormRules"，通过<el-form-item>的prop属性设置验证规则）
loginFormRules: {
username: [
{ required: true, message: '请输入登录名', trigger: 'blur' },
{
min: 3,
max: 10,
message: '登录名长度在 3 到 10 个字符',
trigger: 'blur'
}
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{
min: 6,
max: 15,
message: '密码长度在 6 到 15 个字符',
trigger: 'blur'
}
]
}
//功能3：表单递交预检验
this.$refs.LoginFormRef.validate(async valid => {
console.log(this.loginFormRules)
//如果valid参数为true则验证通过
if (!valid) {
return
} }el-form-item 表单行
1. 表单的每一行
2. prop="username让校验规则和数据匹配
<el-form-item prop="username">
<el-input v-model="loginForm.username" prefix-icon="iconfont icon-user" ></el-input>
</el-form-item> el-input 输入框
1. v-model="loginForm.username" 双向绑定的数据
2. prefix-icon="iconfont icon-user" 前置图标
3. clearable 删除按钮
4.placeholder="请输入内容" 要替换的内容
5.v-model="queryInfo.query" 双向数据绑定
6.@clear="getUserList" 点击清除，执行的方法
<el-input v-model="loginForm.username" prefix-icon="iconfont icon-user" ></el-input>el-button 按钮
1. type="primary" 类型
2. @click="login" 点击事件
//type 类型
1.primary 主要按钮
2.success
3.info 信息
4.warning 警告
5.danger 危险
6.text 文字按钮
<el-button type="primary" @click="login">登录</el-button>
//弧度按钮
<el-button type="primary" plain>主要按钮</el-button>
//圆角按钮
<el-button type="primary" round>主要按钮</el-button>
//自定义图标 圆形
<el-button type="primary" icon="el-icon-edit" circle></el-button>
Message 提示框
//配置
1.在plugins文件夹中打开element.js文件，进行elementui的按需导入
import {Message} from 'element-ui'
2.进行全局挂载：
Vue.prototype.$message = Message;
3.使用
//成功
this.$message.success('登录成功')
//失败
this.$message.error('登录失败:' + res.meta.msg) //console.log("登录失败:"+res.meta.msg)
Token 保存和获取
//token保存
window.sessionStorage.setItem('token', res.data.token)
//token获取
this.token= window.sessionStorage.getItem("token")
//token移除
window.sessionStorage.clear();
Router 配置和跳转
//1.配置
const router = new Router({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login },
{ path: '/home', component: Home }
]
})
//2.挂载路由导航守卫,to表示将要访问的路径，from表示从哪里来，next是下一个要做的操作，符合条件才能通行
router.beforeEach((to,from,next)=>{
if(to.path === '/login')
return next();
//获取token
const tokenStr = window.sessionStorage.getItem('token');
if(!tokenStr)
return next('/login');
next();
})
export default router
//3.跳转
this.$router.push('/home')网络请求 axios
1.打开main.js
import axios from 'axios';
2.设置请求的根路径：
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/';
3.挂载axios：
Vue.prototype.$http = axios;
4.添加拦截器，请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config=>{
//为请求头对象，添加token验证的Authorization字段
config.headers.Authorization = window.sessionStorage.getItem("token")
return config
})
4.使用 （$http.post返回的是个Promise对象，使用 async /await ）
//点击登录的时候先调用validate方法验证表单内容是否有误
this.$refs.LoginFormRef.validate(async valid => {
console.log(this.loginFormRules)
//如果valid参数为true则验证通过
if (!valid) {
return
}
//发送请求进行登录
const { data: res } = await this.$http.post('login', this.loginForm)
// console.log(res);
if (res.meta.status !== 200) {
return this.$message.error('登录失败:' + res.meta.msg) //console.log("登录失败:"+res.meta.msg)
}
this.$message.success('登录成功')
console.log(res)
//保存token
window.sessionStorage.setItem('token', res.data.token)
// 导航至/home
this.$router.push('/home')
})
5.中间夹杂参数的情况
async userStateChanged(row) {
//发送请求进行状态修改
const { data: res } = await this.$http.put(
`users/${row.id}/state/${row.mg_state}`
)
//如果返回状态为异常状态则报错并返回
if (res.meta.status !== 200) {
row.mg_state = !row.mg_state
return this.$message.error('修改状态失败')
}
this.$message.success('更新状态成功')
}ESLint 警告
1.默认情况下，ESLint和vscode格式化工具有冲突，需要添加配置文件解决冲突
2.在项目根目录添加 .prettierrc 文件
//semi 是否使用分号
//singleQuote 是否格式化后使用单引号
{
"semi":false,
"singleQuote":true
}后台首页基本布局
<el-container class="home-container">
<!-- 头部区域 -->
<el-header>Header<el-button type="info" @click="logout"> 退出 </el-button></el-header>
<!-- 页面主体区域 -->
<el-container>
<!-- 侧边栏 -->
<el-aside width="200px">Aside</el-aside>
<!-- 主体结构 -->
<el-main>Main</el-main>
</el-container>
</el-container>el-aside 侧边栏
1. :width="isCollapse ? '64px':'200px'" 设置宽度，可以用来控制折叠
el-menu 侧边栏菜单
1. :collapse="isCollapse" 设置折叠菜单为绑定的 isCollapse 值
2. :collapse-transition="false" 关闭默认的折叠动画
3. :unique-opened="true" 默认只打开一个
4. router属性设置为true，此时当我们点击二级菜单的时候，就会根据菜单的index
属性进行路由跳转5. default-active 默认显示的那个菜单值
<el-menu
:collapse="isCollapse"
:collapse-transition="false"el-submenu 一级菜单
1. :index="item.id+''" 跳转的地址
2. v-for="item in menuList" 循环的数据
3. :key="item.id" 唯一的ID
<el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
<!-- 一级菜单模板 -->
<template slot="title">
<!-- 图标 -->
<i class="el-icon-location"></i>
<!-- 文本 -->
<span>{{item.authName}}</span>
</template>
</el-submenu>el-menu-item 二级菜单
1. :index="item.id+''" 跳转的地址
2. v-for="item in menuList" 循环的数据
3. :key="item.id" 唯一的ID
<!-- 二级子菜单 -->
<el-menu-item :index="subItem.id+''" v-for="subItem in item.children" :key="subItem.id">
<!-- 二级菜单模板 -->
<template slot="title">
<!-- 图标 -->
<i class="el-icon-location"></i>
<!-- 文本 -->
<span>{{subItem.authName}}</span>
</template>
</el-menu-item>el-breadcrumb 面包屑导航
1.el-breadcrumb-item 面包屑导航每一项
2. separator
3. :to="{ path: '/home' } 点击后跳转的地址
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>el-card 卡片视图
1.el-row :gutter="20" 可以理解为div,卡片视图的每一行，里面每一小块的间隔是20
2.el-col :span="6" 每行中的每一个小块，每个小块占6个位置，总共最大24
<!-- 卡片视图区域 -->
<el-card>
<!-- 搜索与添加区域 -->
<el-row :gutter="20">
<el-col :span="7">
<el-input placeholder="请输入内容">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary">添加用户</el-button>
</el-col>
</el-row>
</el-card>el-table 表格
1. :data="userList" 要设置的数据
2. border 有纵向边框
3. stripe 隔行变色
<el-table :data="userList" border stripe>
<el-table-column type="index"></el-table-column>
<el-table-column label="姓名" prop="username"></el-table-column>
<el-table-column label="邮箱" prop="email"></el-table-column>
<el-table-column label="电话" prop="mobile"></el-table-column>
<el-table-column label="角色" prop="role_name"></el-table-column>
<el-table-column label="状态">
<template slot-scope="scope">
<el-switch v-model="scope.row.mg_state"></el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="180px">
<template slot-scope="scope">
<!-- 修改 -->
<el-button type="primary" icon="el-icon-edit" size='mini'></el-button>
<!-- 删除 -->
<el-button type="danger" icon="el-icon-delete" size='mini'></el-button>
<!-- 分配角色 -->
<el-tooltip class="item" effect="dark" content="分配角色" placement="top" :enterable="false">
<el-button type="warning" icon="el-icon-setting" size='mini'></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>el-table-column 表格每行
1.type 类型，index表示下标值
2.label 绑定的名称
3.prop 绑定的数据名称
4.slot-scope="scope" 作用域插槽，接收作用域内的数据 scope.row为此行的数据
<el-table-column type="index"></el-table-column>
<el-table-column label="姓名" prop="username"></el-table-column>
<el-table-column label="邮箱" prop="email"></el-table-column>
<el-table-column label="电话" prop="mobile"></el-table-column>
<el-table-column label="角色" prop="role_name"></el-table-column>
<el-table-column label="状态">
<template slot-scope="scope">
<el-switch v-model="scope.row.mg_state"></el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="180px">
<template slot-scope="scope">
<!-- 修改 -->
<el-button type="primary" icon="el-icon-edit" size='mini'></el-button>
<!-- 删除 -->
<el-button type="danger" icon="el-icon-delete" size='mini'></el-button>
<!-- 分配角色 -->
<el-tooltip class="item" effect="dark" content="分配角色" placement="top" :enterable="false">
<el-button type="warning" icon="el-icon-setting" size='mini'></el-button>
</el-tooltip>
</template>
</el-table-column>el-switch 选项按钮
<el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>Tooltip 文字提示
1.effect 提供的主题
2.content 显示的内容
3.placement 显示的位置
4. :enterable="false" 鼠标是否可进入到 tooltip 中，移开就会消失
<!-- 分配角色 -->
<el-tooltip class="item" effect="dark" content="分配角色" placement="top" :enterable="false">
<el-button type="warning" icon="el-icon-setting" size='mini'></el-button>
</el-tooltip>el-pagination 分页器
1. @size-change(pagesize改变时触发)
2. @current-change(页码发生改变时触发)
3. :current-page(设置当前页码)
4. :page-size(设置每页的数据条数)
5. :total(设置总页数)
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>el-dialog 对话框组件
1. :visible.sync(设置是否显示对话框)
2. width(设置对话框的宽度)文章来源：https://www.toymoban.com/news/detail-406485.html
3.@close 关闭事件文章来源地址https://www.toymoban.com/news/detail-406485.html
<!-- 对话框组件 :visible.sync(设置是否显示对话框) width(设置对话框的宽度)
:before-close(在对话框关闭前触发的事件) -->
<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%">
<!-- 对话框主体区域 -->
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
<el-form-item label="用户名" prop="username">
<el-input v-model="addForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="addForm.password"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
<el-form-item label="电话" prop="mobile">
<el-input v-model="addForm.mobile"></el-input>
</el-form-item>
</el-form>
<!-- 对话框底部区域 -->
<span slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
</span>
</el-dialog>表单校验
data() {
//验证邮箱的规则
var checkEmail = (rule, value, cb) => {
const regEmail = /^\w+@\w+(\.\w+)+$/
if (regEmail.test(value)) {
return cb()
}
//返回一个错误提示
cb(new Error('请输入合法的邮箱'))
}
//验证手机号码的规则
var checkMobile = (rule, value, cb) => {
const regMobile = /^1[34578]\d{9}$/
if (regMobile.test(value)) {
return cb()
}
//返回一个错误提示
cb(new Error('请输入合法的手机号码'))
}
return {
//获取查询用户信息的参数
queryInfo: {
// 查询的条件
query: '',
// 当前的页数，即页码
pagenum: 1,
// 每页显示的数据条数
pagesize: 2
},
//保存请求回来的用户列表数据
userList: [],
total: 0,
//是否显示添加用户弹出窗
addDialogVisible: false,
// 添加用户的表单数据
addForm: {
username: '',
password: '',
email: '',
mobile: ''
},
// 添加表单的验证规则对象
addFormRules: {
username: [
{ required: true, message: '请输入用户名称', trigger: 'blur' },
{
min: 3,
max: 10,
message: '用户名在3~10个字符之间',
trigger: 'blur'
}
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{
min: 6,
max: 15,
message: '用户名在6~15个字符之间',
trigger: 'blur'
}
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ validator:checkEmail, message: '邮箱格式不正确，请重新输入', trigger: 'blur'}
],
mobile: [
{ required: true, message: '请输入手机号码', trigger: 'blur' },
{ validator:checkMobile, message: '手机号码不正确，请重新输入', trigger: 'blur'}
]
}
}
}弹出框
async tuichu( ) {
const confirmResult = await this.$confirm('此操作将退出, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).catch((err) => {
return err
})
// 如果用户确认删除，则返回值为字符串 confirm
// 如果用户取消删除，则返回值为字符串 cancel
if (confirmResult !== 'confirm') return this.$message.info('已取消退出！')
this.$message.success('退出成功！')
}到了这里，关于vue-element-ui使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
