ant-design-pro-vue修改指南🛠

前一段时间用ant design pro of vue写了俩系统，趁着自己还记得怎么改的，记录一下。

登录框系列

系列文件📃在 src/views/user下，因为没有复用很多组件（不像ant design pro😭），

直接修改这三个组件即可😊。

ps:不过这里把请求封装了，而且设计动态权限路由渲染那一套，建议改改形式就好了，其他的谨慎修改。⛏

动态路由系列

系列文件📃在 src/config/router.config.js,此处涉及动态路由列表渲染的具体情况，包括url，列表项名称，page名称等。

例子：

// forms
{
    path: '/index',
    redirect: '/index/welcome',
    component: RouteView,
    meta: { title: '主页', icon: 'form', permission: [ 'form' ] },
    children: [
        {
        path: '/index/welcome',
        name: 'welcome',
        component: () => import('@/views/form/BasicForm'),
        meta: { title: '欢迎页', keepAlive: true, permission: [ 'form' ] }
        }
    ]
},

说明：此处路由由forms修改而来，权限列表依旧为form，page名称为主页或者欢迎页。path指的是路由，compont指对应vue组件。🔧

跨域篇

对应文件📃在vue.config.js,把proxy修改到对应后端端口即可。

//此处代码位于vue.config.js 87行
devServer: {
    // development server port 8000
    port: 8000,
    // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
    proxy: {
      '/api/*': {
        target:'http://localhost:3000',
        // target:'http://202.206.212.212:9000',
        changeOrigin: true
      }
    }
  },

ant组件使用篇

官网地址： ant design vue

在ant design pro vue 中使用方式：

按需加载在src/core/lazy_lib/components_use.js

//使用示例
import {
  Carousel
} from 'ant-design-vue'
Vue.use(Carousel)

文件其余部分不动即可，然后就可以直接使用。

上文中我们引入了Carousel，使用时，我们需要用 a-carousel

<a-carousel 
    arrows 
    autoplay
    >
    <div
      slot="prevArrow"
      class="custom-slick-arrow"
      style="left: 10px;zIndex: 1"
    >
      <a-icon type="left-circle" />
    </div>
    <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
      <a-icon type="right-circle" />
    </div>
    <div><h3>重要通知：xxxx新书到啦</h3></div>
    <div><h3>老师给个优吧！</h3></div>
    <div><h3>不看错亿呀！图书馆使用指南</h3></div>
  </a-carousel>

取消mock篇

使用 ant design pro vue时，请求会被mock全部拦截😢

取消其实也简单，Mock 在 main.js 中经行引入，你可以查看该文件的源代码，并找到 import './mock' 这样的代码。（去除它可完整的将项目中的 mock 拦截去除）

请求发送篇

别问，问就是axios😊

本来项目就有用，只是它又给再封装📦了一层。

使用很简单，引入，然后直接使用即可。

<script>
import axios from 'axios'
methods: {
    getData () {
        axios.post('/api/admin/salary', {
        params: {
            'username': this.$store.getters.userInfo.roleId
        }
        }).then(result => {
        console.log(result.data.data)
        this.dataSource = result.data.data
        for (let i = 0, len = this.dataSource.length; i < len; i++) {
            this.dataSource[i].key = i
        }
        })
    },
</script>

vue基础篇

可能使用到的vue的一些基础属性📖

mountd 生命周期钩子函数的一个
computed 计算属性
data 使用的必须为返回值
components 使用的组件

其余具体的 ant 组件相关配置见 ant design 组件库

heihei12305