Skip to content

Commit b3e05dc

Browse files
sendyasendya
committed
fix: keep-alive component
1 parent 6134a93 commit b3e05dc

File tree

6 files changed

+843
-1101
lines changed

6 files changed

+843
-1101
lines changed

‎README.md

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

‎src/components/layouts/BasicLayout.vue

Lines changed: 48 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,49 @@
1-
<template>
2-
<global-layout>
3-
<transition name="page-transition">
4-
<keep-alive v-if="keepAlive">
5-
<router-view />
6-
</keep-alive>
7-
<router-view v-else />
8-
</transition>
9-
</global-layout>
10-
</template>
11-
12-
<script>
13-
import GlobalLayout from '@/components/page/GlobalLayout'
14-
15-
export default {
16-
name: 'BasicLayout',
17-
components: {
18-
GlobalLayout
19-
},
20-
data () {
21-
return {
22-
23-
}
24-
},
25-
computed: {
26-
keepAlive () {
27-
return this.$route.meta.keepAlive
28-
}
29-
},
30-
methods: {
31-
32-
},
33-
}
34-
</script>
35-
36-
<style lang="scss">
37-
38-
/*
39-
* The following styles are auto-applied to elements with
40-
* transition="page-transition" when their visibility is toggled
41-
* by Vue.js.
42-
*
43-
* You can easily play with the page transition by editing
44-
* these styles.
45-
*/
46-
47-
.page-transition-enter {
48-
opacity: 0;
49-
}
50-
51-
.page-transition-leave-active {
52-
opacity: 0;
53-
}
54-
55-
.page-transition-enter .page-transition-container,
56-
.page-transition-leave-active .page-transition-container {
57-
-webkit-transform: scale(1.1);
58-
transform: scale(1.1);
59-
}
1+
<template>
2+
<global-layout>
3+
<transition name="page-transition">
4+
<route-view />
5+
</transition>
6+
</global-layout>
7+
</template>
8+
9+
<script>
10+
import RouteView from '@/components/layouts/RouteView'
11+
import GlobalLayout from '@/components/page/GlobalLayout'
12+
13+
export default {
14+
name: 'BasicLayout',
15+
components: {
16+
RouteView,
17+
GlobalLayout
18+
},
19+
data () {
20+
return {}
21+
}
22+
}
23+
</script>
24+
25+
<style lang="scss">
26+
27+
/*
28+
* The following styles are auto-applied to elements with
29+
* transition="page-transition" when their visibility is toggled
30+
* by Vue.js.
31+
*
32+
* You can easily play with the page transition by editing
33+
* these styles.
34+
*/
35+
36+
.page-transition-enter {
37+
opacity: 0;
38+
}
39+
40+
.page-transition-leave-active {
41+
opacity: 0;
42+
}
43+
44+
.page-transition-enter .page-transition-container,
45+
.page-transition-leave-active .page-transition-container {
46+
-webkit-transform: scale(1.1);
47+
transform: scale(1.1);
48+
}
6049
</style>

0 commit comments

Comments
 (0)