vue教程4-vueadmin上手

项目地址

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

　　

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

<template>
  <div class="dashboard-container">
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"/>
      <el-table-column
        prop="name"
        label="名称"/>
      <el-table-column
        prop="mail"
        label="邮箱"/>
    </el-table>
  </div>
</template>

<script>
import { getMofangMailList } from '@/api/mofang'
export default {
  data() {
    return {
      tableData: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getMofangMailList().then(response => {
        this.tableData = response
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
</style>
#created()方法在dom的生命周期内执行，调用this.fetchData()
#fetchData()中，执行getMofangMailList方法
#在api中，使用get方法向api地址请求数据并return
#使用then方法，return的数据传参给response 
#把response 的数据赋值给this.tableData
#this.tableData渲染到dom表单