kylinH5框架之專案腳手架

專案初始化結構如下:

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目錄的對應資料介面。

簡單舉例如下:


},"devport": 8090,
"diralias": ,
"plugins": [
]}}

執行cnpm run build後，會自動將構建產物輸出到www目錄中。

用以放置專案中使用的css,js,img檔案。

對應著./src/pages/$的各個頁面，可以在package.json中配置對應頁面使用的 html 模板路徑。支援 nujuncks 語法。

這個目錄是用來放各個頁面的，各個頁面分別放在./src/pages/$/目錄下。分別包含了components,store和index.js。

引數名型別

預設值備註

output

string

dist

輸出相對目錄。

devport

number

8090

dev 模式監聽的 ipv4 埠號(0.0.0.0:devport)。

diralias

record

{}等同於webpack.resolve.alias中使用相對路徑。

pagetemplate

string

-公共 nunjucks 模板。

pages

此處列舉pages鍵值對下的配置項，示例中的home表示以下配置均為對pagename為home的頁面生效。

}}}

欄位名

型別預設值

備註entry

string

-相對路徑，指向當前頁面的 js 打包入口。

template

string

-plugins

],
"zzzz",
["6666",]
]}}

支援傳入的形式有 2 種，分別是預設配置和擴充套件配置方式，在上述的示例中，引入了4個外掛程式。

已有外掛程式

目前，支援配置的外掛程式有mock、resource，分別見如下文件：

kylin-plugin-mock 外掛程式是針對在桌面瀏覽器（chrome）中除錯 jsapi 的需要而開發的資料 mock 外掛程式。

在腳手架工程中，執行如下語句即可，其等價於執行命令時新增--mock：

cnpm run dev:mock

在專案的./mock/mock.config.js檔案中，有如下配置項：

const config = {};
// 使用者自定義mock
config.call = , data);
// 模擬服務端/網路介面延遲，此時會發現打了 2 次 log，一次是請求，一次包含返回結果
settimeout(() => , 2000);
},}window.lunamockconfig = config;

上述配置將./mock/rpc/*.js中的介面進行資料對映。更多詳細配置，可獲取**示例後檢視。

在執行cnpm run dev:mock後，會進入mock模式。該模式下在瀏覽器內執行alipayjsbridge.call('abc')，會去./mock/jsapi/abc.js尋找模擬介面資料。

kylin-plugin-resource 外掛程式是針對 mpaas 平台下的全域性離線資源包設計的一種資源攔截機制。

在腳手架的package.json中，可以看到如下配置：

["resource", 
,"fastclick": 
}}]

上述配置項表示當****現如下的依賴語句，會進行一定處理：

import *** from 'vue';
var *** = require('vue');

上述對vue的依賴使用，會做如下處理:

在生成的html模板中注入指令碼資源。

把上述vue依賴重定向為window.vue的值。

kylinH5框架之專案腳手架

kylinH5框架之專案腳手架

vue腳手架，搭建vue專案框架

vuecli腳手架的安裝與腳手架建立專案

kylinH5框架之專案腳手架

kylinH5框架之專案腳手架

vue腳手架，搭建vue專案框架

vuecli腳手架的安裝與腳手架建立專案

相關推薦