vuecli4+ant-degin搭建后台管理项目

1.为了可以快速搭建项目可以使用淘宝镜像全局安装

npm install cnpm -g --registry=http://registry.npm.taobao.org

2.查看自己是不是vuecli2的，如果是则需要删除

vue --version

3.输入命令创建项目

vue create text-project

4.按上下键选择Manually select features（手动选择功能）项,default (babel, eslint)（默认安装）
5.安装antd-vue件库

cnpm i ant-design-vue

6.main文件引入antd-vue

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

Vue.config.productionTip = false;

Vue.use(Antd);

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

使用babel-plugin-import用于按需加载组件代码和样式的babel插件

cnpm install babel-plugin-import --dev

修改babel.config文件，配置babel-plugin-import

 module.exports = {
  presets: ["@vue/app"],
  plugins: [
    [
      "import",
      { libraryName: "ant-design-vue", libraryDirectory: "es", style: 'css' }
    ]
  ]
};

如果出现less问题
在vue.config.js配置

 module.exports = {
    css: {
    	loaderOptions:{
    		less:{
    			javascriptEnabled:true,
            }
        }
    }
}

路由
1.在src/router/index,js配置路由，大致路由结构

{
	import Vue from 'vue'
	import VueRouter from 'vue-router'
	Vue.use(vueRouter)
	import Home from '地址'
	import About from '地址'
	import Nex from '地址'
	const routes =[
		{
			path:'/',
			name:'home',
			component:Home,
			
		},
		{
			path:'/about',
			name:'About',
			component:About，
			children:{
				path:'/nex',
				name:'Nex',
				component:Nex
			}
		}
	]
}

利用配置路由的meta对象的keepalive属性值来区分页面是否需要缓存,有些children的需要后续判断
2.在App.vue中

<router-view></router-view>

3.创建Home基础页面布局,包含头部导航，侧边栏，内容部分,利用antd官网找到layout布局组件，找到类似的模板

<template>
  <a-layout id="components-layout-demo-top-side-2">
    <a-layout-header class="header">
      <div class="logo" />
      <Header/>
    </a-layout-header>
    <a-layout>
      <a-layout-sider width="200" style="background: #fff">
       	<Sider/>
      </a-layout-sider>
      <a-layout style="padding: 0 24px 24px">
        <a-breadcrumb style="margin: 16px 0">
          <Bread/>
        </a-breadcrumb>
        <a-layout-content
          :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
        >
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
import Header from '地址'
import Bread from '地址'
import Sider from '地址'
export default {
  data() {
    return {
      collapsed: false,
    };
  },
  components:{
  	Header,
  	Bread,
  	Sider
  }
};
</script>

<style>
#components-layout-demo-top-side-2 .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 28px 16px 0;
  float: left;
}
</style>

菜单切换与antd 中的差异需要自己改动
menu.vue

	<a-menu
        theme="dark"
        mode="horizontal"
        :default-selected-keys="['2']"
        :style="{ lineHeight: '64px' }"
      >
         <template v-for="item in list">
        <a-menu-item
          v-if="!item.children"
          :key="item.path"
          @click="() => $router.push({ path: item.path, query: $route.query })"
        >
         <a-icon v-if="item.meta.icon" :type="item.meta.icon" />
          <span>{{ item.meta.title }}</span>
         </a-menu-item>
      </template>
     </a-menu>
 watch: {
    "$route.path": function(val) {
      this.selectedKeys = this.selectedKeysMap[val];
      this.openKeys = this.collapsed ? [] : this.openKeysMap[val];
    },
    collapsed(val) {
      if (val) {
        this.cacheOpenKeys = this.openKeys;
        this.openKeys = [];
      } else {
        this.openKeys = this.cacheOpenKeys;
      }
    }
  },
  data() {
    this.selectedKeysMap = {};
    this.openKeysMap = {};
    const menuData = this.getMenuData(this.$router.options.routes);
    return {
      menuData,
      selectedKeys: this.selectedKeysMap[this.$route.path],
      openKeys: this.collapsed ? [] : this.openKeysMap[this.$route.path]
    };
  },
  methods: {
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
    getMenuData(routes = [], parentKeys = [], selectedKey) {
      const menuData = [];
      for (let item of routes) {
        if (item.name && !item.hideInMenu) {
          this.openKeysMap[item.path] = parentKeys;
          this.selectedKeysMap[item.path] = [selectedKey || item.path];
          const newItem = { ...item };
          delete newItem.children;
          if (item.children && !item.hideChildrenInMenu) {
            newItem.children = this.getMenuData(item.children, [
              ...parentKeys,
              item.path
            ]);
          } else {
            this.getMenuData(
              item.children,
              selectedKey ? parentKeys : [...parentKeys, item.path],
              selectedKey || item.path
            );
          }
          menuData.push(newItem);
        } else if (
          !item.hideInMenu &&
          !item.hideChildrenInMenu &&
          item.children
        ) {
          menuData.push(
            ...this.getMenuData(item.children, [...parentKeys, item.path])
          );
        }
      }
      return menuData;
    }
}
 

