diff --git a/docs/.vuepress/components/Alert.vue b/docs/.vuepress/components/Alert.vue deleted file mode 100644 index dc5165b..0000000 --- a/docs/.vuepress/components/Alert.vue +++ /dev/null @@ -1,42 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/.vuepress/components/Color.vue b/docs/.vuepress/components/Color.vue deleted file mode 100644 index 350951b..0000000 --- a/docs/.vuepress/components/Color.vue +++ /dev/null @@ -1,35 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/.vuepress/components/ColorList.vue b/docs/.vuepress/components/ColorList.vue deleted file mode 100644 index 1a0480f..0000000 --- a/docs/.vuepress/components/ColorList.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js deleted file mode 100644 index 4f85974..0000000 --- a/docs/.vuepress/config.js +++ /dev/null @@ -1,57 +0,0 @@ -module.exports = { - title: 'Vue Antd Admin', - description: 'Vue Antd Admin', - base: '/vue-antd-admin/', - head: [ - ['link', { rel: 'icon', href: '/favicon.ico' }] - ], - themeConfig: { - logo: '/logo.png', - repo: 'iczer/vue-antd-admin', - docsDir: 'docs', - editLinks: true, - editLinkText: '在 Github 上帮助我们编辑此页', - nav: [ - {text: '指南', link: '/'}, - {text: '配置', link: '/develop/layout'}, - {text: '主题', link: '/advance/theme'}, - ], - lastUpdated: 'Last Updated', - sidebar: [ - { - title: '开始', - collapsable: false, - children: [ - '/start/use', '/start/faq' - ] - }, - { - title: '开发', - collapsable: false, - children: [ - '/develop/layout', '/develop/router', '/develop/page', '/develop/theme', '/develop/service', '/develop/mock' - ] - }, - { - title: '进阶', - collapsable: false, - children: [ - '/advance/i18n', '/advance/chart', '/advance/theme', '/advance/error', '/advance/authority' - ] - }, - { - title: '其它', - collapsable: false, - children: [ - '/other/upgrade', '/other/community' - ] - } - ], - nextLinks: true, - prevLinks: true, - }, - plugins: ['@vuepress/back-to-top', require('./plugins/alert')], - markdown: { - lineNumbers: true - } -} diff --git a/docs/.vuepress/plugins/alert/Alert.vue b/docs/.vuepress/plugins/alert/Alert.vue deleted file mode 100644 index 433d07e..0000000 --- a/docs/.vuepress/plugins/alert/Alert.vue +++ /dev/null @@ -1,46 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/.vuepress/plugins/alert/alertMixin.js b/docs/.vuepress/plugins/alert/alertMixin.js deleted file mode 100644 index 49c65c9..0000000 --- a/docs/.vuepress/plugins/alert/alertMixin.js +++ /dev/null @@ -1,38 +0,0 @@ -import Alert from './Alert' - -const AlertMixin = { - install(Vue) { - Vue.mixin({ - methods: { - $alert(message, duration = 2000) { - let Constructor= Vue.extend(Alert) - let alert = new Constructor() - alert.$slots.default = message - alert.$props.alert = this.$page.alert - alert.$mount() - document.body.appendChild(alert.$el) - - const appendHeight = alert.$el.offsetHeight + 16 - this.$page.alert.top += appendHeight - - setTimeout(() => { - this.$page.alert.top -= appendHeight - this.triggerRemoveAlert(appendHeight) - setTimeout(() => { - alert.$destroy() - alert.$el.remove() - }, 100) - }, duration) - }, - triggerRemoveAlert(height) { - const event = new CustomEvent('alert_remove', { - detail: {height} - }) - window.dispatchEvent(event) - } - } - }) - } -} - -export default AlertMixin diff --git a/docs/.vuepress/plugins/alert/clientRootMixin.js b/docs/.vuepress/plugins/alert/clientRootMixin.js deleted file mode 100644 index e5cf7fb..0000000 --- a/docs/.vuepress/plugins/alert/clientRootMixin.js +++ /dev/null @@ -1,5 +0,0 @@ -export default { - updated() { - this.$page.alert.top = 100 - } -} diff --git a/docs/.vuepress/plugins/alert/enhanceApp.js b/docs/.vuepress/plugins/alert/enhanceApp.js deleted file mode 100644 index d02c403..0000000 --- a/docs/.vuepress/plugins/alert/enhanceApp.js +++ /dev/null @@ -1,5 +0,0 @@ -import AlertMixin from './alertMixin' - -export default ({Vue}) => { - Vue.use(AlertMixin) -} \ No newline at end of file diff --git a/docs/.vuepress/plugins/alert/index.js b/docs/.vuepress/plugins/alert/index.js deleted file mode 100644 index c5ff1a7..0000000 --- a/docs/.vuepress/plugins/alert/index.js +++ /dev/null @@ -1,13 +0,0 @@ -const path = require('path') - -module.exports = (options, ctx) => { - return { - clientRootMixin: path.resolve(__dirname, 'clientRootMixin.js'), - extendPageData($page) { - $page.alert = { - top: 100 - } - }, - enhanceAppFiles: path.resolve(__dirname, 'enhanceApp.js') - } -} \ No newline at end of file diff --git a/docs/.vuepress/public/favicon.ico b/docs/.vuepress/public/favicon.ico deleted file mode 100644 index 47bf70b..0000000 Binary files a/docs/.vuepress/public/favicon.ico and /dev/null differ diff --git a/docs/.vuepress/public/logo.png b/docs/.vuepress/public/logo.png deleted file mode 100644 index 62bfe39..0000000 Binary files a/docs/.vuepress/public/logo.png and /dev/null differ diff --git a/docs/.vuepress/styles/index.styl b/docs/.vuepress/styles/index.styl deleted file mode 100644 index 6f6e076..0000000 --- a/docs/.vuepress/styles/index.styl +++ /dev/null @@ -1,12 +0,0 @@ -.custom-block.tip{ - border-color: #1890ff -} -.theme-default-content code .token.inserted{ - color: #60bd90; -} -//.custom-block.warning{ -// border-color: #fa8c16 -//} -//.custom-block.error{ -// border-color: #f5222d -//} diff --git a/docs/.vuepress/styles/palette.styl b/docs/.vuepress/styles/palette.styl deleted file mode 100644 index 02c2539..0000000 --- a/docs/.vuepress/styles/palette.styl +++ /dev/null @@ -1,2 +0,0 @@ -$accentColor = #1890ff -$contentWidth = 940px diff --git a/docs/README.md b/docs/README.md deleted file mode 100644 index 5468c9e..0000000 --- a/docs/README.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: 首页 -home: true -heroImage: /logo.png -heroText: Vue Antd Admin -tagline: 开箱即用的中台前端/设计解决方案 -actionText: 快速上手 → -actionLink: /start/use -features: -- title: 简洁 - details: 以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。 -- title: 优雅 - details: 享受 Vue + webpack 的开发体验,在 Markdown 中使用 Vue 组件,同时可以使用 Vue 来开发自定义主题。 -- title: 自然 - details: VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,将作为 SPA 运行。 -footer: MIT Licensed | Copyright © 2018-present iczer ---- diff --git a/docs/advance/README.md b/docs/advance/README.md deleted file mode 100644 index d79e75d..0000000 --- a/docs/advance/README.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: 进阶 -lang: zn-CN ---- -# 进阶 diff --git a/docs/advance/authority.md b/docs/advance/authority.md deleted file mode 100644 index b20e814..0000000 --- a/docs/advance/authority.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: 权限管理 -lang: zn-CN ---- -# 权限管理 - -### 作者还没来得及编辑该页面,如果你感兴趣,可以点击下方链接,帮助作者完善此页 diff --git a/docs/advance/chart.md b/docs/advance/chart.md deleted file mode 100644 index 9b65701..0000000 --- a/docs/advance/chart.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: 图表 -lang: zn-CN ---- -# 图表 - -### 作者还没来得及编辑该页面,如果你感兴趣,可以点击下方链接,帮助作者完善此页 diff --git a/docs/advance/error.md b/docs/advance/error.md deleted file mode 100644 index a6a0598..0000000 --- a/docs/advance/error.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: 错误处理 -lang: zn-CN ---- -# 错误处理 - -### 作者还没来得及编辑该页面,如果你感兴趣,可以点击下方链接,帮助作者完善此页 diff --git a/docs/advance/i18n.md b/docs/advance/i18n.md deleted file mode 100644 index 630221d..0000000 --- a/docs/advance/i18n.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: 国际化 -lang: zn-CN ---- -# 国际化 - -### 作者还没来得及编辑该页面,如果你感兴趣,可以点击下方链接,帮助作者完善此页 diff --git a/docs/advance/theme.md b/docs/advance/theme.md deleted file mode 100644 index e95e58b..0000000 --- a/docs/advance/theme.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: 更换主题 -lang: zn-CN ---- -# 更换主题 - -### 作者还没来得及编辑该页面,如果你感兴趣,可以点击下方链接,帮助作者完善此页 diff --git a/docs/assets/admin-layout.png b/docs/assets/admin-layout.png deleted file mode 100644 index 8261bca..0000000 Binary files a/docs/assets/admin-layout.png and /dev/null differ diff --git a/docs/assets/blank-view.png b/docs/assets/blank-view.png deleted file mode 100644 index 70aece7..0000000 Binary files a/docs/assets/blank-view.png and /dev/null differ diff --git a/docs/assets/common-layout.png b/docs/assets/common-layout.png deleted file mode 100644 index 0a75d85..0000000 Binary files a/docs/assets/common-layout.png and /dev/null differ diff --git a/docs/assets/menu-demo.png b/docs/assets/menu-demo.png deleted file mode 100644 index 5db55ee..0000000 Binary files a/docs/assets/menu-demo.png and /dev/null differ diff --git a/docs/assets/mode-dark.png b/docs/assets/mode-dark.png deleted file mode 100644 index 12804a2..0000000 Binary files a/docs/assets/mode-dark.png and /dev/null differ diff --git a/docs/assets/mode-light.png b/docs/assets/mode-light.png deleted file mode 100644 index c801aa6..0000000 Binary files a/docs/assets/mode-light.png and /dev/null differ diff --git a/docs/assets/mode-night.png b/docs/assets/mode-night.png deleted file mode 100644 index f342c8c..0000000 Binary files a/docs/assets/mode-night.png and /dev/null differ diff --git a/docs/assets/new-page-2.png b/docs/assets/new-page-2.png deleted file mode 100644 index 3cfb856..0000000 Binary files a/docs/assets/new-page-2.png and /dev/null differ diff --git a/docs/assets/new-page-us.png b/docs/assets/new-page-us.png deleted file mode 100644 index 77ef198..0000000 Binary files a/docs/assets/new-page-us.png and /dev/null differ diff --git a/docs/assets/new-page.png b/docs/assets/new-page.png deleted file mode 100644 index 6006d7b..0000000 Binary files a/docs/assets/new-page.png and /dev/null differ diff --git a/docs/assets/page-layout.png b/docs/assets/page-layout.png deleted file mode 100644 index 34dfe29..0000000 Binary files a/docs/assets/page-layout.png and /dev/null differ diff --git a/docs/assets/page-view.png b/docs/assets/page-view.png deleted file mode 100644 index 8e33d14..0000000 Binary files a/docs/assets/page-view.png and /dev/null differ diff --git a/docs/assets/tabs-view.png b/docs/assets/tabs-view.png deleted file mode 100644 index a209547..0000000 Binary files a/docs/assets/tabs-view.png and /dev/null differ diff --git a/docs/develop/README.md b/docs/develop/README.md deleted file mode 100644 index 1b41db0..0000000 --- a/docs/develop/README.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: 开发 -lang: zh-CN ---- -# 开发 diff --git a/docs/develop/layout.md b/docs/develop/layout.md deleted file mode 100644 index c5ac933..0000000 --- a/docs/develop/layout.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: 布局 -lang: zh-CN ---- -# 布局 -页面整体布局是一个产品最外层的框架结构,往往会包含导航、页脚、侧边栏、通知栏以及内容等。在页面之中,也有很多区块的布局结构。在真实项目中,页面布局通常统领整个应用的界面,有非常重要的作用。 - -## Admin 的布局 -在 Vue Antd Admin 中,我们抽离了使用过程中一些常用的布局,都放在 layouts 目录中,分别为: -* [AdminLayout](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/AdminLayout.vue) / **管理后台布局**,包含了头部导航,侧边导航、内容区和页脚,一般用于后台系统的整体布局 - -![admin-layout](../assets/admin-layout.png) -* [PageLayout](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/PageLayout.vue) / **页面布局**,包含了页头和内容区,常用于需要页头(包含面包屑、标题、额外操作等)的页面 - -![page-layout](../assets/page-layout.png) -* [CommonLayout](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/CommonLayout.vue) / **通用布局**,仅包含内容区和页脚的简单布局,项目中常用于注册、登录或展示页面 - -![common-layout](../assets/common-layout.png) -## Admin 的视图 -在 Vue Antd Admin 中,除了基本布局外,通常有很多页面的结构是相似的。因此,我们把这部分结构抽离为视图组件。 -一个视图组件通常包含一个基本布局组件、视图公共区块、路由视图内容区、页脚等,常常结合路由配置使用。它们也被放入了 layouts 目录中,分别为: -* [TabsView](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/TabsView.vue) / **多页签视图**,包含了 AdminLayout 布局、多页签头和路由视图内容区 - -![tabs-view](../assets/tabs-view.png) -* [PageView](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/PageView.vue) / **页面视图**,包含了 PageLayout 布局和路由视图内容区 - -![page-view](../assets/page-view.png) -* [BlankView](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/BlankView.vue) / **空白视图**,仅包含一个路由视图内容区 - -![blank-view](../assets/blank-view.png) -## 如何使用 -通常我们会把视图组件和路由配置结合一起使用,我们把配置信息抽离在路由配置文件中 [router/index.js](https://github.com/iczer/vue-antd-admin/blob/master/src/router/index.js) 。如下: -```jsx {7,12} -{ - path: 'form', - name: '表单页', - meta: { - icon: 'form', - }, - component: PageView, - children: [ - { - path: 'basic', - name: '基础表单', - component: () => import('@/pages/form/basic/BasicForm'), - } - ] -} -``` -当然,如果这满足不了你的需求,你也可以自定义一些视图组件,或者直接在页面组件中使用布局。参考 -[workplace](https://github.com/iczer/vue-antd-admin/blob/master/src/pages/dashboard/workplace/WorkPlace.vue) 页面: -```vue {2,13} - -``` -## 其它布局组件 -除了 Admin 里的内建布局以外,在一些页面中需要进行布局,还可以使用 Ant Design Vue 提供的布局组件:Grid 和 Layout。 -### Grid 组件 -栅格布局是网页中最常用的布局,其特点就是按照一定比例划分页面,能够随着屏幕的变化依旧保持比例,从而具有弹性布局的特点。 - -而 Ant Design Vue 的栅格组件提供的功能更为强大,能够设置间距、具有支持响应式的比例设置,以及支持 flex 模式,基本上涵盖了大部分的布局场景,详情查看:[Grid](https://www.antdv.com/components/grid-cn/)。 -### Layout 组件 -如果你需要辅助页面框架级别的布局设计,那么 Layout 则是你最佳的选择,它抽象了大部分框架布局结构,使得只需要填空就可以开发规范专业的页面整体布局,详情查看:[Layout](https://www.antdv.com/components/layout-cn/)。 -### 根据不同场景区分抽离布局组件 -在大部分场景下,我们需要基于上面两个组件封装一些适用于当下具体业务的组件,包含了通用的导航、侧边栏、顶部通知、页面标题等元素。例如 Vue Antd Admin 的 [AdminLayout](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/AdminLayout.vue)。 - -通常,我们会把抽象出来的布局组件,放到 layouts 文件夹中方便管理。需要注意的是,这些布局组件和我们平时使用的其它组件并没有什么不同,只不过功能性上是为了处理布局问题而单独归类。 diff --git a/docs/develop/mock.md b/docs/develop/mock.md deleted file mode 100644 index 74358db..0000000 --- a/docs/develop/mock.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Mock -lang: zh-CN ---- -# Mock - -### 作者还没来得及编辑该页面,如果你感兴趣,可以点击下方链接,帮助作者完善此页 diff --git a/docs/develop/page.md b/docs/develop/page.md deleted file mode 100644 index 7983b53..0000000 --- a/docs/develop/page.md +++ /dev/null @@ -1,218 +0,0 @@ ---- -title: 页面 -lang: zh-CN ---- -# 页面 -这里的『页面』包含新建页面文件,配置路由、样式文件及i18n国际化等。通常情况下,你仅需简单的配置就可以添加一个新的页面。 -## 新建页面文件 -在 src/pages 下创建新的 .vue 文件。如果页面相关文件过多,您可以创建一个文件夹来放置这些文件。 -```diff - ├── public - ├── src - │ ├── assets # 本地静态资源 - : : - │ ├── pages # 页面组件和通用模板 -+ │ │ └── newPage.vue # 新页面文件 -or -+ │ │ └── newFolder # 为新页面创建一个文件夹 -+ │ │ ├── newPage.vue # 新页面文件 -+ │ │ ├── index.less # 页面样式文件 -+ │ │ └── index.js # import 引导文件 - : : - │ └── main.js # 应用入口js - ├── package.json # package.json - ├── README.md # README.md - └── vue.config.js # vue 配置文件 -``` -为了更好地演示,我们初始化 newPage.vue 文件如下: -```vue - - - - - -``` -index.less 文件: -```less -.new-page{ - height: 100%; - background-color: @base-bg-color; - text-align: center; - padding: 200px 0 0 0; - margin-top: -24px; - h1{ - font-size: 48px; - } -} -``` -index.js 文件: -```js -import NewPage from '@/pages/newPage/NewPage' -export default NewPage -``` -## 配置路由 -路由配置在 src/router/index.js 文件中,我们把上面创建的页面文件加入路由配置中 -```js {10-14} -const router = new Router({ - routes: [ - {name: '登录页'...}, - { - path: '/', - name: '首页', - component: TabsView, - redirect: '/login', - children: [ - { - path: 'newPage', - name: '新页面', - component: () => import('@/pages/newPage'), - }, - { - path: 'dashboard', - name: 'Dashboard', - meta: { - icon: 'dashboard' - }, - component: BlankView, - children: [...] - } - ] - ... - } - ] -}) -``` -:::tip -我们建议使用英文设置路由的 path 属性,用中文设置路由的 name 属性。因为系统将自动提取路由的 path 和 name 属性作为国际化配置。这在后面的章节 - [进阶>国际化](../advance/i18n.md)中将会讲到。 - 当然,如果你的项目不需要国际化,可以忽略。 -::: -启动服务,你将看到新增页面如下: -![newPage](../assets/new-page.png) -如果你想把它配置为二级页面或更深层级的页面,只需为它配置一个父级路由,并为父级路由配置一个[视图组件](./layout.md#admin-的视图), -这里我们选择 [PageView](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/PageView.vue),如下: -```js {10-21} -const router = new Router({ - routes: [ - {name: '登录页'...}, - { - path: '/', - name: '首页', - component: TabsView, - redirect: '/login', - children: [ - { - path: 'parent', - name: '父级路由', - component: PageView, - children: [ - { - path: 'newPage', - name: '新页面', - component: () => import('@/pages/newPage'), - } - ] - }, - {name: 'dashboard'...} - ] - ... - } - ] -}) -``` -:::warning -页面所有父级路由的组件必须配置为[视图组件](../develop/layout.md#admin-的视图),否则页面的内容可能不会显示。 -目前有 [PageView](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/PageView.vue)、 -[TabsView](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/tabs/TabsView.vue) 和 -[BlankView](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/BlankView.vue) 可选, -你也可以自己创建视图组件。([什么是视图组件?](../develop/layout.md#admin-的视图)) -::: -页面如下: -![newPage2](../assets/new-page-2.png) -## i18n国际化配置 -如果你想为页面增加i18n国际化配置,只需在页面同级文件夹下创建 i18n.js 文件,然后在页面文件中引入并使用即可。 -创建 i18n.js 文件: -```diff {6-10} - ├── public - ├── src - │ ├── assets # 本地静态资源 - : : - │ ├── pages # 页面组件和通用模板 - │ │ └── newFolder # 为新页面创建一个文件夹 - │ │ ├── newPage.vue # 新页面文件 - │ │ ├── index.less # 页面样式文件 -+ │ │ ├── i18n.js # i18n 国际化配置文件 - │ │ └── index.js # import 引导文件 - : : - │ └── main.js # 应用入口js - ├── package.json # package.json - ├── README.md # README.md - └── vue.config.js # vue 配置文件 -``` -i18n.js 文件内容: -```js -module.exports = { - messages: { - CN: { - content: '演示页面', - description: '这是一个演示页面' - }, - HK: { - content: '演示頁面', - description: '這是一個演示頁面' - }, - US: { - content: 'Demo Page', - description: 'This is a demo page' - } - } -} -``` -在 NewPage.vue 文件中引入 i18n.js,并添加需要国际化的内容。如下修改: -```vue {3,11-15} - - - - - -``` -然后页面右上角语言项选择 ``English``,你会发现,页面语言切换为英文了。如下: -![newPageUs](../assets/new-page-us.png) -一切就是这么的简单! -:::tip -如果你尝试切换为繁体语言,可能会发现``页面标题``和``面包屑``显示为英文。 -这涉及到路由的国际化配置,在章节 [进阶 > 国际化](../advance/i18n.md) 中,我们会对此作详细讲解。 -::: diff --git a/docs/develop/router.md b/docs/develop/router.md deleted file mode 100644 index 2c00d78..0000000 --- a/docs/develop/router.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: 路由和菜单 -lang: zh-CN ---- -# 路由和菜单 -路由和菜单起到组织一个应用的关键骨架的作用,Vue Antd Admin 使用 [vue-router](https://router.vuejs.org/zh/) 来配置和管理我们的路由和菜单。 -## 基本结构 -得益于 vue-router 路由配置的可扩展性,Vue Antd Admin 通过结合 router 配置文件、基本算法及 [menu.js](https://github.com/iczer/vue-antd-admin/blob/master/src/components/menu/menu.js) 菜单生成工具,搭建了路由和菜单的基本框架,主要涉及以下几个模块/功能: - -|功能 |配置 | -|:----------|:-------------------------------| -|*路由管理* |通过 [vue-router](https://router.vuejs.org/zh/) 的路由规则进行管理和配置| -|*菜单生成* |根据路由配置自动生成菜单,菜单项名称、图标和层级等全部可以通过路由配置进行自定义| -|*面包屑* |布局组件 [PageLayout](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/PageLayout.vue) 提取当前页面路由,并根据当前路由层次关系自动生成面包屑,当然你也可以自定义面包屑| -|*页面标题* |同面包屑,布局组件 [PageLayout](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/PageLayout.vue) 根据提取到的当前页面的路由名称设置为页面标题,你也同样可以自定义标题| - -## 路由 -Vue Antd Admin 的路由配置完全遵循 vue-router 的 [routes 配置规则](https://router.vuejs.org/zh/api/#routes)。 -另外我们还在 routes 的元数据属性 [meta](https://router.vuejs.org/zh/guide/advanced/meta.html#%E8%B7%AF%E7%94%B1%E5%85%83%E4%BF%A1%E6%81%AF) 中注入了三个属性 icon、invisible 和 page,它们将在生成菜单和页头时发挥作用。配置示例如下: -```js {8,14} -import Router from 'vue-router' -export default new Router({ - routes: [{ - path: '/', - name: '首页', - component: TabsView, - meta: { - invisible: true - }, - children: [{ - path: 'dashboard', - name: 'Dashboard', - meta: { - icon: 'dashboard' - }, - component: BlankView, - children: [{ - path: 'workplace', - name: '工作台', - component: () => import('@/pages/dashboard/workplace/WorkPlace'), - }, { - path: 'analysis', - name: '分析页', - component: () => import('@/pages/dashboard/analysis/Analysis'), - }] - }] - }] -}) -``` -完整配置示例,请查看 [router/index.js](https://github.com/iczer/vue-antd-admin/blob/master/src/router/index.js) - -## 菜单 -Admin 系统的菜单直接通过路由配置生成,路由属性和菜单功能对应关系如下 - -|路由属性|对应菜单功能| -|:-----------------|:-------| -|**name** |菜单名称 | -|**path** |点击菜单时的跳转链接| -|**meta.icon** |菜单图标,图标使用 ant-design-vue 图标库,对应 [Icon](https://www.antdv.com/components/icon-cn/#API) 组件 的 type 属性| -|**meta.invisible**|是否不将此路由项渲染为菜单项,默认false;如设置为 true,则生成菜单时将忽略此路由| - -假如使用上面 [路由](#路由) 文档中的 [配置示例](#路由),将会生成如下菜单: - -![menu-demo](../assets/menu-demo.png) -实际项目中,我们是在 AdminLayout 组件创建之前,提取 router 配置中根路由 '/' 下所有子路由配置, -并将此配置传递给 menu.js 插件,从而生成菜单。如下: -```vue {4,12,13,14} - - -``` -详细代码可查看 [layouts/AdminLayout#L83](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/AdminLayout.vue#L83)。 -当然你也可以不使用 router 配置生成菜单,你只需按照配置规则给菜单传递你所定义配置即可。菜单组件配置规则如下: -```jsx {} -[{ - name: '菜单标题', - path: '菜单路由', - meta: { - icon: '菜单图标', - invisible: 'boolean, 是否隐藏此菜单项, 默认 false', - }, - children: [ //子菜单配置 - { - name: '子菜单标题', - path: '子菜单路由', - meta: { - icon: '子菜单图标', - invisible: 'boolean, 是否隐藏此菜单项, 默认 false', - }, - } - ] -}] -``` -更多细节可查看 [components/menu/menu.js](https://github.com/iczer/vue-antd-admin/blob/master/src/components/menu/menu.js) - -## 面包屑 -面包屑由 [PageHeader](https://github.com/iczer/vue-antd-admin/blob/master/src/components/page/PageHeader.vue) 实现,PageLayout 组件会从当前页面路由提取面包屑配置(如未设置,则根据当前路由层次关系生成面包屑)。所以只要页面中使用了 PageLayout 布局或者它的父级组件使用了 PageLayout 布局,面包屑都将自动生成。 - -当然,如果你想在某个页面自定义面包屑,只需在对应的路由元数据 meta 中定义 page.breadcrumb 属性即可。Vue Antd Admin 将会优先使用路由元数据 meta 中定义的面包屑配置。 - -比如,想自定义工作台页面面包屑,可以在工作台的 route 配置中如下设置: -```jsx {5,6,7} -{ - path: 'workplace', - name: '工作台', - meta: { - page: { - breadcrumb: ['首页', 'Dashboard', '自定义'] - } - }, - component: () => import('@/pages/dashboard/workplace/WorkPlace'), -} -``` -更多细节可查看 [layouts/PageLayout.vue#L55](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/PageLayout.vue#L55) -## 页面标题 -页面标题的实现方式与面包屑基本一致,也是由 PageLayout 组件从当前页面路由提取标题(如未设置,则提取当前路由名称作为标题)。 - -如果你想自定义页面标题,在页面对应的路由元数据 meta 中定义 page.title 属性即可,如下示例,定义了工作台页面的标题: -```jsx {5,6,7} -{ - path: 'workplace', - name: '工作台', - meta: { - page: { - title: '自定义标题' - } - }, - component: () => import('@/pages/dashboard/workplace/WorkPlace'), -} -``` -更多细节可查看 [layouts/PageLayout.vue#L48](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/PageLayout.vue#L48) diff --git a/docs/develop/service.md b/docs/develop/service.md deleted file mode 100644 index ca71971..0000000 --- a/docs/develop/service.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: 服务端交互 -lang: zh-CN ---- -# 服务端交互 - -### 作者还没来得及编辑该页面,如果你感兴趣,可以点击下方链接,帮助作者完善此页 diff --git a/docs/develop/theme.md b/docs/develop/theme.md deleted file mode 100644 index 5209f05..0000000 --- a/docs/develop/theme.md +++ /dev/null @@ -1,502 +0,0 @@ ---- -title: 主题定制 -lang: zh-CN ---- -# 主题定制 - -## 主题颜色 -### 主题色 -我们内置了一个色盘供您选择 - - - - - - - - - -如果这不能满足你的需求,你也可以使用任何你喜欢的颜色,只需要在 src/config/config.js 文件中配置你的主题色即可。如: -```js {3} -module.exports = { - theme: { - color: '#13c2c2', //换成任何你喜欢的颜色,支持 hex 色值 - mode: 'night' - }, - multiPage: true, - animate: { - name: 'roll', - direction: 'default' - } -} -``` -当你设置好主题色后,系统会根据这个主题色为你生成一系列配套的颜色,并应用到vue组件中。 -:::tip -你可以在你的样式文件中直接使用 less 变量 ``@theme-color``。 -::: -:::warning -主题色目前只支持 ``hex`` 模式的色值。如果设置为 ``rgb`` 或其它模式的色值,可能会导致配套颜色无法生成。 -::: -### 功能色 -除了主题色,系统还有一些功能性颜色,分别为:成功色、警告色和错误色。默认色值分别为: -|名称|success |warning |error | -|:-:|:--------:|:-------:|:-----:| -|色值|``#52c41a``|``#faad14``|``#f5222d``| -|颜色|||| -|less变量|@success-color|@warning-color|@error-color| - -你也可以在 src/config/config.js 重新定义这些功能色 -```js {5-7} -module.exports = { - theme: { - color: '#13c2c2', - mode: 'night', - success: '#52c41a', //定义成功色,支持 hex 色值 - warning: '#faad14', //定义警告色,支持 hex 色值 - error: '#f5222d' //定义错误色,支持 hex 色值 - }, - multiPage: true, - animate: { - name: 'roll', - direction: 'default' - } -} -``` -:::tip -想在在你的样式文件中使用以上各功能色,引用各功能色对应的 less 变量即可。 -::: -:::warning -功能色目前也只支持 ``hex`` 模式的色值。如果设置为 ``rgb`` 或其它模式的色值,可能会导致配套颜色无法生成。 -::: -### 文本色 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
主题模式标题色文本色次级文本色
light/dark
rgba(0,0,0,0.85)rgba(0,0,0,0.65)rgba(0,0,0,0.45)
night
rgba(255,255,255,0.85)rgba(255,255,255,0.65)rgba(255,255,255,0.45)
less变量@title-color@text-color@text-color-second
- -:::tip -想在在你的样式文件中使用以上文本色,引用各文本色对应的 less 变量即可。 -::: -:::warning -目前不支持自定义文本色,因为涉及到主题模式切换时文本色的置换问题。如强行修改,可能会导致主题模式切换时出现样式异常。 -如果你的项目不需要主题模式切换,可自行替换以上文本色。 -::: - -### 背景色 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
主题模式布局背景色基础背景色hover背景色边框颜色阴影颜色
light/dark
#f0f2f5#fffrgba(0,0,0,0.025)#f0f0f0rgba(0,0,0,0.15)
night
#000#141414rgba(255,255,255,0.025)#303030rgba(255,255,255,0.15)
less变量@layout-bg-color@base-bg-color@hover-bg-color@border-color@shadow-color
- -:::tip -想在在你的样式文件中使用以上背景色,引用各背景色对应的 less 变量即可。 -::: -:::warning -目前也不支持自定义背景色,因为涉及到主题模式切换时背景色的置换问题。如强行修改,可能会导致主题模式切换时出现样式异常。 -如果你的项目不需要主题模式切换,可自行替换以上背景色。 -::: - -### antd 的色系 -除了以上颜色,我们还引入了 ant-design 内置的色系。如下: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
色系类型颜色
blue/拂晓蓝色盘 - -
less变量 - @blue-1、 - @blue-2 - ... - @blue-10 -
purple/酱紫色盘 - -
less变量 - @purple-1、 - @purple-2 - ... - @purple-10 -
cyan/明青色盘 - -
less变量 - @cyan-1、 - @cyan-2 - ... - @cyan-10 -
green/极光绿色盘 - -
less变量 - @green-1、 - @green-2 - ... - @green-10 -
magenta/法式洋红色盘 - -
less变量 - @magenta-1、 - @magenta-2 - ... - @magenta-10 -
red/薄暮色盘 - -
less变量 - @red-1、 - @red-2 - ... - @red-10 -
orange/日暮色盘 - -
less变量 - @orange-1、 - @orange-2 - ... - @orange-10 -
yellow/日出色盘 - -
less变量 - @yellow-1、 - @yellow-2 - ... - @yellow-10 -
volcano/火山色盘 - -
less变量 - @volcano-1、 - @volcano-2 - ... - @volcano-10 -
geekblue/极客蓝色盘 - -
less变量 - @geekblue-1、 - @geekblue-2 - ... - @geekblue-10 -
lime/青柠色盘 - -
less变量 - @lime-1、 - @lime-2 - ... - @lime-10 -
gold/金盏花色盘 - -
less变量 - @gold-1、 - @gold-2 - ... - @gold-10 -
-以上色系对应的less变量均可以在你的样式代码中直接使用。 - -:::tip -我们建议在开发中使用 `less变量` 而不是直接使用 `颜色值` 来设置颜色。这样做对主题色和主题模式切换很有帮助。 -::: -## 主题模式 -Vue Antd Admin 有三种主题模式,分别为:`light/亮色菜单模式`、`dark/暗色菜单模式` 和 `night/黑夜模式`。 - -light / 亮色菜单模式: -![light](../assets/mode-light.png) -dark / 暗色菜单模式: -![dark](../assets/mode-dark.png) -night / 黑夜模式: -![night](../assets/mode-night.png) - -你可以在这三种模式之间随意切换,也可以在 src/config/config.js 中设置默认的主题模式。 -```js {4} -module.exports = { - theme: { - color: '#13c2c2', - mode: 'night' //设置你的默认主题模式,可选 light、dark 和 night - }, - multiPage: true, - animate: { - name: 'roll', - direction: 'default' - } -} -``` - -## 导航布局 -Vue Antd Admin 有两种导航布局,`side/侧边导航` 和 `head/顶部导航`。 -默认为侧边导航,你可以在 src/config/config.js 中修改导航布局 -```js {6} -module.exports = { - theme: { - color: '#13c2c2', - mode: 'night' - }, - layout: 'side', //设置你的默认导航布局,有 side 和 head 可选 - multiPage: true, - animate: { - name: 'roll', - direction: 'default' - } -} -``` -## 动画 -Vue Antd Admin 内置了 [animate.css](https://animate.style) 动画库,在页面切换时会应用动画效果。你可以在 src/config/config.js 中配置动画效果或者禁用动画。 -```js {7-11} -module.exports = { - theme: { - color: '#13c2c2', - mode: 'night' - }, - multiPage: true, - animate: { - disabled: false, //禁用动画,true:禁用,false:启用 - name: 'roll', //动画效果,支持的动画效果可参考 src/config/default/animate.config.js - direction: 'default' //动画方向,切换页面时动画的方向,参考 src/config/default/animate.config.js - } -} -``` -支持的动画特效种类,可以参考 src/config/default/animate.config.js 文件。 -## 其它 -### 色弱模式 -对于有视觉障碍的群体,我们提供了色弱模式,你可以通过配置 src/config/config.js 启用色弱模式 -```js {7} -module.exports = { - theme: { - color: '#13c2c2', - mode: 'night' - }, - multiPage: true, - weekMode: false, //色弱模式,true:开启,false:不开启 - animate: { - name: 'roll', - direction: 'default' - } -} -``` -### 多页签 -在 src/config/config.js 设置 multiPage 来启用或关闭多页签模式 -```js {7} -module.exports = { - theme: { - color: '#13c2c2', - mode: 'night' - }, - multiPage: true, //多页签模式,true:开启,false:不开启 - animate: { - name: 'roll', - direction: 'default' - } -} -``` -完整的系统设置参考 src/config/default/setting.config.js -:::tip -以上所有主题设置项,均已映射到 vuex/setting 模块的 state 中,你可以通过提交 setting/mutations 实时修改设置项。 -如何使用 [mutations](https://vuex.vuejs.org/zh/guide/mutations.html) ? -::: \ No newline at end of file diff --git a/docs/other/README.md b/docs/other/README.md deleted file mode 100644 index 1e43106..0000000 --- a/docs/other/README.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: 其它 -lang: zh-CN ---- -# 其它 diff --git a/docs/other/community.md b/docs/other/community.md deleted file mode 100644 index 8e55350..0000000 --- a/docs/other/community.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: 社区 -lang: zh-CN ---- -# 社区 - -## 交流学习 -### QQ群:610090280 diff --git a/docs/other/upgrade.md b/docs/other/upgrade.md deleted file mode 100644 index fcade6a..0000000 --- a/docs/other/upgrade.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: 更新日志 -lang: zh-CN ---- -# 更新日志 diff --git a/docs/start/README.md b/docs/start/README.md deleted file mode 100644 index 97d807d..0000000 --- a/docs/start/README.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: 开始 -lang: zh-CN ---- -## 开始 diff --git a/docs/start/faq.md b/docs/start/faq.md deleted file mode 100644 index 2f7d8c8..0000000 --- a/docs/start/faq.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: 常见问题 -lang: zh-CN ---- -# 常见问题 -### 为什么不是 Ant Design Pro Vue ? -[Ant Design Pro Vue](https://github.com/vueComponent/ant-design-vue-pro) 是 [Ant Design Pro](https://github.com/ant-design/ant-design-pro) 的 Vue 版本,其中项目结构、组件、 -布局和使用方法等基本与 Ant Design Pro 的 react 版本保持一致。如果你比较熟悉 react 版,或者你已经在使用它,这确实是一个不错的选择。 - -[Vue Antd Admin](https://github.com/iczer/vue-antd-admin) 同样实现了 Ant Design Pro 的所有功能。与此同时,我们还根据 Vue 的特性,对 Ant Design Pro 的一些组件和布局作出了相应的修改及优化,同时不影响保持与 Ant Design Pro 的一致。 - -另外,我们还在添加一些 Ant Design Pro 没有的功能,比如全局动画、多页签模式等。 - -如果你想使用 Ant Design Pro,但又觉得它缺乏一些你想要的功能,不妨看看 [Vue Antd Admin](https://github.com/iczer/vue-antd-admin),我们会认真考虑每个用户的需求。 - -因此,如果你有一些不错的想法和建议,欢迎随时和我们交流,很可能你的想法就在我们下一个版本中实现。 - -### 如何使用 Vue Antd Admin ? -请阅读文档 [开始使用](./use.md)。有任何疑问,欢迎在 github 上给我们提交 [issue](https://github.com/iczer/vue-antd-admin/issues/new)。 - -### 是否支持国际化 ? -Vue Antd Admin 引入了 vue-i18n 支持。因此你可以使用 vue-i18n 的特性对项目做国际化修改,详细请查看 [国际化](../advance/i18n.md) diff --git a/docs/start/use.md b/docs/start/use.md deleted file mode 100644 index 82bdf87..0000000 --- a/docs/start/use.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: 使用 -lang: zh-CN ---- -# 使用 -## 准备 -你的本地环境需要安装 yarn、node 和 git。我们的技术栈基于 ES2015+、Vue、Antd,提前学习这些知识会非常有帮助。 -## 安装 -克隆本项目到本地 -```bash -$ git clone https://github.com/iczer/vue-antd-admin.git -``` -安装依赖 -```bash -$ yarn install -``` -## 目录结构 -我们已经为你生成了一个完整的开发框架,提供了涵盖中后台开发的各类功能和坑位,下面是整个项目的目录结构。 - -```bash -├── docs # 使用文档 -├── public -│ └── favicon.png # favicon -│ └── index.html # 入口 HTML -├── src -│ ├── assets # 本地静态资源 -│ ├── components # 业务通用组件 -│ ├── config # 系统配置 -│ ├── layouts # 通用布局 -│ ├── mock # 本地 mock 数据 -│ ├── pages # 页面组件和通用模板 -│ ├── plugins # vue 插件 -│ ├── router # 路由配置 -│ ├── store # vuex 状态管理配置 -│ ├── theme # 主题相关 -│ ├── utils # js 工具 -│ └── App.vue # 应用入口组件 -│ └── main.js # 应用入口js -├── package.json # package.json -├── README.md # README.md -└── vue.config.js # vue 配置文件 -``` -## 本地开发 -启动服务 -```bash -$ yarn serve -``` -启动成功后,会看到一个本地预览地址,通常是 http://localhost:8080 。接下来就可以修改代码,并实时预览修改结果啦! diff --git a/package.json b/package.json index cae6313..5ab4632 100644 --- a/package.json +++ b/package.json @@ -9,9 +9,6 @@ "lint": "vue-cli-service lint", "predeploy": "yarn build", "deploy": "gh-pages -d dist -b pages -r https://gitee.com/iczer/vue-antd-admin.git", - "docs:dev": "vuepress dev docs", - "docs:build": "vuepress build docs", - "docs:deploy": "vuepress build docs && gh-pages -d docs/.vuepress/dist" }, "dependencies": { "@antv/data-set": "^0.11.4", diff --git a/src/layouts/PageLayout.vue b/src/layouts/PageLayout.vue index fd5780e..61dc9b4 100644 --- a/src/layouts/PageLayout.vue +++ b/src/layouts/PageLayout.vue @@ -1,6 +1,6 @@