开发页面视图 (Develop View Of Page)
在 Flexue 应用中,视图(View)
是显示在应用页面中除了导航菜单和工具栏之外的中间区域的组件。
出于代码规范化管理的目的,Flexue 推荐采用以下文件布局风格来管理视图的相关源码:
将所有的视图的代码统一放到
src/views
目录下。每一个视图有关的代码都放到以视图名称命名的子目录下. 例如,
主视图 home
的代码都在src/views/home
目录下。在视图目录下可以按照单文件
.vue
组件模式,或者把模板(.html
)、代码(.js
)、样式(.css
)分别独立维护的组合文件模式。 例如,主视图 home
由 4 个文件组成,统一放在视图目录src/views/home
,分别是:home.vue
,home.html
,home.css
,home.js
。flexue 的插件自动对放到
src/views
目录下组件,根据组件目录的路径生成 view 视图的路由路径和路由名称。
视图(View) 的示例
作为示例,在 src/views
目录下分别创建两个视图 主视图 home
和 用户注册视图 user-registry
,对应地创建如下的目录和文件。
└── src
└── views
├── home
│ └── home.vue
│ └── home.js
│ ├── home.html
│ ├── home.css
│
└── user-registry
├── user-registry.vue
└── user-registry.js
├── user-registry.html
├── user-registry.css
主视图
home
的示例home.vue
<template src="./home.html"></template> <style src="./home.css" scoped></style> <script src="./home.js"></script>
home.html
<!DOCTYPE html> <x-view title="首页标题"> <span>首页内容</span> </x-view>
home.css
内容暂为空白home.js
// 定义一个VUE组件作为视图; export default { name: "home-view", }
用户注册视图
user-registry
的示例user-registry.vue
<template src="./user-registry.html"></template> <style src="./user-registry.css" scoped></style> <script src="./user-registry.js"></script>
user-registry.html
<!DOCTYPE html> <x-view title="视图标题"> <span class=content>用户注册</span> </x-view>
user-registry.css
.content{ font-size:12px; }
user-registry.js
// 定义一个VUE组件作为视图; export default { name: "user-registry-view", }
注册视图(View)
位于 srv/vies 目录下的所有 .vue 组件都会被插件自动加入到视图引用文件 src/views/views.js
中。 通过导入 views.js 文件可以批量地注册全部视图文件,示例如下:
import { runApp } from "flexue";
import { Views, DefaultView } from "./views/views.js";
runApp(
"#page",
{
// 其它配置 ...
// 包含所有视图路由的数组;视图路由对象的结构: { key, path, compoennt, meta} ;
views: Views,
// 默认的视图路由; 如果已经包含在 views 中,会自动地合并处理而不会引发错误。
defaultView: DefaultView,
// 其它配置 ...
}
);
视图(View)访问路由
已经注册的*视图(View)
*有两种标识方式: key 和 path ,可以通过导航菜单或者工具栏按钮可以触发跳转到指定的 key 或 path 的路径。
处于 src/views/
目录下的 视图(View)
被自动扫描注册时按照相对 src/views 的相对路径生成 key 和 path ;
- 例如: 按照以下目录结构创建的组件 home.vue 和 user-registry.vue 分别生成如下的视图路由:
视图组件 | 访问路由 |
---|---|
home.vue | { key: "home.view", path:"/home.view" } |
user-registry.vue | { key: "security/user-registry.view", path:"/security/user-registry.view" } |
└── src
└── views
│ // 视图路由: { key: "home.view", path:"/home.view" }
├── home
│ ├── home.vue
│ ├── home.js
│ ├── home.html
│ └── home.css
│
└── security
│ // 视图路由: { key: "security/user-registry.view", path:"/security/user-registry.view" }
└── user-registry
├── user-registry.vue
├── user-registry.js
├── user-registry.html
└── user-registry.css
导航菜单或工具栏操作中,可以通过指定路由的 key 或 path 都可以触发视图的切换显示。