开发页面视图 (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 都可以触发视图的切换显示。

# 开发页面视图 (Develop View Of Page)

# 视图(View) 的示例

# 注册视图(View)

# 视图(View)访问路由

开发页面视图 (Develop View Of Page)

视图(View) 的示例

注册视图(View)

视图(View)访问路由