手把手教你寫第一個vue-element-admin頁面

# 克隆專案
git clone https://github.com/PanJiaChen/vue-element-admin.git

# 安裝依賴
npm install

# 建議不要用cnpm安裝 會有各種詭異的bug 可以通過如下操作解決 npm 下載速度慢的問題
npm install --registry=https://registry.npm.taobao.org

# 啟動服務
npm run dev

開啟src/router/index

1新增路由

  {
    path: '',
    component
 
: Layout,
    redirect: 'wanzi',
    children: [{
      path: 'wanzi',
      component: () => import('@/views/wanzi/index'),
      name: 'wanzi',
      meta: { title: 'wanzi', icon: 'dashboard', noCache: true }
    }]
  },

2，開啟src/views
在views下建立資料夾wanzi，裡面新建index.vue
建好的路徑為src/views/wanzi/index.vue

<template>
  <div class="dashboard-editor-container">
    <github-corner></github-corner>
    <!-- <div class=" clearfix">
      <pan-thumb style="float: left" :image="avatar"> Your roles:
        <span class="pan-info-roles" :key='item' v-for="item in roles">
 
{{item}}</span>
      </pan-thumb>
      <github-corner></github-corner>
      <div class="info-container">
        <span class="display_name">{{name}}</span>
        <span style="font-size:20px;padding-top:20px;display:inline-block;">wanzi : dashboard</span>
      </div>
    </div>
    <div>
      <img class="emptyGif" :src="emptyGif">
    </div> -->
    <el-table :data="tableData" style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
      <el-table-column prop="date" label="日期" sortable width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" sortable width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址" :formatter="formatter">
      </el-table-column>
    </el-table>

    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="活動名稱">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="活動區域">
        <el-select v-model="form.region" placeholder="請選擇活動區域">
          <el-option label="區域一" value="shanghai"></el-option>
          <el-option label="區域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活動時間">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="選擇日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-time-picker type="fixed-time" placeholder="選擇時間" v-model="form.date2" style="width: 100%;"></el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="即時配送">
        <el-switch v-model="form.delivery"></el-switch>
      </el-form-item>
      <el-form-item label="活動性質">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox>
          <el-checkbox label="地推活動" name="type"></el-checkbox>
          <el-checkbox label="線下主題活動" name="type"></el-checkbox>
          <el-checkbox label="單純品牌曝光" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="特殊資源">
        <el-radio-group v-model="form.resource">
          <el-radio label="線上品牌商贊助"></el-radio>
          <el-radio label="線下場地免費"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="活動形式">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即建立</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
import { mapGetters } from "vuex";
import PanThumb from "@/components/PanThumb";
import GithubCorner from "@/components/GithubCorner";
import { fetchList } from "@/api/wanzi";

export default {
  name: "dashboard-editor",
  components: { PanThumb, GithubCorner },
  data() {
    return {
      emptyGif:
        "https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      tableData: []
    };
  },
  computed: {
    ...mapGetters(["name", "avatar", "roles"])
  },
  created() {
    this.fetchData();
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    formatter(row, column) {
      return row.address;
    },
    fetchData() {
      fetchList().then(response => {
        this.tableData = response.data.items.slice(0, 8);
      });
      console.log(this.tableData);
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.emptyGif {
  display: block;
  width: 45%;
  margin: 0 auto;
}

.dashboard-editor-container {
  background-color: #e3e3e3;
  min-height: 100vh;
  padding: 50px 60px 0px;
  .pan-info-roles {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    display: block;
  }
  .info-container {
    position: relative;
    margin-left: 190px;
    height: 150px;
    line-height: 200px;
    .display_name {
      font-size: 48px;
      line-height: 48px;
      color: #212121;
      position: absolute;
      top: 25px;
    }
  }
}
</style>

3，新增mock資料，我們的table裡面使用的是mock資料
在src/mock裡面新建檔案wanzi.js

import Mock from 'mockjs'

const List = []
const count = 20

for (let i = 0; i < count; i++) {
  List.push(Mock.mock({
    date: Mock.Random.date('yyyy-MM-dd'),
    order_no: '@guid()',
    timestamp: +Mock.Random.date('T'),
    address: 'aaaaaa',
    name: '@name()',
    price: '@float(1000, 15000, 0, 2)',
    'status|1': ['success', 'pending']
  }))
}

export default {
  getList: () => {
    return {
      total: List.length,
      items: List
    }
  }
}

4，在src/api裡面新建wanzi.js

import request from '@/utils/request'

export function fetchList(query) {
  return request({
    url: '/wanzi/list',
    method: 'get',
    params: query
  })
}

5。在src/mock/index.js裡面新增

// 丸子
Mock.mock(/\/wanzi\/list/, 'get', wanziAPI.getList)

這個時候重新整理看看效果吧~