1.拆分WeUI样式,不需要引入vux.css
该版本最大的变化是拆分了WeUI样式到各个组件,真正实现按需加载。唯一需要引入的是reset样式。reset样式可以根据需要自行编写或者直接引入。具体调整如下:
- 不再需要也不推荐引入vux.css, 这是所有组件的样式集合
- 手动引入reset样式或者自行实现
- vue-cli项目不再需要任何其他样式,组件里已经包含了样式
- 常规项目需要手动引入每个组件的样式,位于
dist/components/$name/style.css
从旧版本升级
(1)如果是 vue-cli 创建的项目并且引用.vue组件
请删除原来vux.css
的引入并手动在App.vue
引入reset.less
<style lang="less">
@import '~vux/src/styles/reset';
</style>
注意:因为当前vue-loader
在构建时并不能对重复样式进行删除,所以需要手动引用cssnano处理一下,参考: https://github.com/airyland/vux/blob/master/build/nano-css.js
(2)如果是常规形式的项目
请删除全量vux.css的引入并直接引入 reset.css
<link rel="stylesheet" type="text/css" href="vux/dist/styles/reset">
为每个调用到的组件引入相应的样式,如tab组件
<link rel="stylesheet" type="text/css" href="vux/dist/components/tab/style.css">
常规形式的项目上线前请使用合并压缩工具进行处理。
2.工具样式说明
工具样式包括1px解决方案等,位于 src/styles/.less,对于常规项目,请使用 /dist/styles/.css
3.组件说明
Checklist
- [change]
title
属性不再必需 - [enhance] 当没有title时隐藏title所在div @datoulei
Popup
Dialog
- [new] 添加
hideOnBlur
属性,支持点击遮罩时关闭弹窗 @chenyun
XSwiper
- [new] 添加
XSwiper
组件,用于更复杂的swiper需求 @xingangsun
Swiper
Datetime
- [change] 添加
placeholder
, value不再可以设置为提示文字
PopupPicker, Address
- [new] 支持
on-show
,on-hide
事件 #300
Checker
- [new] 支持多选 #289
Tabbar
- [fix] 修复没有使用
vue-router
时报错 #295
Scroller
- [new] 支持动态使用及停用 pullup @lichunqiang @bammoo #290
4. 针对vue-cli的vuxjs/webpack模板,方便用户快速上手
现在可以在创建项目时指定vuxjs模板了, 引入了vue-router, 妈妈再不也不担心会忘写viewport设置,不会(忘记)设置loader的问题了~
vue init vuxjs/webpack