项目地址
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:9528npm run dev# Build for production with minificationnpm run build# Build for production and view the bundle analyzer reportnpm run build --report
config/dev.env.js
'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数据了#由于是跨域访问，所以在后台需要添加跨域访问的功能
src/api/mofang.js
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方法获取数据
router/index.js
{ path: '/mofang', component: Layout, children: [{ path: '', name: 'Gamegroup', component: () => import('@/views/mofang/index'), meta: { title: 'Gamegroup', icon: 'example' } }] },#添加一条路由信息
src/views/mofang/index.vue
#created()方法在dom的生命周期内执行，调用this.fetchData()#fetchData()中，执行getMofangMailList方法#在api中，使用get方法向api地址请求数据并return#使用then方法，return的数据传参给response #把response 的数据赋值给this.tableData#this.tableData渲染到dom表单