JLNTV_IPD/vue-antd-admin
Template
4
0
Fork 0
mirror of https://github.com/iczer/vue-antd-admin.git synced 2025-04-06 03:57:44 +08:00
Code Issues Projects Releases Wiki Activity

update docs;

Browse Source
This commit is contained in:
iczer 2020-08-06 14:42:44 +08:00
parent 523537953a
commit af0cce4f1e
1 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
docs/develop/page.md
View File

@ -12,10 +12,10 @@ lang: zh-CN
│ ├── assets # 本地静态资源 │ ├── assets # 本地静态资源
: : : :
│ ├── pages # 页面组件和通用模板 │ ├── pages # 页面组件和通用模板
+ │ │ └── newPage.vue # 新页面文件 + │ │ └── NewPage.vue # 新页面文件
or or
+ │ │ └── newFolder # 为新页面创建一个文件夹 + │ │ └── newPage # 为新页面创建一个文件夹
+ │ │ ├── newPage.vue # 新页面文件 + │ │ ├── NewPage.vue # 新页面文件
+ │ │ ├── index.less # 页面样式文件 + │ │ ├── index.less # 页面样式文件
+ │ │ └── index.js # import 引导文件 + │ │ └── index.js # import 引导文件
: : : :
@ -24,26 +24,27 @@ or
├── README.md # README.md ├── README.md # README.md
└── vue.config.js # vue 配置文件 └── vue.config.js # vue 配置文件
``` ```
为了更好地演示，我们初始化 newPage.vue 文件如下： 为了更好地演示，我们初始化 NewPage.vue 文件如下：
```vue ```vue
<template> <template>
<div class="new-page" :style="`min-height: ${layoutMinHeight}px`"> <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
<h1>演示页面</h1> <h1>演示页面</h1>
</div> </div>
</template> </template>
<script> <script>
import {mapState} from 'vuex'
export default { export default {
name: 'NewPage', name: 'NewPage',
inject: ['layoutMinHeight'],
data() { data() {
return { return {
desc: '这是一个演示页面' desc: '这是一个演示页面'
} }
},
computed: {
...mapState('setting', ['pageMinHeight']),
} }
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import "index.less"; @import "index.less";
</style> </style>
@ -63,7 +64,7 @@ index.less 文件：
``` ```
index.js 文件： index.js 文件：
```js ```js
import NewPage from '@/pages/newPage/NewPage' import NewPage from './NewPage'
export default NewPage export default NewPage
``` ```
## 配置路由 ## 配置路由
@ -148,14 +149,14 @@ const options = {
## i18n国际化配置 ## i18n国际化配置
如果你想为页面增加i18n国际化配置，只需在页面同级文件夹下创建 i18n.js 文件，然后在页面文件中引入并使用即可。 如果你想为页面增加i18n国际化配置，只需在页面同级文件夹下创建 i18n.js 文件，然后在页面文件中引入并使用即可。
创建 i18n.js 文件： 创建 i18n.js 文件：
```diff {6-10} ```diff {9}
├── public ├── public
├── src ├── src
│ ├── assets # 本地静态资源 │ ├── assets # 本地静态资源
: : : :
│ ├── pages # 页面组件和通用模板 │ ├── pages # 页面组件和通用模板
│ │ └── newFolder # 为新页面创建一个文件夹 │ │ └── newPage # 为新页面创建一个文件夹
│ │ ├── newPage.vue # 新页面文件 │ │ ├── NewPage.vue # 新页面文件
│ │ ├── index.less # 页面样式文件 │ │ ├── index.less # 页面样式文件
+ │ │ ├── i18n.js # i18n 国际化配置文件 + │ │ ├── i18n.js # i18n 国际化配置文件
│ │ └── index.js # import 引导文件 │ │ └── index.js # import 引导文件
@ -185,26 +186,25 @@ module.exports = {
} }
``` ```
在 NewPage.vue 文件中引入 i18n.js，并添加需要国际化的内容。如下修改： 在 NewPage.vue 文件中引入 i18n.js，并添加需要国际化的内容。如下修改：
```vue {3,11-15} ```vue {3,10,13-15}
<template> <template>
<div class="new-page" :style="`min-height: ${layoutMinHeight}px`"> <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
<h1>{{$t('content')}}</h1> <h1>{{$t('content')}}</h1>
</div> </div>
</template> </template>
<script> <script>
import {mapState} from 'vuex'
export default { export default {
name: 'NewPage', name: 'NewPage',
inject: ['layoutMinHeight'],
i18n: require('./i18n'), i18n: require('./i18n'),
computed: { computed: {
...mapState('setting', ['pageMinHeight']),
desc() { desc() {
return this.$t('description') return this.$t('description')
} }
} }
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@import "index"; @import "index";
</style> </style>