vue-antd-admin使用体验(一) 概述

一. vue-antd-admin简介

Vue Antd Admin是Ant Design Pro 的 Vue 实现版本, 是开箱即用的中后台前端/设计解决方案.

• 技术栈基于 ES2015+、Vue、Antd
• 你的本地环境需要安装npm、node 和 git

官方网站: https://iczer.gitee.io/vue-antd-admin-docs/
官方文档: https://iczer.gitee.io/vue-antd-admin-docs/start/use.html
其基于的ant design for vue: https://www.antdv.com/docs/vue/introduce-cn/

二. git拉取vue-antd-admin

git clone https://gitee.com/iczer/vue-antd-admin.git

下载完成后先安装模块

npm install

安装完成后启动项目

npm run serve

之后我们访问 : http://localhost:8080/ 即可看到这个项目

三. 项目结构:

├── docs                     # 使用文档
├── public
│   └── favicon.png          # favicon
│   └── index.html           # 入口 HTML
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 内置通用组件
│   ├── config               # 系统配置
│   ├── layouts              # 通用布局
│   ├── mock                 # 本地 mock 数据
│   ├── pages                # 页面组件和通用模板
│   ├── plugins              # vue 插件
│   ├── router               # 路由配置
│   ├── services             # 数据服务模块
│   ├── store                # vuex 状态管理配置
│   ├── theme                # 主题相关
│   ├── utils                # js 工具
│   ├── App.vue              # 应用入口组件
│   ├── bootstrap.js         # 应用启动引导js
│   └── main.js              # 应用入口js
├── package.json             # package.json
├── README.md                # README.md
└── vue.config.js            # vue 配置文件

在项目结构种注意:

• 抽离了使用过程中一些常用的布局，都放在 layouts 目录中,比如每个页面都有的侧边栏,头栏等

四. 基本模板

熟悉了vue-antd-admin之后,当我们真正开始做一个项目时,推荐用这个基本模板来构建, 这里面省去了不必要的页面, 非常清爽. 与master分支比较:

• 保留了登录页面及配套mock
• 删除了所有展示页面
• 保留了一切工具和插件
• 保留了所有设置类内容
• 删除了使用文档

git clone -b basic https://gitee.com/iczer/vue-antd-admin.git

基本模板登录成功后会跳转路由到:/dashboard/workplace, 但此模板已经把/dashboard/workplace删掉了, , 这里可能会对你造成困扰, 点一下返回就可以跳转到主页面了

五. 设置项目基本信息

在 src\config\default\setting.config.js 中, 我们可以设置项目的基本信息, 每一行都有注释, 设置非常方便

// 此配置为系统默认设置，需修改的设置项，在src/config/config.js中添加修改项即可。也可直接在此文件中修改。
module.exports = {
  lang: 'CN',                           //语言，可选 CN(简体)、HK(繁体)、US(英语)，也可扩展其它语言
  theme: {                              //主题
    color: '#1890ff',                   //主题色
    mode: 'dark',                       //主题模式 可选 dark、 light 和 night
    success: '#52c41a',                 //成功色
    warning: '#faad14',                 //警告色
    error: '#f5222d',                   //错误色
  },
  layout: 'side',                       //导航布局，可选 side 和 head，分别为侧边导航和顶部导航
  fixedHeader: false,                   //固定头部状态栏，true:固定，false:不固定
  fixedSideBar: true,                   //固定侧边栏，true:固定，false:不固定
  fixedTabs: false,                      //固定页签头，true:固定，false:不固定
  pageWidth: 'fixed',                   //内容区域宽度，fixed:固定宽度，fluid:流式宽度
  weekMode: false,                      //色弱模式，true:开启，false:不开启
  multiPage: false,                     //多页签模式，true:开启，false:不开启
  hideSetting: false,                   //隐藏设置抽屉，true:隐藏，false:不隐藏
  systemName: 'Vue Antd Admin',         //系统名称
  copyright: '2018 ICZER 工作室出品',     //copyright
  asyncRoutes: false,                   //异步加载路由，true:开启，false:不开启
  showPageTitle: true,                  //是否显示页面标题（PageLayout 布局中的页面标题），true:显示，false:不显示
  filterMenu: true,                    //根据权限过滤菜单，true:过滤，false:不过滤
  animate: {                            //动画设置
    disabled: false,                    //禁用动画，true:禁用，false:启用
    name: 'bounce',                     //动画效果，支持的动画效果可参考 ./animate.config.js
    direction: 'left'                   //动画方向，切换页面时动画的方向，参考 ./animate.config.js
  },
  footerLinks: [                        //页面底部链接，{link: '链接地址', name: '名称/显示文字', icon: '图标，支持 ant design vue 图标库'}
    {link: 'https://pro.ant.design', name: 'Pro!首页'},
    {link: 'https://github.com/iczer/vue-antd-admin', icon: 'github'},
    {link: 'https://ant.design', name: 'Ant Design'}
  ],
}

六. 定制主题

如果想更换一下主题颜色, 过度动画, 单/多页模式, 侧边栏 等基本选项,可以修改src\config\config.js

https://iczer.gitee.io/vue-antd-admin-docs/develop/theme.html