vue教程4-vueadmin上手

红太狼 2021-12-17 07:17 282阅读 0赞

项目地址

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

转载于:https://www.cnblogs.com/jabbok/p/10716943.html