FE - weex 开发 之 使用 weex-ui 组件与配置使用

weex-ui

weex - ui 阿里飞猪出品

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

使用

进入 weex 项目根目录

npm i weex-ui -S

配置

(1) 以下面方式使用

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

缺点是导入了全部的 weex-ui 组件，也会打包；

1. 安装插件

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

2. 配置插件

在 .babelrc 文件中添加插件配置

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

3.使用

以标题为例子

<template class="HomeView">

    <div>

        <wxc-minibar title="睿畜保"
                      background-color="#009ff0"
                      text-color="#FFFFFF"
                      right-text="更多"></wxc-minibar>
        <text>Index 页面</text>


    </div>

</template>

<script>

    import {WxcMinibar} from 'weex-ui'


    export default{
        name: "HomeView",
        components: {
            WxcMinibar
        },
        created(){
        }
    }
</script>

<style>
</style>

(2) 以另一种方式

只导入自己想用的组件即可

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