官网

Element - The world's most popular Vue UI framework

 下载安装

npm install --save element-ui

A.完整引用

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 -D

7.更改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(设置对话框的宽度)

3.@close 关闭事件

<!-- 对话框组件  :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('退出成功！')
	     
	    }