vuecomponent / ant-design-vue-pro

👨🏻‍💻👩🏻‍💻 Use Ant Design Vue like a Pro! (vue2)

English | 简体中文

Ant Design Vue Pro

An out-of-box UI solution for enterprise applications as a Vue boilerplate. based on Ant Design of Vue

• Preview: https://preview.pro.antdv.com
• Home Page: https://pro.antdv.com
• Documentation: https://pro.antdv.com/docs/getting-started
• ChangeLog: https://pro.antdv.com/docs/changelog
• FAQ: https://pro.antdv.com/docs/faq
• Vue3 ProLayout: https://github.com/vueComponent/pro-layout

Overview

Env and dependencies

• node
• yarn
• webpack
• eslint
• @vue/cli
• [email protected] - Ant Design Of Vue
• vue-cropper - Picture edit
• @antv/g2 - AntV G2
• Viser-vue - Antv/G2 of Vue

Note: Yarn package management is recommended, the exact same version loaded with the demo site of this project (yarn.lock) . but you can also use npm

Project setup

• Clone repo

git clone https://github.com/vueComponent/ant-design-vue-pro.git
cd ant-design-vue-pro

• Install dependencies

yarn install

• Compiles and hot-reloads for development

yarn run serve

• Compiles and minifies for production

yarn run build

• Lints and fixes files

yarn run lint

Other

• IMPORTANT : Issue feedback !! when opening Issue read Issue / PR Contributing

• Vue-cli3 used by the project.

• Disable Eslint (not recommended): remove eslintConfig field in package.json and vue.config.js field lintOnSave: false

• Load on Demand /src/main.js L14, in import './core/lazy_use', import './core/use''. more load-on-demand.md

• Customize Theme: Custom Theme Config (@kokoroli)

• I18n: locales (@musnow)

• Production env mock is disabled. use src/mock/index.js

• pls use release version

Browsers support

Modern browsers and IE10.

IE / Edge	Firefox	Chrome	Safari	Opera
IE10, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Contributors

This project exists thanks to all the people who contribute.

ant-design-vue-pro's Issues

请问下表单子页面提交的问题

请问下，列表打开的子页面的确定按钮的点击事件如何通用绑定，我连确定都看不到，肯定是封装了，只是不知道如何实现，麻烦告知下。

Easy-Mock service and www.easy-mock.com unavailable for many days.

mock data is down again with a 502. Perhaps consider a different or backup mocking approach? Any suggestions on how I can fake this out so I can bypass login?

$auth() 鉴权,判断好像有问题

按照原来的判断 没有起到作用，增加判断后可使用

error here

should be ' if (error.response.status === 403) { '

请教几个表单的问题

美女你好， 请教几个表单的问题：
1、标签无法格式化选中的日期，比如我需要的是“2019-01-10”,加上:format="dateFormat"只能控制页面上显示，无法控制提交后的结果，还是给我的 "2019-01-10T08:28:37.888Z"这种。
比如：
<a-form-item label="发布时间"> <a-date-picker v-model="queryParam.publishTime" name="publishTime" style="width: 100%" :format="dateFormat" /> </a-form-item>
2、绑定的值只能数字，中文汉字无效，纠结了半天，如果绑定了fieldDecoratorId，会导致vue加载单选框默认不选中，但是如果不给fieldDecoratorId，form就取不到值，原因未知。
比如：
<a-form-item label="性别" :labelCol="{lg: {span: 2}, sm: {span: 7}}" :wrapperCol="{lg: {span: 10}, sm: {span: 17} }" fieldDecoratorId="sex" :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择出生日期' }]}" > <a-radio-group v-model="sex"> <a-radio :value="1">男</a-radio> <a-radio :value="2">女</a-radio> </a-radio-group> </a-form-item>
3、标签的defaultValue="movie" 无效。
比如：
<a-form-item label="兴趣爱好" :labelCol="{lg: {span: 2}, sm: {span: 7}}" :wrapperCol="{lg: {span: 10}, sm: {span: 17} }" fieldDecoratorId="like" :fieldDecoratorOptions="{rules: [{ required: false, message: '请选择兴趣爱好' }]}" > <a-select defaultValue="movie"> <a-select-option value="game">游戏</a-select-option> <a-select-option value="movie">电影</a-select-option> <a-select-option value="lvyou">旅游</a-select-option> </a-select> </a-form-item>
请问你们也遇到了吗？

