weex 项目开发（三） weex + weex-ui

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

https://alibaba.github.io/weex-ui/#/cn/

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

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"

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

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

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