项目地址

https://github.com/PanJiaChen/vue-admin-template

这是一个 极简的 vue admin 管理后台 它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。

• 在win环境下安装

• nodejs版本8.11.3

# Clone project
#生成vue-admin-template目录
git clone https://github.com/PanJiaChen/vue-admin-template.git

Install dependencies

#先进入vue-admin-template目录
#命令会生成node_modules目录，所有依赖都在其中
#如果安装失败，删除node_modules目录，重新安装依赖
npm install

Serve with hot reload at localhost:9528

npm run dev

Build for production with minification

npm run build

Build for production and view the bundle analyzer report

npm run build --report

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API: '"http://127.0.0.1:8008/"',
})
#在config里有dev环境配置和prod环境配置
#将dev的BASE_API设定为后台的API地址，这样vue就能访问后端API数据了
#由于是跨域访问，所以在后台需要添加跨域访问的功能

import request from '@/utils/request'

export function getMofangMailList() {
return request({
url: 'GameGroup/',
method: 'get'
})
}
#在src/api目录下建立mofang.js文件
#创建getMofangMailList方法
#url和config里的BASE_API拼接后就是API的请求地址
#使用get方法获取数据

{
path: '/mofang',
component: Layout,
children: [{
path: '',
name: 'Gamegroup',
component: () => import('@/views/mofang/index'),
meta: { title: 'Gamegroup', icon: 'example' }
}]
},
#添加一条路由信息

#created()方法在dom的生命周期内执行，调用this.fetchData()
#fetchData()中，执行getMofangMailList方法
#在api中，使用get方法向api地址请求数据并return
#使用then方法，return的数据传参给response
#把response 的数据赋值给this.tableData
#this.tableData渲染到dom表单