## 介绍 `CabloyJS v2`前端基于`Framework7 v4`。由于`Framework7 v5`提供了更多特性,但有个别组件的接口规范进行了调整。为了拥抱`Framework7 v5`,给CabloyJS前端进行赋能,我们推出了`CabloyJS v3` ## 升级指南 ### 1. 修改项目package.json文件 `{project}/package.json` ``` javascript "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`。例如: ``` javascript ... ... onRefresh(done) { done(); this.reload(); } ``` ### 3. eb-navbar/f7-navbar `eb-navbar/f7-navbar`增加了新的属性`large largeTransparent`,建议启用。例如: ``` javascript ``` ### 4. 修改模块build目录 #### 4.1 `{project}/src/module/{module-name}/build/front/utils.js` ``` javascript 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` ``` javascript 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](https://blog.framework7.io/migration-to-framework7-v5-1374257bb5a7)