大概就是通过判断路由是否存在meta对象的keepalive属性值来区分页面是否需要缓存,判断是否存在子路由将其显示出来

创建page/index/index.vue用于显示数据

<template>
  <a-table :row-selection="rowSelection" :columns="columns" :data-source="data" 
  :pagination = 'pagination' @change="changePage">
    <a slot="name" slot-scope="text">{{ text }}</a>
  </a-table>
</template>
<script>
import {getDataApi} from '到axios的地址名'
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key:'Name'
    scopedSlots: { customRender: 'name' },
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key:'Age'
    scopedSlots: { customRender: 'age' },
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key:'Address'
    scopedSlots: { customRender: 'address' },
  },
];


export default {
  data() {
    return {
      data:[],
      current:1,
        pagination: {
          defaultPageSize:5,
          defaultCurrent:1,
          pageSize: 5, // 默认每页显示数量
          showSizeChanger: true, // 显示可改变每页数量
          pageSizeOptions: ['5','10', '15'], // 每页数量选项
          showTotal: total => `Total ${total} items`, // 显示总数
          showSizeChange: (current, pageSize) => this.pageSize = pageSize, // 改变每页数量时更新显示
        },
      columns,
    };
  },
  mounted(){
  this.changePage()
  // this.interval = setInterval(() => {
     // this.changePage()
   // }, 3000);
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
       }
     },
     methods:{
     	changePage(){
     		const param = {
               page:this.page,
               pageSize:this.pageSize,
               search: this.search
            }
     		getDataApi(param).then(res =>{
     			console.log(res)
     			if(res.code == 200){
     			this.data = res.data.rows;
     			const Ipage = {...this.pagination}
     			Ipage.total = res.data.total;
     			Ipage.pageSize = pagination.pageSoze
     			Ipage.current = this.current==null?1:this.current;
            this.pagination = Ipage;
            }
     		})
     	}
     }
    }
  }

api

import request from '../utils/request'


//首页请求
export function getDataApi(params){
    return request({
        url:'/getIndex',
        method:'get',
        params:params
    })
}

mock

import mock from 'mockjs'
import indexJSon from './index.json'


mock.setup({
    timeout:300-600
})
//首页的数据
mock.mock(/\/getIndex/,'get',indexJSon)

json自己写

util/request.js

import axios from 'axios'

let server = axios.create({
    baseUrl:'http://loaclhost:8080',
    setTimeout:5000
})
//请求拦截器
server.interceptors.request.use(config =>{
    return config
})

//响应拦截器
server.interceptors.response.use(response =>{
   //1.非200响应
   //2.token过期
   //3.异地登陆
   //4.非对象加密的解密
   return response.data
})

export default server

其他页面类似

bug解决：
1.
原因：忘了原因
解决方法：U盘格式化时系统文件NTS
2.出现Less没有安装导致报错提示没有安装less
3.使用babel-plugin-import插件，官网代码有问题
正确添加代码，在style:true改成style:‘css’

plugins: [
    [
      "import",
      { libraryName: "ant-design-vue", libraryDirectory: "es", style: 'css' }
    ]
  ]