Vue学习记录-创建一个传统的后台管理系统的界面(antd+vue)

效果图

1.首先创建一个项目
https://cli.vuejs.org/zh/guide/creating-a-project.html
2.引入antd
https://www.antdv.com/docs/vue/introduce-cn/
3.配置路由
main.js

import Vue from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import App from './App';
import router from './router'
import Router from 'vue-router' 
import axios from 'axios'



Vue.use(Router);
Vue.use(Antd);
Vue.prototype.$axios = axios
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router,
}).$mount("#app");

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/App' // 主页
import login from '@/views/login'
import historyQuery from '@/views/historyQuery'
import paramConfig from '@/views/paramConfig'
import queryMonitor from '@/views/queryMonitor'
import equipFault from '@/views/equipFault'
import equipReprint from '@/views/equipReprint'
import equipStatus from '@/views/equipStatus'
import user from '@/views/user'


export default new Router({
  routes :[
    {
      path: "/",
      name: "Home",
      components: Home
    },
    {
      path: "/historyQuery",
      name: "historyQuery",
      component: historyQuery
    },
    {
      path: "/paramConfig",
      name: "paramConfig",
      component: paramConfig
    },
    {
      path: "/queryMonitor",
      name: "queryMonitor",
      component: queryMonitor
    },
    {
      path: "/equipFault",
      name: "equipFault",
      component: equipFault
    },
    {
      path: "/equipReprint",
      name: "equipReprint",
      component: equipReprint
    },
    {
      path: "/equipStatus",
      name: "equipStatus",
      component: equipStatus
    },
    {
      path: "/login",
      name: "login",
      component: login
    },
    {
      path: "/user",
      name: "user",
      component: user
    }
  ]
  
})

Vue.use(Router)

App.vue