2016-09-11 12:00:00
Vux是基于WeUI和Vue开发的移动端UI组件库,主要面向微信公众账号页面。并提供了一些常用的工具。
安装
使用 Vue-cli 和 airyland/vux2 可以快速初始化项目。
#使用npm全局安装vue-cli
npm install --global vue-cli
#创建一个基于 webpack 模板的项目,xxx为项目名称
vue init airyland/vux2 xxx
cd xxx
#安装依赖
npm install
#运行 dev 模式
npm run dev
vux-loader
vux-loader 用来对Vue代码进行预处理，可以处理Vux之外的组件。简化webpack插件和loader的使用及配置。
例如通过js-parser插件解析main.js里的import来实现简洁的引入写法：
import { AlertPlugin, ToastPlugin } from 'vux'
<!-- 原来的写法 -->
import AlertPlugin from 'vux/src/plugins/Alert'
import ToastPlugin from 'vux/src/plugins/Toast'
vux-loader是通过vue-loader来实现的。通过在webpackloader前置vux-loader，并修改Vue-loader的代码来实现功能。
使用
onst webpackConfig = {} // 原来的webpack配置
const vuxLoader = require('vux-loader')
module.exports = vuxLoader.merge(webpackConfig, {
options: {},
plugins: [{
name: 'vux-ui'
}]
})
添加完配置之后需要重启npm run dev命令
Options：定义当前环境变量。可选。
Plugins: 插件列表
插件：
script-parser
替换javascript代码
{
name: 'script-parser',
fn: function (source) {
return source.replace('VARIABLE', 'v2')
}
}
style-parser
替换处理css style代码
{
name: 'style-parser',
fn: function (source) {
return source.replace('black', 'white')
}
}
template-parser
替换处理<template>中的代码，只要适用于某些更改不频繁但非服务端配置的文字，可以修改多次。也可以用来从接口获取最新配置替换特定的占位字符。
[
name: "template-parser",
replaceList: [{
test: /DeathToPM/g,
replaceString: 'XXXXX'
}, {
test: test string/g,
replaceString: 'xxxxx'
}],
fn: function (templateSource) {
return templateSource.replace('aa', 'bb')
}
]
js-parser
处理项目中的js文件，在babel-loader前进行处理
{
name: 'js-parser',
fn: function (source) {
return source.replace('black', 'white')
}
}
template-feature-switch
根据变量切换template中的代码
{
name: 'template-feature-switch',
features: {
a: true,
b: false
}
}
features：变量列表。变量列表中的变量只能是布尔类型。
<template>
<div>
<on feature="a">
AAA
</on>
<off feature="b">
BBB
</off>
</div>
</template>
那么当 a 为 true时，将输出 AAA, 反之则输出 BBB.
vux-ui
vux组件的配套工具，如果没有使用vux, 不需要添加.
该插件的功能：
1.配置babel编译 vux 的js源码
2.修改vue-loader为 vux-loader!vue-loader
3.import组件调用解析为单组件引入
i18n
多语言配置
{
name: 'i18n',
vuxStaticReplace: true,
vuxLocale: 'en'
}
动态切换语言：
{
name: 'i18n',
vuxStaticReplace: false,
staticReplace: false,
extractToFiles: 'src/locales/components.yml',
localeList: ['en', 'zh-CN']
}
less-theme
path所在文件必须是简单的less变量对，不能import其他文件或者引入变量
替换和设置less变量
{
name: 'less-theme',
path: 'src/styles/theme.less'
}
如：
```javascript
<style lang="less">
.info {
color: @font-size;
}
</style>
duplicate-style
清除css中的重复代码
在webpack 构建完成后对生成的css文件使用cssnano进行重复样式清除。建议只在production环境下开启，因为dev环境没有必要。
{
name: 'duplicate-style',
events: {
done: function () {
console.log('done!')
}
}
}
html-build-callback
html文件处理事件回调,适用于在写入html(一般为index.html)文件前进行内容修改，比如替换特定内容 比如写入js配置变量，改变cdn域名，将manifest文件直接写入html以减少请求等
{
name: 'html-build-callback',
events: {
'after-html-processing': function (data, cb) {
data.html += 'magic footer'
cb(null, data)
}
}
}
build-done-callback
构建完成事件回调 在webpack plugin的 done 事件后触发
{
name: 'build-done-callback',
fn: function () {
console.log('done!')
}
}
工具库
- debounce 和 throttle
debounce：在规定的延时时间内将多个顺序的调用合并为一次
throttle：在规定的时间间隔内保证某个调用只执行一次
<!-- debounce -->
import { debounce } from 'vux'
debounce(func, [wait=0], [options={}])
<!-- throttle -->
import { throttle } from 'vux'
throttle(func, [wait=0], [options={}])
- cookie
import { cookie } from 'vux'
//获取cookie
cookie.get('bar', function(s) { return parseInt(s); } )
//设置cookie
cookie.set('bar', 4, {
domain: 'example.com',
path: '/',
expires: 30
})
//remove
cookie.remove('bar', {
domain: 'example.com',
path: '/'
})
cookie.remove('foo')
- bas64 和 MD5
import { base64 } from 'vux'
base64.encode('VUX')
base64.decode('VlVY')
import { md5 } from 'vux'
md5('VUX')
- 日期格式化
import { dateFormat } from 'vux'
dateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss')
- number 格式化工具
import { numberComma, numberPad, numberRandom } from 'vux'
numberComma(21342132) // 21,342,132
numberComma(21342132, 4) // 2134,2132
numberComma(21342132.234) // 21,342,132.234
numberPad(1) // 01
numberPad(234, 4) // 0234
numberRandom(1, 7) // 2
numberComma：分割数字，默认为3位分割
numberPad： 按照位数补0
numberRandom：生成两个整数范围内的随机整数
- string trim
import { stringTrim } from 'vux'
stringTrim(' 1024 ') // 1024
- url 参数解析
import { querystring } from 'vux'
querystring.parse('a=b&c=d') // 结果：{a:'b',c:'d'}, 默认参数为 location.search
querystring.stringify({a:'b',c:'d'}) // 'a=b&c=d'，注意不支持复杂嵌套的结构
Axios
vux推荐使用Axios来发送ajax请求，axios是基于Promise的。
安装：
npm install axios
使用：
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
可以使用vue-axios 来整合vue 和 axios
npm install --save axios vue-axios
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
使用起来就方便了,
Vue.axios.get('https://api.github.com/users/StevenDXC/repos').then((response) => {
console.log(response)
}).catch((error) => {
console.log(error)
})
Store
vux 提供了一个Store组件来保存状态，很轻量，使用也很简单。例如发送请求的时候等待：
注册一个保存loading状态的Module
const store = new Vuex.Store()
store.registerModule('vux', {
state: {
isLoading: false
},
mutations: {
updateLoadingStatus (state, payload) {
state.isLoading = payload.isLoading
}
}
})
在vue-router的beforeEach和afterEach事件回调中来更改loading状态
router.beforeEach(function (to, from, next) {
store.commit('updateLoadingStatus', {isLoading: true})
next()
})
router.afterEach(function (to) {
store.commit('updateLoadingStatus', {isLoading: false})
})
在app.vue中来获取laoding的状态
<loading v-model="isLoading"></loading>
import { Loading } from 'vux'
import { mapState } from 'vuex'
export default {
components: {
Loading
},
computed: {
...mapState({
isLoading: state => state.vux.isLoading
})
}
}
支持的组件
vux 支持大部分兼容Android 和 IOS 样式的组件
navigation bar: xHeader
Actionshet
Alert
下方tab导航栏：ButtonTab
Calendar：日期选择
card
等等，足够完成一个比较复杂的H5应用。
网友评论