## 介绍
`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)