升级到 vux@2.x

Vue@2.x 主要变更

参考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方法更新

由于 Vue@2.x 的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做了更新。因此请谨慎更新，评估后端数据存储设计和前端交互再进行更新，避免错误更新用户数据或者导致数据丢失。

完整更新如下图: