Vue 使用Ant Design 主题 以及 MockJs的使

1、使用命令安装antd的vue库
npm install ant-design-vue --save-dev
npm install axios mockjs --save-dev
2、在main文件中添加antd的全局引入 以及 mockjs 自定义配置引入

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
// 全局配置
import http from '@/api/config'
import './mock'

// 第三方包
Vue.prototype.$http = http
Vue.config.productionTip = false
Vue.use(Antd)

3. 新建 axios 配置 src/api/config.js

import axios from 'axios'

// 创建一个axios实例
const service = axios.create({
  // 请求超时配置
  timeout: 3000

})

// 添加请求拦截器 
service.interceptors.request.use(
  config => {
    return config
  },
  err => {
    console.log(err)
  }
)
// 添加响应拦截器
service.interceptors.response.use(
  response => {
    let res = {}
    res.status = response.status
    res.data = response.data
    return res
  },
  err => {
    console.log(err)
  }
)

// 请求拦截器
service.interceptors.request.use(config => {
  const token = '123456'
  // 判断是否存在token，如果存在的话，则每个http header都加上token
  if (token) {
    config.headers.accessToken = token
  }
  return config
},
error => {
  return Promise.reject(error)
})

export default service

4. 新建Mock 配置 src/mock/index.js

// 首先引入Mock
const Mock = require('mockjs')

// 设置拦截ajax请求的相应时间
Mock.setup({
  timeout: '200-600'
})

let configArray = []

// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/)
files.keys().forEach((key) => {
  if (key === './index.js') return
  configArray = configArray.concat(files(key).default)
})

// 注册所有的mock服务
configArray.forEach((item) => {
  for (let [path, target] of Object.entries(item)) {
    let protocol = path.split('|')
    Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target)
  }
})

5. 新建 Mock 数据 src/mock/demoList.js

let demoList = {
  status: 200,
  message: 'mock成功了',
  data: {
    total: 100,
    'rows|10': [{
      id: '@guid',
      name: '@cname',
      'age|20-30': 23,
      'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']
    }]
  }
}
export default {
  'get|/parameter/query': demoList
}

6. 新建 vue 创建第一个页面 components/DemoAntd.vue

<template>
  <a-layout id="components-layout-demo-top" class="layout">
    <a-layout-header>
      <div class="logo" />
      <a-menu theme="dark" mode="horizontal" :defaultSelectedKeys="['2']" :style="{ lineHeight: '64px' }">
        <a-menu-item key="1">nav 1</a-menu-item>
        <a-menu-item key="2">nav 2</a-menu-item>
        <a-menu-item key="3">nav 3</a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout-content style="padding: 0 50px">
      <a-breadcrumb style="margin: 16px 0">
        <a-breadcrumb-item>Home</a-breadcrumb-item>
        <a-breadcrumb-item>List</a-breadcrumb-item>
        <a-breadcrumb-item>App</a-breadcrumb-item>
      </a-breadcrumb>
      <div :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">
        Content
        <a-button type="primary" @click="onclick()"> 点我试试 </a-button>
      </div>
    </a-layout-content>
    <a-layout-footer style="text-align: center">Ant Design ©2018 Created by Ant UED</a-layout-footer>
  </a-layout>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    onclick () {
      console.log(123)
      this.$http.get('/parameter/query').then((res) => {
        console.log(res)
        this.$notification.open({
          message: res.data.message,
          description:
            '这是通知的内容。这是通知的内容。这是通知的内容。',
          onClick: () => {
            console.log('Notification Clicked!')
          }
        })
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
</style>

7. 添加路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import DemoAntd from '@/components/DemoAntd'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/demo',
      name: 'DemoAntd',
      component: DemoAntd
    }
  ]
})

8. 访问http://127.0.0.1:8080/#/demo
   image.png