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

在 Flexue 应用中,视图(View) 是显示在应用页面中除了导航菜单和工具栏之外的中间区域的组件。

出于代码规范化管理的目的,Flexue 推荐采用以下文件布局风格来管理视图的相关源码:

  1. 将所有的视图的代码统一放到 src/views 目录下。

  2. 每一个视图有关的代码都放到以视图名称命名的子目录下. 例如,主视图 home 的代码都在 src/views/home 目录下。

  3. 在视图目录下可以按照单文件 .vue 组件模式,或者把模板(.html)、代码(.js)、样式(.css)分别独立维护的组合文件模式。 例如,主视图 home由 4 个文件组成,统一放在视图目录 src/views/home ,分别是:home.vuehome.htmlhome.csshome.js

  4. 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 都可以触发视图的切换显示。

Last Updated:
Contributors: huanghaiquan
扫码咨询