mpaaS的kylin框架-项目结构（脚手架）
脚手架简介
项目初始化结构如下
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 <IndexComponent></IndexComponent>}}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 <IndexView></IndexView>;}
}
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单文件组件
<!-- Hello.vue --><template><div>hello {{name}}<Child></Child></div>
</template><style>/* put style here */
</style><component default="Child" src="./child.vue" /><script>import { Component } from '@ali/kylin-framework';@Componentclass Hello {data = {name: 'world'}}export default Hello;
</script>
组件接口
跟vue基本一致，组件定义写在.vue文件内，以下是一个简单的例子:
demo
<template><div><AButton @click="onClick">点击</AButton></div>
</template><style lang="less" rel="stylesheet/less">/* less */
</style><dependency component="{ AButton }" src="@alipay/antui-vue" lazy/><script type="text/javascript">import { Component } from '@ali/kylin-framework';@Componentexport default class IndexView {props = {}data = {}get comput() { return this.data.c * 2 }onClick() {}mounted() {}}
</script>
实例代码
<template><div><Toast @click="onClick">点击</Toast></div>
</template><style lang="less" rel="stylesheet/less" scoped>/* less */
</style><dependency component='Toast' src="common/compoments/toast.vue" lazy/><script type="text/javascript">import { Component } from '@ali/kylin-framework';@Component({mapStateToProps: ["xxxx", "yyyyy", "zzzzz"],//数据mapActionsToMethods: ["bbbbb", "qaaaa"]//方法
})export default class IndexView {props = {}data = {}get comput() { return this.data.c * 2 }mounted() {}}
</script>
上述例子中，有个顶级标签，除了与vue相同的<template>、<style>、<script> 之外，还有一个 <dependency> 标签。
<template>、<style>与vue一致
script
class结构
定义一个Componet，在代码结构上，使用；类class的装饰器Decorator风格。其中装饰器有 @Component 和 @Watch 这 2 种，通过以下方式引入。
import { Component, Watch } from '@ali/kylin-framework';@Component
export default class Hello {}
方法类型
组件以class形式声明，必须对该class进行装饰修饰。在class内部，成员变量是不需要被手动处理的，在构建过程中通过 babel 插件自动进行处理，而成员函数一般不需要装饰器挂载，除非是使用@Watch的场景，其中@Component回处理的属性如下表
getter/setter属性
@Component
export default class Hello {get computName() {// to sth}
}
上述getter声明，等价于如下Vue配置
HelloOption = {computed: {computName: {get: computName() {// to sth}}}
}
同理，setter也会被提取，如果同时存在getter和setter则会一起被提取。
生命周期函数
@Component
export default class Hello {created() {}mounted() {}
}
Watch
该装饰器的出现，只是因为watch需要有以下几个要素
- 被监听的变量名
- 监听选项
- 触发函数
用法
完整的@Watch接口如下表所示
示例
- 对于@Watch装饰的成员函数，支持对成员函数配置多个变量的监听，如下同时对a和c的变化进行了监听，如果任何一个发生变化，会触发 OnChangeA 成员方法。
- 如下，OnChangeA本质是成员方法，所以他也会和其他成员方法一起被提取到methods块中，那么必须保证没有与其他方法重名。
- 如果对Watch有额外配置项，请按
@Watch('a', {deep: false})的方法传入，配置项请参考watch配置项
@Component
class WTest {data = {a: {b: 2},c: 3}@Watch('c')@Watch('a', {deep: false}) OnChangeA(newVal, oldVal) {}
}
注意 以上对 data.a 的监听，会转换成如下形式，需要注意的是，如果没开启 deep: true 选项，当 data.a.b 发生变动的时候，不会触发该 OnChangeA 监听。
实例代码
@Watch('count') // 监听倒计时，清理timeID并重置mm(oldValue, newValue) {if (oldValue < 1) {clearInterval(this.t);this.t = null;this.count = 60;this.$parent.$parent.sendSuccess = false;}}@Watch('sendSuccess')sendS(oldValue, newValue) {if (oldValue) {this.used = true;this.t = setInterval(() => {this.count = --this.count;}, 1000);}}
属性类型
构建工具会自动对成员变量应用了@Component.Property装饰器，不需要用户手动填写，最终的合并策略取决于被装饰的成员变量的标识符名称，框架内置了以下几种。如果不在下表中，会透传至 VueComponent 的 options 对象中。
props
@Component
export default class Hello {props = {name: {type: String,default: 'haha'},num: Number}
}
详情请看API-props
data
@Component
export default class Hello {props = {name: {type: Number,default: 1},}data = {hello: this.props.name + 2}
}
上述 data 成员变量定义，会被转换成 data 函数形式，您无需手动编写 data 函数。
TestOption = {props: {name: {type: Number,default: 1}, },data: function data() {return {hello: this.props.name + 2}}
}
dependency
上述
<template><child></child>
</template><dependency component="Child" src="./child.vue" />
默认对 @alipay/antui-vue 组件库支持 babel-plugin-import 按需加载。
状态注入
推荐使用下面的connent机制来透传$store数据
接口声明
透传数据有以下三种方式
1.mapStateToProps
2.mapActionsToMethods
3.mapMethods
接口声明
@Component({mapStateToProps: Object|Array,mapActionsToMethods: Object|Array,mapMethods: Array|Boolean,mapEvents: Array
})
class Hello {}
mapStateToProps
把state中的特定键值映射到当前组件的props中，其接收参数等价于Vuex提供的mapState辅助函数
辅助函数图解
第一个版本
首先是html
第二个版本
首先是html
第三个版本
首先html
新写法
mapStateToProps：以下三种方式实现
1.函数方式
说明 把 $store.state 中的名为 bbb 的数据，映射到名为 aaa 的 props 上。
{mapStateToProps: {aaa: (state, getters) => state.bbb}
}
2.字符串键值对方式
说明 把 $store.state 中名为 bbb 的数据，映射到名为 aaa 的 props 上。
{mapStateToProps: {aaa: 'bbb'}
}
3.字符串数组方式
- 把 $store.state 中名为 aaa 的数据，映射到名为 aaa 的 props 上。
- 把 $store.state 中的名为 bbb 的数据，映射到名为 bbb 的 props 上。
{mapStateToProps: ['aaa', 'bbb']
}
mapActionsToMethods（常用）
与 Vuex 中 mapActions 入参一致，支持使用对象方式（名称映射）、数组方式（名称）把在全局 $store 下配置的 actions 注入到当前组件的 methods 中。
@Component({mapActionsToMethods: ['a', 'b']
})
class IndexView {async doSomeAction() {const ret = await this.a(123);// 等价于调用// const ret = await this.$store.dispatch('a', 123);}
}
mapMethods
通过在父子组件之间加一层中间层组件的方式来具体实现 connect 机制。当父组件调用子组件中特定的 method 方法时，无法直接访问子组件（实际访问到的是中间层组件），需要通过以下配置实现访问。
@Component({mapMethods: true
})
export default class Child {a() {}
}
<template><div>this is parent<child ref="child"></child></div>
</template>
<script>@Componentexport default class Parent {b() {// 此处可以访问this.$refs.child.a();}}
</script>
命令行工具
初始化
当工程脚手架初始化完后，如果需要新增页面，除了单纯的复制粘贴以外，提供了以下命令来添加页面定义和组件定义
- init-page
- init-component
init-page
命令格式
kylin init-page <pageName>
注意
- 上述命令中
pageName为必选参数，指新创建页面的英文名称。 - 如果当前 cwd 下有 package.json 并且存在 kylinApp 字段，则会自动往 kylinApp.pages 添加新增的 page。
init-component
命令格式
kylin init-component <componentName>
``**项目常用构建**kylin build --dev # dev 构建及静态服务器
kylin build --server --no-prod --hot # dev 构建及静态服务器及启用热更新
kylin build --server # prod 构建及静态服务器
kylin build --no-prod --watch # dev 构建及监听文件变化
mpaaS的kylin框架-项目结构（脚手架）相关推荐
- springboot项目结构_从零搭建Spring Boot脚手架（1）：开篇以及技术选型
1. 前言 目前Spring Boot已经成为主流的Java Web开发框架,熟练掌握Spring Boot并能够根据业务来定制Spring Boot成为一个Java开发者的必备技巧,但是总是零零碎碎 ...
- gin 项目结构_Gin框架 - 项目目录
GO GO语言 GOLANG Gin框架 - 项目目录 概述 今天给大家分享,在 API 端使用 Gin 框架时,项目的目录. 目录 ├─ Project Name │ ├─ config //配置文 ...
- 在Blazor中构建数据库应用程序——第1部分——项目结构和框架
目录 介绍 存储库和数据库 设计理念 数据 UI 解决方案结构 界面结构 页面 路由视图 布局 表单 控件 Blazor.Database项目 Program.cs ServiceCollection ...
- 快速上手Flask(一) 认识框架Flask、项目结构、开发环境
文章目录 快速上手Flask(一) 认识框架Flask.项目结构.开发环境 Web开发轻量级框架Flask Flash历史和团队 Pallets 项目 flask运行过程 使用flask的场景 使用P ...
- 使用vue-cli脚手架初始化Vue项目下的项目结构
vue-cli是Vue 提供的一个官方命令行工具,可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程.只需几分钟即可创建并启动一个带热重载.保存时静态检查以及可用于 ...
- Django框架学习——1—(虚拟环境搭建、MVC思想与Django的MVT区别、Django项目的创建、运行Django项目、项目结构介绍)
1.虚拟环境搭建 创建新的Django框架的虚拟环境: 注意:如果没有pipenv指令,需要安装这个支持库,同时需要记住配置它的环境变量,否则虚拟环境会安装在默认文件夹下(一般是C:\Users\Ad ...
- 二十四、【开源】EFW框架Winform前端开发之项目结构说明和调试方法
回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan.baidu. ...
- JavaWeb项目结构使用Vue项目
提示:javaweb项目中引用Vue项目的案例 文章目录 前言 一.JavaWeb项目结构 项目启动顺序 二.Vue项目结构 Vue结构粗略解释 思考 三.使用Vue 1.使用vue.js, 在htm ...
- 初识Reactjs的项目结构与思想
前言 一个月之前,学完了html.css.html5.css3.接下来,准备入坑传说中的前端框架,首先明白一个东西,什么是框架?框架顾名思义,是别人集成好的一系列技术,那么基于框架的开发,其实也就是在 ...
最新文章
- 领歌leangoo敏捷工具个人工作台功能
- Jetty 开发指南：嵌入式开发示例
- (chap5 web服务器) 数据转发之“网关和隧道”
- 源码包编译PHP5.6,源码编译安装php5.6
- C++中for循环的5种语法
- php dom 分离html内容
- 【numpy】查询手册
- 全网最新Linux全套教程
- 如何下载网易公开课视频（转载）
- Codeforces Round #822 (Div. 2) C Removing Smallest Multiples（复杂度为调和级数级别的暴力）
- 陆金所金融核心场景数据库的去 O 之路
- Google地图开发初级篇
- php查询mysql显示在html表格中_php – 在网页上的HTML表格中显示MySQL数据库表中的值...
- 【Java中继承总结与练习 】
- Excel电子表格隔行自动填充底色
- 企业如何建立商业生态系统
- 期权组合策略用matlab分析,matlab期权分析
- Web前端HTML5CSS3初学者零基础入门——第三天
- mysqldump备份恢复数据库
- 使用mint ui（一）