Skip to content

Commit 5ef74ec

Browse files
sendyasendya
committed
update README.md
1 parent 5ac251f commit 5ef74ec

File tree

1 file changed

+146
-145
lines changed

1 file changed

+146
-145
lines changed

‎README.md

Lines changed: 146 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -1,146 +1,147 @@
1-
<h1 align="center">Ant Design Pro Vue</h1>
2-
3-
<div align="center">
4-
An out-of-box UI solution for enterprise applications as a Vue boilerplate. based on <a href="https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/" target="_blank">Ant Design of Vue</a>
5-
</div>
6-
7-
<div align="center">
8-
9-
[![Travis branch](https://travis-ci.org/sendya/ant-design-pro-vue.svg?branch=master)](https://travis-ci.org/sendya/ant-design-pro-vue)
10-
11-
</div>
12-
13-
Overview
14-
----
15-
16-
基于 [Ant Design of Vue](https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/) 实现的 [Ant Design Pro](https://pro.ant.design/) Vue 版
17-
18-
[预览地址](https://pro.loacg.com/) **附带一些后台基础用到的列表展示例子**
19-
20-
![工作台+设置菜单](https://static-2.loacg.com/open/static/github/20181126112124.png)
21-
22-
![工作台](https://static-2.loacg.com/open/static/github/20180916-134306.png)
23-
24-
![个人设置](https://static-2.loacg.com/open/static/github/20180916-134251.png)
25-
26-
![个人中心](https://static-2.loacg.com/open/static/github/20181020152930.png)
27-
28-
![内联编辑列表](https://static-2.loacg.com/open/static/github/20180916-155011.png)
29-
30-
![角色列表](https://static-2.loacg.com/open/static/github/20180916-154921.png)
31-
32-
![角色编辑](https://static-2.loacg.com/open/static/github/20180916-155317.png)
33-
34-
![权限列表](https://static-2.loacg.com/open/static/github/20180916-154937.png)
35-
36-
![权限编辑](https://static-2.loacg.com/open/static/github/20180916-154950.png)
37-
38-
权限路由控制流程
39-
40-
![权限结构](https://static-2.loacg.com/open/static/github/permissions.png)
41-
42-
43-
44-
环境和依赖
45-
----
46-
47-
- node
48-
- yarn
49-
- webpack
50-
- eslint
51-
- @vue/cli 3.2.1
52-
- [ant-design-vue](https://github.com/vueComponent/ant-design-vue) - Ant Design Of Vue 实现
53-
- [vue-cropper](https://github.com/xyxiao001/vue-cropper) - 头像裁剪组件
54-
- [@antv/g2](https://antv.alipay.com/zh-cn/index.html) - Alipay AntV 数据可视化图表
55-
- [Viser-vue](https://viserjs.github.io/docs.html#/viser/guide/installation) - antv/g2 封装实现
56-
57-
> 请注意，我们强烈建议本项目使用 [Yarn](https://yarnpkg.com/) 包管理工具，这样可以与本项目演示站所加载完全相同的依赖版本 (yarn.lock) 。由于我们没有对依赖进行强制的版本控制，采用非 yarn 包管理进行引入时，可能由于 Pro 所依赖的库已经升级版本，而引入了新版本所照成的问题。作者可能会由于时间问题无法及时排查而导致您采用本项目作为基项目而出现问题。
58-
59-
60-
61-
项目下载和运行
62-
----
63-
64-
- 拉取项目代码
65-
```bash
66-
git clone https://github.com/sendya/ant-design-pro-vue.git
67-
cd ant-design-pro-vue
68-
```
69-
70-
- 安装依赖
71-
```
72-
yarn install
73-
```
74-
75-
- 开发模式运行
76-
```
77-
yarn run serve
78-
```
79-
80-
- 编译项目
81-
```
82-
yarn run build
83-
```
84-
85-
- Lints and fixes files
86-
```
87-
yarn run lint
88-
```
89-
90-
91-
92-
其他说明
93-
----
94-
95-
- **关于 Issue 反馈 (重要!重要!重要!) 请在开 *Issue* 时，描述清楚您的使用环境，所使用 Pro 版本或分支，出现的情况等...** 另外，若有疑问也可加入 QQ群 （Ant Design Vue 原作者使用讨论群 217490093，**非 Pro 群**），项目的几位维护者也在该群
96-
97-
- 项目使用的 [vue-cli3](https://cli.vuejs.org/guide/), 请更新您的 cli
98-
99-
- 关闭 Eslint (不推荐) 移除 `package.json` 中 `eslintConfig` 整个节点代码
100-
101-
- 项目使用了在线 mock，[easy-mock](https://www.easy-mock.com/) 项目所用的 mock 数据 [点击查看(请勿改动接口返回数据)](https://www.easy-mock.com/project/5b7bce071f130e5b7fe8cd7d)，也可以下载 [ANTD-PRO-Easy-Mock-API.zip](https://github.com/sendya/ant-design-pro-vue/files/2682711/ANTD-PRO-Easy-Mock-API.zip) 然后自行导入到自己的 mock 服务上
102-
103-
- 修改 Ant Design 配色，在文件 `vue.config.js` 中，其他 less 变量覆盖参考 [ant design](https://ant.design/docs/react/customize-theme-cn) 官方说明
104-
```ecmascript 6
105-
css: {
106-
loaderOptions: {
107-
less: {
108-
modifyVars: {
109-
/* less 变量覆盖，用于自定义 ant design 主题 */
110-
111-
'primary-color': '#F5222D',
112-
'link-color': '#F5222D',
113-
'border-radius-base': '4px',
114-
},
115-
javascriptEnabled: true,
116-
}
117-
}
118-
}
119-
```
120-
121-
122-
附属文档
123-
----
124-
125-
- [路由/菜单说明](https://github.com/sendya/ant-design-pro-vue/blob/master/src/router/README.md)
126-
- [Table 重封装组件](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/table/README.md) [@AraragiTsukihiz](https://github.com/araragitsukihiz)
127-
- [ANTD 默认配置项](https://github.com/sendya/ant-design-pro-vue/blob/master/src/defaultSettings.js)
128-
- [按需加载/减少打包大小](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/load-on-demand.md)
129-
- [为首屏增加 Loading 动画](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/add-page-loading-animate.md)
130-
- [多标签页组件 feature/multi-tabs](https://github.com/sendya/ant-design-pro-vue/tree/feature/multi-tabs)
131-
- [按需加载用例 feature/demand_load](https://github.com/sendya/ant-design-pro-vue/tree/feature/demand_load)
132-
- [为项目增加依赖项分析工具 analyzer](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/webpack-bundle-analyzer.md)
133-
- ANTD PRO 额外组件
134-
- Trend 趋势标记 [Trend.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/Trend/index.md)
135-
- AvatarList 用户头像列表 [AvatarList.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/AvatarList/index.md)
136-
- CountDown 倒计时 [CountDown.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/CountDown/index.md)
137-
- Ellipsis 文本自动省略号 [Ellipsis.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/Ellipsis/index.md)
138-
- NumberInfo 数据文本 [NumberInfo.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/NumberInfo/index.md)
139-
- FooterToolbar 底部工具栏 [FooterToolbar.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/FooterToolbar/index.md)
140-
- 其他待补充...
141-
142-
143-
备注
144-
----
145-
1+
<h1 align="center">Ant Design Pro Vue</h1>
2+
3+
<div align="center">
4+
An out-of-box UI solution for enterprise applications as a Vue boilerplate. based on <a href="https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/" target="_blank">Ant Design of Vue</a>
5+
</div>
6+
7+
<div align="center">
8+
9+
[![Travis branch](https://travis-ci.org/sendya/ant-design-pro-vue.svg?branch=master)](https://travis-ci.org/sendya/ant-design-pro-vue)
10+
11+
</div>
12+
13+
Overview
14+
----
15+
16+
基于 [Ant Design of Vue](https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/) 实现的 [Ant Design Pro](https://pro.ant.design/) Vue 版
17+
18+
[预览地址](https://pro.loacg.com/) **附带一些后台基础用到的列表展示例子**
19+
20+
![工作台+设置菜单](https://static-2.loacg.com/open/static/github/20181126112124.png)
21+
22+
![工作台](https://static-2.loacg.com/open/static/github/20180916-134306.png)
23+
24+
![个人设置](https://static-2.loacg.com/open/static/github/20180916-134251.png)
25+
26+
![个人中心](https://static-2.loacg.com/open/static/github/20181020152930.png)
27+
28+
![内联编辑列表](https://static-2.loacg.com/open/static/github/20180916-155011.png)
29+
30+
![角色列表](https://static-2.loacg.com/open/static/github/20180916-154921.png)
31+
32+
![角色编辑](https://static-2.loacg.com/open/static/github/20180916-155317.png)
33+
34+
![权限列表](https://static-2.loacg.com/open/static/github/20180916-154937.png)
35+
36+
![权限编辑](https://static-2.loacg.com/open/static/github/20180916-154950.png)
37+
38+
权限路由控制流程
39+
40+
![权限结构](https://static-2.loacg.com/open/static/github/permissions.png)
41+
42+
43+
44+
环境和依赖
45+
----
46+
47+
- node
48+
- yarn
49+
- webpack
50+
- eslint
51+
- @vue/cli 3.2.1
52+
- [ant-design-vue](https://github.com/vueComponent/ant-design-vue) - Ant Design Of Vue 实现
53+
- [vue-cropper](https://github.com/xyxiao001/vue-cropper) - 头像裁剪组件
54+
- [@antv/g2](https://antv.alipay.com/zh-cn/index.html) - Alipay AntV 数据可视化图表
55+
- [Viser-vue](https://viserjs.github.io/docs.html#/viser/guide/installation) - antv/g2 封装实现
56+
57+
> 请注意，我们强烈建议本项目使用 [Yarn](https://yarnpkg.com/) 包管理工具，这样可以与本项目演示站所加载完全相同的依赖版本 (yarn.lock) 。由于我们没有对依赖进行强制的版本控制，采用非 yarn 包管理进行引入时，可能由于 Pro 所依赖的库已经升级版本，而引入了新版本所照成的问题。作者可能会由于时间问题无法及时排查而导致您采用本项目作为基项目而出现问题。
58+
59+
60+
61+
项目下载和运行
62+
----
63+
64+
- 拉取项目代码
65+
```bash
66+
git clone https://github.com/sendya/ant-design-pro-vue.git
67+
cd ant-design-pro-vue
68+
```
69+
70+
- 安装依赖
71+
```
72+
yarn install
73+
```
74+
75+
- 开发模式运行
76+
```
77+
yarn run serve
78+
```
79+
80+
- 编译项目
81+
```
82+
yarn run build
83+
```
84+
85+
- Lints and fixes files
86+
```
87+
yarn run lint
88+
```
89+
90+
91+
92+
其他说明
93+
----
94+
95+
- **关于 Issue 反馈 (重要!重要!重要!) 请在开 *Issue* 时，描述清楚您的使用环境，所使用 Pro 版本或分支，出现的情况等...** 另外，若有疑问也可加入 QQ群 （Ant Design Vue 原作者使用讨论群 217490093，**非 Pro 群**），项目的几位维护者也在该群
96+
97+
- 项目使用的 [vue-cli3](https://cli.vuejs.org/guide/), 请更新您的 cli
98+
99+
- 关闭 Eslint (不推荐) 移除 `package.json` 中 `eslintConfig` 整个节点代码
100+
101+
- 项目使用了在线 mock，[easy-mock](https://www.easy-mock.com/) 项目所用的 mock 数据 [点击查看(请勿改动接口返回数据)](https://www.easy-mock.com/project/5b7bce071f130e5b7fe8cd7d)，也可以下载 [ANTD-PRO-Easy-Mock-API.zip](https://github.com/sendya/ant-design-pro-vue/files/2682711/ANTD-PRO-Easy-Mock-API.zip) 然后自行导入到自己的 mock 服务上
102+
103+
- 修改 Ant Design 配色，在文件 `vue.config.js` 中，其他 less 变量覆盖参考 [ant design](https://ant.design/docs/react/customize-theme-cn) 官方说明
104+
```ecmascript 6
105+
css: {
106+
loaderOptions: {
107+
less: {
108+
modifyVars: {
109+
/* less 变量覆盖，用于自定义 ant design 主题 */
110+
111+
'primary-color': '#F5222D',
112+
'link-color': '#F5222D',
113+
'border-radius-base': '4px',
114+
},
115+
javascriptEnabled: true,
116+
}
117+
}
118+
}
119+
```
120+
121+
122+
附属文档
123+
----
124+
125+
- [路由/菜单说明](https://github.com/sendya/ant-design-pro-vue/blob/master/src/router/README.md)
126+
- [Table 重封装组件](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/table/README.md) [@AraragiTsukihiz](https://github.com/araragitsukihiz)
127+
- [ANTD 默认配置项](https://github.com/sendya/ant-design-pro-vue/blob/master/src/defaultSettings.js)
128+
- [按需加载/减少打包大小](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/load-on-demand.md)
129+
- [为首屏增加 Loading 动画](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/add-page-loading-animate.md)
130+
- [多标签页组件 feature/multi-tabs](https://github.com/sendya/ant-design-pro-vue/tree/feature/multi-tabs)
131+
- [按需加载用例 feature/demand_load](https://github.com/sendya/ant-design-pro-vue/tree/feature/demand_load)
132+
- [多语言使用案例 feature/lang](https://github.com/sendya/ant-design-pro-vue/tree/feature/lang) [@musnow](https://github.com/musnow) 提供
133+
- [为项目增加依赖项分析工具 analyzer](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/webpack-bundle-analyzer.md)
134+
- ANTD PRO 额外组件
135+
- Trend 趋势标记 [Trend.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/Trend/index.md)
136+
- AvatarList 用户头像列表 [AvatarList.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/AvatarList/index.md)
137+
- CountDown 倒计时 [CountDown.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/CountDown/index.md)
138+
- Ellipsis 文本自动省略号 [Ellipsis.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/Ellipsis/index.md)
139+
- NumberInfo 数据文本 [NumberInfo.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/NumberInfo/index.md)
140+
- FooterToolbar 底部工具栏 [FooterToolbar.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/FooterToolbar/index.md)
141+
- 其他待补充...
142+
143+
144+
备注
145+
----
146+
146147
> @vue/cli 升级后，eslint 规则更新了。由于影响到全部 .vue 文件，需要逐个验证。既暂时关闭部分原本不验证的规则，后期维护时，在逐步修正这些 rules

0 commit comments

Comments
 (0)