VUE

基于 WeUI 和 Vue(2.x) 开发的移动端UI组件库VUX

Vux(读音 [v'ju:z],同views)是基于 WeUI 和 Vue(2.x) 开发的移动端UI组件库,主要服务于微信页面。
基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUI的基础上定制需要的样式。
vux-loader保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码。 
vux并不完全依赖于WeUI,但是尽量保持整体UI样式接近WeUI的设计规范。最初目标是创建一个易用,实用,美观的移动端UI组件库,现在离理想状态还有不少距离,因此需要大家及时反馈问题及贡献代码。

基于 WeUI 和 Vue(2.x) 开发的移动端UI组件库VUX

安装使用(webpack)

如果你从没使用过VUX,请直接看下面的快速入门。

直接安装或者更新:

npm install vux --save 

或者使用 yarn

yarn add vux // 安装 yarn upgrade vux // 更新 

如果你是从0.x更新,请参考: 更新到2.x

vux2必须配合vux-loader使用, 请在build/webpack.base.conf.js里参照如下代码进行配置:

const vuxLoader = require('vux-loader') module.exports = vuxLoader.merge(webpackConfig, { options: {}, plugins: [
    { name: 'vux-ui' }
    ]
}) 

vux@0.x 已经停止维护,请尽快迁移到 vue@2.x & vuex@2.x & vux@2.x,虽然要花点时间,但是完全值得。

快速入门

使用 vue-cli 工具和 airyland/vux2 模板快速初始化项目

默认为 webpack2 模板,如果你需要使用webpack1,请使用 vue init airyland/vux2#webpack1 projectPath

npm install vue-cli -g // 如果还没安装
vue init airyland/vux2 projectPath cd projectPath
npm install --registry=https://registry.npm.taobao.org
npm run dev 

请特别注意,直接使用 cnpm 可能会导致依赖不正确。强烈建议给 npm 设置 taobao 的 registry。
npm install --registry=https://registry.npm.taobao.org

如果你已经用上了 yarn,建议这样
yarn config set registry https://registry.npm.taobao.org
yarn

调用示例

.vue文件中调用组件

<template> <div> <group> <cell title="title" value="value"></cell> </group> </div> </template> <script> import { Group, Cell } from 'vux' export default { components: {
    Group,
    Cell
  }
} </script> 

main.js中调用plugin

import { AlertPlugin, ToastPlugin } from 'vux' Vue.use(AlertPlugin)
Vue.use(ToastPlugin) // 详细使用请参考对应组件文档 

手动使用

折腾能力强的同学参考一下,下面即vuxjs/vux2模板主要处理的事项:

相关链接

发表评论