升级到 [email protected]
[email protected] 主要变更
参考Vue官方文档进行迁移, 这也是Vux组件的代码更新部分,主要包括:
:value.sync
已经废弃broadcast
方法已经废弃@click
需要更改为@click.native
v-for
的(index, item)
=>(item, index)
vue-router 更新
配合vue2, vue-router
同样需要更新到2.0版本以上
原来的路由配置修改为:
const routes = [{
path: '/vux/2.0',
component: Vux2Demo
}]
const router = new VueRouter({
routes
})
原来的路由挂载修改为:
new Vue({
router,
render: h => h(App)
}).$mount('#app')
go
已经不是过去的 go
了,要用push
方法来跳转
this.$router.go('/somewhere')
v-link
也废弃了,使用router-link
组件来代替
其他请参考官方升级文档: https://cn.vuejs.org/v2/guide/migration-vue-router.html
不再生成umd
文件
但是你可以使用npm run build-components
来生成,请参考文档首页。
双向绑定修改为 v-model
所有相关Vux调用的 :value.sync
都需要更改成 v-model
// 0.x
<component :value.sync="someValue"></component>
// 2.x
<component v-model="someValue"></component>
使用 vux-loader
原来你可能在webpack中做了这样的配置以正确编译vux的js源码:
{
test: /vux.src.*?js$/,
loader: 'babel'
}
或者你也可能使用了低版本vux-loader
的getBabelLoader
方法。
现在你可以直接删除这一句了,直接使用vux-loader。
在webpack.base.conf.js
中这样配置:
const vuxLoader = require('vux-loader')
module.exports = vuxLoader.merge(webpackConfig, {
options: {},
plugins: [
{
name: 'vux-ui'
}
]
})
引入方式变更
原来你可能是单个组件引入,现在在vux-loader
的支持下你可以直接这样写:
import { Group, Cell } from 'vux'
组件名字变更
为什么不参照其他组件库全部加上`X`前缀,主要是因为觉得总要写个`X`相当不顺手。
因Vue2.0限制组件名不能与原有的html5标签一样,因此部分组件进行了重命名,加上 x-
前缀,所有需要加前缀的组件如下:
Progress
=>XProgress
Switch
=>XSwitch
Dialog
=>XDialog
Address
=>XAddress
Circle
=>XCircle
XButton
XImg
XInput
XTextarea
XHeader
各个组件变更:
Swiper 引入路径变化
目录结构变化,与其他有子组件的统一,导致引入方式变化:
// 0.x
import Swiper from 'vux/src/components/swiper'
import SwiperItem from 'vux/src/components/swiper-item'
// 2.0
import Swiper from 'vux/src/components/swiper/swiper'
import SwiperItem from 'vux/src/components/swiper/swiper-item'
// 或者
import { Swiper, SwiperItem } from 'vux/src/components/swiper' // with vux-loader
ColorPicker 废弃
`2.0.0`可用用,但是后面不再维护。
这个组件可以由cell
配合slot
扩展出来,而且更灵活。没有做过统计,但是感觉使用人数应该挺少。
Countdown 废弃
`2.0.0`可用,但是后面不再维护。
功能薄弱,比较鸡肋。
Scroller reset方法更新
由于 [email protected] 的broadcast
方法已经废弃,并且之前的设计也并不是很好,uuid的绑定也其实是没必要的。
reset方法变成使用ref的
reset()
方法pullup reset 变成 ref 的
donePullup()
方法pullup disable 变成 ref 的
disablePullup()
方法pullup enable 变成 ref 的
enablePullup()
方法pulldown reset 变成 ref 的
donePulldown()
方法pullup和pulldown的status绑定变成
v-model="status"
绑定,示例status: { pullupStatus: 'default', pulldownStatus: 'default' }
详细参照Scroller文档进行更新
表单默认required为true
保持和html
规范一致, 影响的组件有 XInput
Checklist
Checklist 不显示错误提示
考虑到错误样式目前并不优雅,而用户有自定义错误样式的需要,因此处理成emit一个错误事件+底部slot, 用户可自行处理。
XInput 的valid获取
由于Vue2的$ref不再是响应的,因此不能直接在模板中通过ref调用组件的valid值(会报undefined),所以需要变成在提交时再进行ref来获取valid值。
XAddress 默认地址数据更新
目前引用方式:
import { XAddress, ChinaAddressData } from 'vux'
如果你想继续使用旧版本数据
import { XAddress, ChinaAddressV1Data } from 'vux'
按照最新统计局数据进行更新,部分区域已经不存在,部分id做了更新。因此请谨慎更新,评估后端数据存储设计和前端交互再进行更新,避免错误更新用户数据或者导致数据丢失。
完整更新如下图: