mPaaS-技术干货 | Kylin 框架-插件

一、插件 1.mock

Kylin-plugin-mock插件是针对在桌面浏览器（Chrome）中调试 JSAPI 需要而开发的数据 mock 插件。

2.开启插件

cnpm run dev:mock

3.使用插件

在项目的 ./mock/mock.config.js文件中，有如下配置项：

const config = {};
// 用户自定义mock
config.call = {
// mock rpc 接口
rpc: function (opts, callback) {
var type = opts.operationType;
var rpc = require('./rpc/' + type);
var data = typeof rpc === 'function' ? rpc(opts) : rpc;
// 防止在业务逻辑中对传入的对象进行了修改
data = Object.assign({}, data);
// 模拟服务端/网络接口延迟，此时会发现打了2次log，一次是纯请求的，一次是包含返回结果的
setTimeout(() => {
callback && callback(data);
}, 2000);
},
}
window.lunaMockConfig = config;

上述配置将./mock/rpc); } } } (2)接入 httpProxy 插件

重要：依赖 build@ 0.1.49+ 及以上版本。

1.运行以下命令安装 http-proxy-middleware：

cnpm install --save-dev http-proxy-middleware

2.修改 httpProxy 插件的 express 过程：

// 在 plugin.js 中
var proxy = require('http-proxy-middleware');
exports.pluginName = '@ali/kylin-plugin-custom';
exports.default = function () {
	return {
		express: function modifyExpress(expressInstance) {
		expressInstance.use(
		proxy('/api', {target: 'http://www.baidu.com'})
		// 更多详细配置参阅 http-proxy-middleware 模块文档
		);
		}
	}
}

(3)接入 px2rem 插件 1.运行以下命令安装 postcss-px2rem：

cnpm install --save-dev postcss-px2rem

2.修改 px2rem 插件的 Webpack 过程。

// 在 plugin.js 中
var px2rem = require('postcss-px2rem');
exports.pluginName = '@ali/kylin-plugin-custom';
exports.default = function () {
	return {
		webpack: function modifyWebpackConfig(webpackConfig) {
		webpackConfig.vue.postcss.push(
		px2rem({
		// 该参数和模版 html 中的 font-size 配置需要根据具体项目的 UI 交互稿修改
		remUnit: 100
		})
		);
		return webpackConfig;
		}
	}
}

mPaaS-技术干货 | Kylin 框架-插件

大数据系统相关栏目本月热门文章