vue-element-ui使用
官网
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中引入
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-form 表单
1. :model="loginForm" 双向绑定数据
2. ref="LoginFormRef" 引用，通过this.$refs.LoginFormRef进行使用
3. :rules="loginFormRules" 对表单数据进行校验
4. label-width="0px"
登录
重置
// 功能1:重置表单
this.$refs.LoginFormRef.resetFields()
//功能2：表单验证规则（给添加属性:rules="loginFormRules"，通过的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-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-button 按钮
1. type="primary" 类型
2. @click="login" 点击事件
//type 类型
1.primary 主要按钮
2.success
3.info 信息
4.warning 警告
5.danger 危险
6.text 文字按钮
登录
//弧度按钮
主要按钮
//圆角按钮
主要按钮
//自定义图标 圆形
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
}后台首页基本布局
Header 退出
Aside
Main
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-submenu 一级菜单
1. :index="item.id+''" 跳转的地址
2. v-for="item in menuList" 循环的数据
3. :key="item.id" 唯一的ID
{{item.authName}}
el-menu-item 二级菜单
1. :index="item.id+''" 跳转的地址
2. v-for="item in menuList" 循环的数据
3. :key="item.id" 唯一的ID
{{subItem.authName}}
el-breadcrumb 面包屑导航
1.el-breadcrumb-item 面包屑导航每一项
2. separator
3. :to="{ path: '/home' } 点击后跳转的地址
首页
用户管理
用户列表
el-card 卡片视图
1.el-row :gutter="20" 可以理解为div,卡片视图的每一行，里面每一小块的间隔是20
2.el-col :span="6" 每行中的每一个小块，每个小块占6个位置，总共最大24
添加用户
el-table 表格
1. :data="userList" 要设置的数据
2. border 有纵向边框
3. stripe 隔行变色
el-table-column 表格每行
1.type 类型，index表示下标值
2.label 绑定的名称
3.prop 绑定的数据名称
4.slot-scope="scope" 作用域插槽，接收作用域内的数据 scope.row为此行的数据
el-switch 选项按钮
Tooltip 文字提示
1.effect 提供的主题
2.content 显示的内容
3.placement 显示的位置
4. :enterable="false" 鼠标是否可进入到 tooltip 中，移开就会消失
el-pagination 分页器
1. @size-change(pagesize改变时触发)
2. @current-change(页码发生改变时触发)
3. :current-page(设置当前页码)
4. :page-size(设置每页的数据条数)
5. :total(设置总页数)
el-dialog 对话框组件
1. :visible.sync(设置是否显示对话框)
2. width(设置对话框的宽度)
3.@close 关闭事件
表单校验
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('退出成功！')
}