weex-ui简单使用

https://github.com/alibaba/weex-ui

weex初始环境搭建的官方命令，挺好使的

brew install node
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g weex-toolkit@latest

使用weex-ui条件
node >= 8.0, npm >= 5

node -v
npm -v

升级weex-toolkit至最新

cnpm install -g weex-toolkit@latest

安装 weex-ui

cnpm i weex-ui@latest -S

安装babel-preset-stage-0(babel编译)和 babel-plugin-component (优化 weex-ui 包的组件引用)

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

同时修改weex项目下的.babelrc如下

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

导入组件

<script>
  import { WxcLightbox } from 'weex-ui';
  export default {
    components: {
      WxcLightbox
    },
    ....

使用组件

<template>
  <div class="container">
    <wxc-lightbox
      height="100"
      :show="show"
      :image-list="imageList"
      @wxcLightboxOverlayClicked="wxcLightboxOverlayClicked">
    </wxc-lightbox>
    ...

如果最后你一直报错什么缺少bable-corl什么的可以参考
https://github.com/alibaba/weex-ui/issues/137
将文件/usr/local/lib/node_modules下的weex-toolkit反复删除，反复执行npm install -g weex-toolkit@latest就正常了