update docs;

master
iczer 4 years ago
parent 523537953a
commit af0cce4f1e
  1. 34
      docs/develop/page.md

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

Loading…
Cancel
Save