mPaaS-技术干货 | Kylin 框架-项目结构

Posted 2021-11-05 枯木前头万木春

脚手架介绍

• 初始化结构
• 子目录 mockpackage.jsonwwwsrc/commonsrc/layoutsrc/pages常用参数 pagesplugins已有插件

---

一、初始化结构

project
├── mock
│ ├── mock.config.js
│ └── rpc
│ └── test.js
├── package.json
├── www
└── src
├── common
│ ├── components
│ ├── css
│ │ └── base.less
│ ├── img
│ └── js
├── layout
│ ├── index.html
│ └── layout.html
└── pages
└── index
├── components
├── index.js
└── store

二、子目录

mock
package.json
www
src/common
src/layout
src/pages
常用参数

1.mock

该目录提供了一种数据 mock 方式，即使用 cnpm run dev:mock 启动时，会自动加载其中的rpc目录和jsapi目录的对应数据接口。

2.package.json

在 package.json 文件中的 kylinApp字段包含了项目配置的元信息，主要有 pages, output, devPort,plugins,dirAlias。

{
	"kylinApp": {
		"output":"www",
		"pages": {
		"index": {...}
		},
		"devPort": 8090,
		"dirAlias": {
		"common":"./src/common/",
		"pages":"./src/pages/"
		},
		"plugins": [
		]
	}
}

3.www

执行 cnpm run build 后，会自动将构建产物输出到 www 目录中。

4.src/common

用以放置项目中使用的 css,js,img文件。

5.src/layout

对应着 ./src/pages/${pageName}的各个页面，可以在 package.json 中配置对应页面使用的 html 模板路径,支持 nujuncks 语法。

6.src/pages

这个目录是用来放各个页面的，各个页面分别放在./src/pages/${pageName}/ 目录下。

分别包含了components , store 和 index.js 。

• components 目录中，每个组件都是 Vue 组件，具体编写规范请参考 组件规范 。

• store 目录中，有一个Vuex.Store 实例，具体使用请参考 状态注入 。

• index.js 为当前 page 的主入口，这里的 page 页面最后会生成一个特定的 ${pageName}.html 页面

三、常用参数

这里说到的常用参数是指 kylinApp 下一级中，除了 pages,options,plugins 之外的所有键值。

pages,options,plugins 将在下面单独展开。

pages:

这里专门列举 pages 键值对下面的配置项，下面示例中的 home 表示以下配置均是对 pageName为 home的页面生效。

{
	"kylinApp": {
		"pages": {
		"home": {
		... // 这里的字段
			}
		}
	}
}

plugins

kylinApp.plugins字段，是一个数组，支持按需加载各个插件

{
	kylinApp: {
	plugins: [
		"xxxx",
		["yyyy",{ a: 1 }],
		"zzzz",
		["6666",{ b: 1 }]
		]
	}
}

支持传入的形式有 2 种，分别是 默认配置 和扩展配置方式，在上述的示例中，引入了4个插件

• @ali/kylin-plugin-xxxx, 以默认配置加载。
• @ali/kylin-plugin-yyyy, 以 {a:1} 选项加载。
• @ali/kylin-plugin-zzzz, 以默认配置加载。
• @ali/kylin-plugin-6666, 以 {b:1} 选项加载。

已有插件

目前，支持配置的插件有 mock,resource，分别见如下文档：

• mock
• resource

四、页面 index.js

页面介绍，Page是一个 Webview 的逻辑抽象层，同时也是组件挂载的根节点。

import { Page } from '@ali/kylin-framework'

1、页面声明结构

一个Page包含的接口在 页面接口 中声明，提供了对 Vue 实例的完整控制能力，简易的 Page 使用如下，initOptions 负责处理额外的 Vue 配置选项。

import { Page } from '@ali/kylin-framework';
import IndexView from './components/index-view.vue';
class IndexPage extends Page {
initOptions() {
return {}
}
render(h) {
return <IndexComponent></IndexComponent>
}
}
new IndexPage('#app');

2、页面接口(页面接口的命名空间及 API)

(1)命名空间

ES6 通过如下方式引入：

import { Page } from '@ali/kylin-framework';

---

(2)API

目前 Page 提供如下成员方法以供派生：

initOptions

 initOptions() {
    return {
      //字段，值
    };
  }
  //返回结果要求是一个合法的 Vue 入参。
  //一般来说，不建议在 Page 层引入过于复杂的配置
  //涉及到的逻辑都可以放到 Component 中来维护。

render

该函数要求是一个合法的 Vue 的 render 函数。

 render() {
    return <IndexView></IndexView>;
  }

---