npm i element-ui -S

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';//樣式文件一定要引入

Vue.use(ElementUI)

  
  
   
    
     
姓名: {{ scope.row.name }}
     
住址: {{ scope.row.address }}
     
      {{ scope.row.name }}
     

5.router/index.js配置如下

import Vue from 'vue'
import VueRouter from 'vue-router'
//導入組件
import List from '../views/main/List.vue'

Vue.use(VueRouter)

const routes = [
 {
  path: '/',
  name: 'List',
  component: List
 },

]

const router = new VueRouter({
 routes
})

export default router

現(xiàn)在的網(wǎng)頁顯示效果如下

5. 安裝mockjs 和axios

npm install --save-dev mockjs
npm install --save axios

6.新建api/getData.js和request.js

request.js

import axios from 'axios'
const service = axios.create({
  baseURL : "http://localhost:8080",
})
export default service

getData.js

import axios from '../request'
//數(shù)據(jù)列表接口
export const getList = () => axios.get("/list")

7.在src下新建mock/mockServer.js

import Mock from 'mockjs'
//import data from './data.json'

Mock.mock('http://localhost:8080/list', {
  code: 0, data:
  {
    'data|1000': [
      {  
        id: '@id',//隨機id
        name: '@name',//隨機名稱
        nickName: '@last',//隨機昵稱
        phone: /^1[34578]\d{9}$/,//隨機電話號碼
        'age|11-99': 1,//年齡
        address: '@county(true)',//隨機地址
        email: '@email',//隨機郵箱
        isMale: '@boolean',//隨機性別
        createTime: '@datetime',//創(chuàng)建時間
        avatar() {
          //用戶頭像
          return Mock.Random.image('100×100', Mock.Random.color(), '#757575', 'png', this.nickName)
        }
      }
    ]
  }

})

8.在main.js中導入mockServer

import './mock/mockServer'

9.修改src/views/main/List.vue（數(shù)據(jù)獲取與綁定，設(shè)置表格居中）

   
   
    
     
      
姓名: {{ scope.row.name }}
      
住址: {{ scope.row.address }}
      
       {{ scope.row.name }}