多页签模式怎么设置

这么优秀的项目怎么没人提issue

页面缩放后，confirm显示不正常

如题，当缩放页面宽度小于750px时

怎么支持IE呢？

您好，请问怎么支持IE？当前项目启动后，不能再IE10~11下运行

性能优化

问题：目前访问系统比较慢，通过浏览器观察发现运行时app.js达到了21M

建议：当前先对项目中需要用到的组件按需加载。

checkbox怎么停止事件冒泡？

无法阻止Collapse响应呢

固定Header 模式下，paddingLeft 错误计算

请问生产环境如何在线换肤

请问生产环境如何在线换肤？

配置栏只在开发环境用于预览，生产环境不会展现，请手动修改配置文件 src/defaultSettings.js

谢谢美女

右侧滚动条不太对劲的说？

灰色的滚动条连登陆页都有的说~

我修复了一个bug

你好，我修复了一个bug。
在分页列表非第一页的情况删除当前页面所有数据，会导致上一页显示无数据。

代码：
在src\components\table\index.js 115行加上
`

                if (r.data.length == 0 && that.localPagination.current != 1) {
                    that.localPagination.current--;
                    that.loadData();
                    return;
                }

`

Use new form

<template>
    <a-form @submit="handleSubmit" :form="form">
        <a-form-item
            label="标题"
            :labelCol="{lg: {span: 7}, sm: {span: 7}}"
            :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-input
                v-decorator="{
                    id: 'name',
                    options: {rules: [{ required: true, message: '请输入标题' }]}
                }"
                name="name"
                placeholder="给目标起个名字" />
        </a-form-item>

        <a-form-item
            label="起止日期"
            :labelCol="{lg: {span: 7}, sm: {span: 7}}"
            :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
            <a-range-picker
                name="buildTime"
                style="width: 100%"
                v-decorator="{
                    id: 'buildTime',
                    options: {rules: [{ required: true, message: '请选择起止日期' }]}
                }" />
        </a-form-item>
    </a-form>
</template>

<script>
  export default {
    data () {
      return {
        // form
        form: this.$form.createForm(this),
      }
    },
    methods: {
      // handler
      handleSubmit (e) {
        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (!err) {
            // eslint-disable-next-line no-console
            console.log('Received values of form: ', values)
          }
        })
      }
    }
  }
</script>

[email protected]

contentWidth: Fluid not work when layout is topmenu

when set the contentWidth to Fluid mode when layout is topmenu, but it seems still Fixed mode

菜单栏收缩显示不正常？

编译主题和消息提示重叠的问题？

启动后登陆无法跳转

登录页，输入用户名/密码无法跳转

页面缩放的问题

如上图如果缩小页面，则显示/隐藏菜单的按钮消失，正常应该如下图所示：

table请求2次接口

每次选择分页时，请求2次接口

开启固定侧边栏内容区域会被遮盖

如题，开启固定侧边栏内容区域会被遮盖。好项目，支持作者，辛苦了！

request.js 文件依赖import store from '@/store'，会导致编译循环依赖RangeError: Maximum call stack size exceeded

比如把这个import { getRoleList, getServiceList } from '@/api/manage' 放到任何一个vue文件引用，都会报错。

fixed header and main menu

Add fixed header and menu in setup menu

这个应该是一个判断吧？现在是赋值。

https://github.com/sendya/ant-design-pro-vue/blob/6de407cb91c6bfd2655d3234fee54a2a8eae454c/src/components/table/index.js#L116

请问您怎么解决defaultExpandAllRows这类无效的问题？

defaultExpandAllRows这类设置，只在第一次渲染时执行，异步请求数据导致无效了，请问您是怎么解决的？谢谢

