工作生活

Vux体验

2019-06-30  本文已影响0人  SimpleFunc

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 -->
import { debounce } from 'vux'
debounce(func, [wait=0], [options={}])

<!-- throttle -->
import { throttle } from 'vux'
throttle(func, [wait=0], [options={}])

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')

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')

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：生成两个整数范围内的随机整数

import { stringTrim } from 'vux'
stringTrim(' 1024 ') // 1024

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应用。

全部组件及文档

上一篇下一篇

猜你喜欢

热点阅读