Weex Ui 是一個基於 Weex 的富交互、輕量級、高性能的移動端 UI 組件庫

Github資源：https://github.com/alibaba/weex-ui

預覽

你可以通過飛豬、淘寶、天貓、Weex Playground 或者瀏覽器掃碼體驗

安裝

npm i weex-ui -S

使用

<template>   <div>     <wxc-button text="Open Popup"                 @wxcButtonClicked="buttonClicked"></wxc-button>     <wxc-popup width="500"                pos="left"                :show="isShow"                @wxcPopupOverlayClicked="overlayClicked"></wxc-popup>   </div> </template> <script>   import { WxcButton, WxcPopup } from 'weex-ui';   module.exports = {     components: { WxcButton, WxcPopup },     data: () => ({       isShow: false     }),     methods: {       buttonClicked () {         this.isShow = true;       },       overlayClicked () {         this.isShow = false;       }     }   }; </script>

匯集使用 (推薦)

import { WxcComponent1, WxcComponent2 } from "weex-ui"

為了不打包所有的組件，你需要使用 babel-plugin-component 來只引入需要的組件打包。

npm i babel-plugin-component -D

// 增加一個plugins的配置到 .babelrc 中
{
  "plugins": [     [       "component",       {         "libraryName": "weex-ui",         "libDir": "packages"       }     ]   ] }

分開使用

import WxcComponent1 from "weex-ui/packages/wxc-component1" import WxcComponent2 from "weex-ui/packages/wxc-component2"

Weex-toolkit

如果你使用weex-toolkit來開發你的Weex項目，你需要向 .babelrc 文件中加入 'state-0' 和 'babel-plugin-component'

npm i babel-preset-stage-0 babel-plugin-component  -D

{
  "presets": ["es2015", "stage-0"],   "plugins": [     [       "component",       {         "libraryName": "weex-ui",         "libDir": "packages"       }     ]   ] }