mpaaS的kylin框架-项目结构（脚手架）_python

脚手架简介

项目初始化结构如下

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

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

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

src/common
用以放置项目中使用的CSS，JS,IMG文件

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

src/pages
此目录用于存放各个页面。页面存放于 ./src/pages/${pageName}/ 目录下，各页面分别包含 components , store 和 index.js 。

components 目录中，每个组件都是 Vue 组件，具体编写规范请参考组件规范。
store 目录中，有一个 Vuex.Store 实例，具体使用请参考状态注入。
index.js 为当前 page 的主入口，这里的 page 页面最后会生成一个特定的 ${pageName}.html 页面

页面

Page是一个Webview的逻辑抽象层，同时也是组件挂载的根节点。
注意关于页面Page的代码全在src/pages的index.js里面

代码引入

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

页面声明结构

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

import { Page } from '@ali/kylin-framework';
import IndexComponent from './indexComponent.vue';

class IndexPage extends Page {

  initOptions() {
    return {}
  }

  render(h) {
    return 
  }

}

new IndexPage('#app');

实例代码

import { Page } from '@ali/kylin-framework';
import IndexView from './components/index-view.vue';
import store from './store';
import FastClick from 'fastclick';
import '@alipay/antui/dist/rem/antui.css';
import '@alipay/antui/dist/rem/widget/switch.css';
import "@alipay/antui/dist/rem/widget/dialog.css";
import "@alipay/antui/dist/rem/widget/toast.css";
// 自定义指令
import Vue from "vue"; 
import DiyDirective from 'common/js/registerDirectives.js';
Vue.use(DiyDirective);

FastClick.attach(document.body);

class IndexPage extends Page {

  initOptions() {
    return {
      store
    };
  }

  render() {
    return ;
  }
}
new IndexPage('#app');

页面接口命名空间

es6 通过如下方式引入

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

API

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

initOptions
render

initOptions

function initOptions(): VueOptions

返回值
返回结果要求是一个合法的Vue入参。一般来说，不建议在Page层引入过于复杂的配置，设计到的逻辑都可以放到 Component 中来维护。

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

function render():VNode

返回值
返回结果要求是合法VNode元素，请按照JSX规范书写。

组件

Componet扩充自Vue的组件，提供了Vue组件对等的输入参数能力。在代码书写时提供类class的装饰器Decorator风格。

注意关于组件Component的代码全在src\pages\xxx\components里面

代码引入

import { Component, Watch } from '@ali/kylin-framework';

组件声明结构

一个组件可以包含数据，JSX渲染函数，模板，挂载元素，方法，生命周期等Vue的options选项的对等配置。组件声明包括以下几部分, 分别使用@Component和@Watch两种不同装饰器进行包装：

class类声明，使用装饰器@ Component。
类成员声明，不使用装饰器
类成员方法声明，一般不装饰器，除非该方法需要watch另外一个已声明的变量。

vue单文件组件

组件接口

跟vue基本一致，组件定义写在.vue文件内，以下是一个简单的例子:

demo

实例代码

上述例子中，有个顶级标签，除了与vue相同的