腳手架簡介

項目初始化結構如下

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框架-项目结构（脚手架）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。