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

[email protected] 已經停止維護,請盡快遷移到 [email protected] & [email protected] & [email protected],雖然要花點時間,但是完全值得。

快速入門

使用 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模板主要處理的事項:

相關鏈接

發表評論

经典黑杰克游戏