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"