Ant Design vue版本 ant design pro of vue

转载

mob64ca14101b2f 2024-04-26 11:08:13

文章标签 Ant Design vue版本 vue Vue 数据 css 文章分类 架构后端开发

Ant Design Pro of Vue——蚂蚁金服中后台系统框架搭建

Ant Design Pro of Vue下载安装启动步骤：

一、Ant Design Pro of Vue 的介绍

Ant Design Pro 是一个企业级中后台前端/设计解决方案，我们秉承 Ant Design 的设计价值观，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。

因为Ant Design Pro of Vue是基于Ant Design Vue的，在使用过程中，感觉相较于 elementUI 来说，组件会更丰富一点，总体来说是很不错的。下面我给几个链接，并展示几张界面图，组件图等看一下。

Vue.js:https:/// Ant Design of Vue:https://vue.ant.design Ant Design Pro of Vue:https:///

二、图例

Ant Design Vue 组件图：目前一共有55个组件，非常丰富。

Ant Design vue版本 ant design pro of vue_数据

Ant Design Pro of Vue也提供了一些专用组件，可以自行选择：

Ant Design vue版本 ant design pro of vue_数据_02

Ant Design Pro of Vue的部分界面图：

Ant Design vue版本 ant design pro of vue_Vue_03

Ant Design vue版本 ant design pro of vue_Vue_04

Ant Design vue版本 ant design pro of vue_Ant Design vue版本_05

Ant Design vue版本 ant design pro of vue_数据_06

看起来还是很漂亮的，右侧边的齿轮按钮是一个自定义功能，可以更换背景，样式等等。你可以根据自己的项目和业务需求快速的开发出一套完整的中后台项目。

权限路由控制流程

Ant Design vue版本 ant design pro of vue_Ant Design vue版本_07

二、安装环境和依赖

node
yarn
webpack
eslint
@vue/cli 3.2.1
ant-design-vue - Ant Design Of Vue 实现
vue-cropper - 头像裁剪组件
@antv/g2 - Alipay AntV 数据可视化图表
Viser-vue - antv/g2 封装实现请注意，我们强烈建议本项目使用 Yarn 包管理工具，这样可以与本项目演示站所加载完全相同的依赖版本 (yarn.lock) 。由于我们没有对依赖进行强制的版本控制，采用非 yarn 包管理进行引入时，可能由于 Pro 所依赖的库已经升级版本，而引入了新版本所照成的问题。本作者可能会由于时间问题无法及时排查而导致您采用本项目作为基项目而出现问题。

三、项目下载和运行

拉取项目代码

git clone https:///sendya/ant-design-pro-vue.git
cd ant-design-pro-vue

安装依赖

yarn install

开发模式运行

yarn run serve

编译项目

yarn run build

Lints and fixes files

yarn run lint

四、其他说明

关闭 Eslint (不推荐) 移除 package.json 中 eslintConfig 整个节点代码
项目使用了在线 mock，easy-mock 项目所用的 mock 数据点击查看(请勿改动接口返回数据)，也可以下载 ANTD-PRO-Easy-Mock-API.zip 然后自行导入到自己的 mock 服务上
修改 Ant Design 配色，在文件 vue.config.js 中，其他 less 变量覆盖参考 ant design 官方说明

css: {
    loaderOptions: {
      less: {
        modifyVars: {
          /* less 变量覆盖，用于自定义 ant design 主题 */

          'primary-color': '#F5222D',
          'link-color': '#F5222D',
          'border-radius-base': '4px',
        },
        javascriptEnabled: true,
      }
    }
  }