Introduce
The frontend of CabloyJS v2
is based on Framework7 v4
. Because Framework7 v5
provides more features, but the interface specifications of some components have been adjusted. In order to embrace Framework7 v5
, we launched CabloyJS v3
Migration Guide
1. Modify 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",
...
}
- Set
cabloy
to the newest version^3.0.0-beta.4
- Set the modules of
egg-born-module-***
to the newset version^3.0.1
2. Modify @ptr:refresh
ptr:refresh
event now contains done
method as first argument. For example:
...
<eb-page ptr @ptr:refresh="onRefresh"></eb-page>
...
onRefresh(done) {
done();
this.reload();
}
3. eb-navbar/f7-navbar
eb-navbar/f7-navbar
adds the new props of large largeTransparent
,which is recommended to use. For example:
<eb-page>
<eb-navbar large largeTransparent ...></eb-navbar>
</eb-page>
4. Modify module’s build
directory
4.1 {project}/src/module/{module-name}/build/front/utils.js
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap,
esModule: false,
},
};
- Add
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,
},
},
],
},
- Change
url-loader
tofile-loader
- Change
[hash]
to[contenthash]
- Add
esModule: false
References
For more information on the new features and migration guide for Framework7 v5
, please see also:
Comments: