介绍
CabloyJS v2
前端基于Framework7 v4
。由于Framework7 v5
提供了更多特性,但有个别组件的接口规范进行了调整。为了拥抱Framework7 v5
,给CabloyJS前端进行赋能,我们推出了CabloyJS v3
升级指南
1. 修改项目package.json文件
{project}/package.json
"dependencies": {
"cabloy": "^3.0.0-beta.4",
"egg-born-module-a-cms": "^3.0.1",
"egg-born-module-a-wechat": "^3.0.1",
...
}
cabloy
使用新版本^3.0.0-beta.4
egg-born-module-***
开头的模块均使用新版本^3.0.1
2. 修改@ptr:refresh
ptr:refresh
事件的第一个参数是done
。例如:
...
<eb-page ptr @ptr:refresh="onRefresh"></eb-page>
...
onRefresh(done) {
done();
this.reload();
}
3. eb-navbar/f7-navbar
eb-navbar/f7-navbar
增加了新的属性large largeTransparent
,建议启用。例如:
<eb-page>
<eb-navbar large largeTransparent ...></eb-navbar>
</eb-page>
4. 修改模块build目录
4.1 {project}/src/module/{module-name}/build/front/utils.js
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap,
esModule: false,
},
};
- 增加
esModule: false
4.2 {project}/src/module/{module-name}/build/front/webpack.base.conf.js
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'file-loader',
options: {
limit: 1000,
name: utils.assetsPath('img/[name].[contenthash].[ext]'),
esModule: false,
},
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'file-loader',
options: {
limit: 1000,
name: utils.assetsPath('fonts/[name].[contenthash].[ext]'),
esModule: false,
},
},
],
},
- 将
url-loader
改为file-loader
- 将
[hash]
改为[contenthash]
- 增加
esModule: false
参考资料
关于更多Framework7 v5的新特性和升级指南,请参见: Migration to Framework7 v5
评论: