一. 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