文字错误

utils/helper/permission.js

'export': { key: 'import', label: '导入' }

应该是导出吧。

打包之后，启动不了。

npm run build之后， 打包之后的文件启动不了。

contentWidth: Fluid in mobile layout header margin-left

margin-left unset

header and sidebar

header under sidebar

i think this project the best of ant-design-pro clones.

build后的dist，我做了http-server后，无法正常运行

第一步都进不去，直接git的项目打包后，也是一样。是我这边的问题吗，我是php转的前端vue，可能比较小白，麻烦告知一下如何正确的操作，谢谢啊

这个项目，Header顶部菜单和左侧菜单默认是false，即不固定时是正常的，当Header顶部菜单或者左侧菜单固定时，就会出问题，内容区和顶部菜单的左边会被覆盖住。这个项目真心很不错，辛苦

这个项目，Header顶部菜单和左侧菜单默认是false，即不固定时是正常的，当Header顶部菜单或者左侧菜单固定时，就会出问题，内容区和顶部菜单的左边会被覆盖住。这个项目真心很不错，辛苦

固定侧边菜单 模式下，动态缩小浏览器大小会导致 paddingLeft 错误计算

sidebar

http://nimb.ws/pdLeK5

我在使用您这个项目时，发现了几个bug，可以留一下您的QQ联系方式吗?我的Q：207167808

我在使用您这个项目时，发现了几个bug，可以留一下您的QQ联系方式吗?我的Q：207167808

路由支持使用自定义的icon吗？

路由如何支持自定义的icon？

请问如何使用真实的后台api接口调试

刚接触vue不久，最近开始做一些练习。练习如何实现和真实后台api接口调试完成登录，也是花了几个小时的时间才搞懂一个叫vue-element-admin的登录模式。
回头看你这个大体上流程差不多，只是好几个地方实在是看不懂你这边的实现。话说ant design确实好看，所以还是想从这个项目去具体练习。
不知道是否可以讲解一下登录的实现原理，是否能提供一个交流沟通的地方方便求教！

mock数据不一致？

项目中使用的mock数据是https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro
如果直接切换成README.md中写的https://www.easy-mock.com/project/5b7bce071f130e5b7fe8cd7d则会提示错误
是否是实际使用的mock数据不一致？

login

after login not work redirect to dashboard
请求出现错误，请稍后再试
sometimes mock data unavailable

怎么设置一个一级菜单呢？

我想设置一个一级菜单，跳到一个PageView的页面。
但是把children都隐藏后，还是不行。。
最后我是另外又写了一个路由，把这个路由hidden,这个路由的children是我想跳的那个一级页面。
菜鸟问题。。

有考虑滑动验证码组件嘛？

copyright的显示不正常

首次进入界面时间太久了！

大佬， 首次进入界面虽然有加载动画， 可是感觉还是太久了。 可不可以修改成首次进入只加载菜单以及框架最外层的静态文件， 其他都等菜单和整体框框加载完毕， 再加载。

请问build以后发布路由访问的问题

美女你好：
请教一个build的问题，项目我build以后 发现访问首页 http://192.168.6.11:8011/index.html 没有问题，它后面跳转到路由地址也没有问题，比如 http://192.168.6.11:8011/dashboard/workplace ，但是如果F5刷新，或者get访问访问这个路由，浏览器就返回404了，我开始以为是服务器的问题，后来我用了IIS 和Tomcat都是一样的结果，请问你有遇到过吗？

PS：开发环境一点问题没有。

请问有计划出相关文档吗

sidebar can not shrink

sidebar can not shrink

dist

代码优化

https://github.com/sendya/ant-design-pro-vue/blob/db0ea064f086c56189c6e8a948f3badbee5130d4/src/views/user/Login.vue#L173

为什么这里要用 that 呢？好像项目中有很多地方都有这样用，建议优化一下代码

本地跑起来了， 但用admin登录的时候，progress bar走了很久，超过2分钟，才进入里面

暂时也没看代码，这是我clone之后遇到的第一个问题