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

男娘i 2023-06-29 02:16 14阅读 0赞

效果图  
![在这里插入图片描述][20200109184946382.gif]  
1.首先创建一个项目  
[https://cli.vuejs.org/zh/guide/creating-a-project.html][https_cli.vuejs.org_zh_guide_creating-a-project.html]  
2.引入antd  
[https://www.antdv.com/docs/vue/introduce-cn/][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

<template>
      <a-layout id="components-layout-demo-custom-trigger">
        <a-layout-sider :trigger="null" collapsible v-model="collapsed">
          <div class="logo" > 
            <img src="./assets/rigangLogo.png" style="width:100%"/>
          </div>
          <a-menu 
          theme="dark" 
          mode="inline" 
          :SelectedKeys="[$route.path]"
          >
            <a-menu-item :key="'/equipStatus'">
              <router-link to="/equipStatus">
                <a-icon type="api" />
                <span>一体机状态查询</span>
              </router-link>
            </a-menu-item>
            <a-menu-item :key="'/equipReprint'">
              <router-link to="/equipReprint">
                <a-icon type="upload" />
                <span>二次打印申请</span>
              </router-link>
            </a-menu-item>
            <a-menu-item :key="'/equipFault'">
              <router-link to="/equipFault">
                <a-icon type="tool" />
                <span>故障报修</span>
              </router-link>
            </a-menu-item>
            <a-menu-item :key="'/historyQuery'">
              <router-link to="/historyQuery">
                <a-icon type="profile" />
                <span>历史查询</span>
              </router-link>
            </a-menu-item>
            <a-menu-item :key="'/queryMonitor'">
              <router-link to="/queryMonitor">
                <a-icon type="picture" />
                <span>监控查询</span>
              </router-link>
            </a-menu-item>
            <a-menu-item :key="'/paramConfig'">
              <router-link to="/paramConfig">
                <a-icon type="setting" />
                <span>参数配置</span>
              </router-link>
            </a-menu-item>
            <a-menu-item :key="'/user'">
              <router-link to="/user">
                <a-icon type="user" />
                <span>角色管理</span>
              </router-link>
            </a-menu-item>
          </a-menu>
        </a-layout-sider>
        <a-layout>
          <a-layout-header style="background: #fff; padding: 0">
            <a-icon
              class="trigger"
              :type="collapsed ? 'menu-unfold' : 'menu-fold'"
              @click="()=> collapsed = !collapsed"
            />
            <a-button type="danger" style="position:absolute;top:5px;right:5px">退出登录</a-button>
          </a-layout-header>
          <a-layout-content
            :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
          >
            
            <router-view />
          </a-layout-content>
        </a-layout>
      </a-layout>
    </template>
    
    
    <script>
    export default {
      data() {
        return {
          collapsed: false
        };
      }
    };
    </script>
    <style>
    #components-layout-demo-custom-trigger .trigger {
      font-size: 18px;
      line-height: 64px;
      padding: 0 24px;
      cursor: pointer;
      transition: color 0.3s;
    }
    
    #components-layout-demo-custom-trigger .trigger:hover {
      color: #1890ff;
    }
    
    #components-layout-demo-custom-trigger .logo {
      height: 32px;
      background: white;
      margin: 16px;
    }
    .ant-layout.ant-layout-has-sider {
      height: 100%;
    }
    </style>

[20200109184946382.gif]: https://img-blog.csdnimg.cn/20200109184946382.gif
[https_cli.vuejs.org_zh_guide_creating-a-project.html]: https://cli.vuejs.org/zh/guide/creating-a-project.html
[https_www.antdv.com_docs_vue_introduce-cn]: https://www.antdv.com/docs/vue/introduce-cn/