项目笔记9：vue-admin-template框架使用

流程：

1、现在rooter下的index.js添加路由，比如页面左侧菜单栏

2、在index.js文件中，添加路由对应的界面，界面在view-tree下创建（index.vue）

路由关联界面代码：

component: () => import('@/views/login/index')

3、在api下创建js，定义接口地址和参数：

import request from '@/utils/request'

export function login(username, password) {
  return request({
    url: '/eduservice/user/login',
    method: 'post',
    data: {
      username,
      password
    }
  })
}

4、在创建的vue页面中引入js文件，调用方法实现功能，最后使用element-ui显示数据内容

data用于定义变量和初始值，created页面渲染之前执行，一般调用methods定义方法，methods创建具体的方法，调用api中js定义的方法

import { isvalidUsername } from '@/utils/validate'

讲师列表示例:

 

注：

element-ui中

：表示v-bind 单项绑定

@表示v-on 事件绑定