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表單