Fe - use of weex development weex UI components and configuration use

weex-ui

weex - ui Made by Ali Feizhu

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

Use

Get into weex Project root

npm i weex-ui -S

To configure

(1) Use

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

The disadvantage is that it imports all weex-ui Components , Will also pack ;

1. Installing a plug-in

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

2. Configuration plug-ins

stay .babelrc Add plug-in configuration to the file

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

3. Use

Take the title as an example

<template class="HomeView">

    <div>

        <wxc-minibar title=" Rui livestock insurance " background-color="#009ff0" text-color="#FFFFFF" right-text=" more "></wxc-minibar>
        <text>Index  page </text>


    </div>

</template>

<script> import {WxcMinibar} from 'weex-ui' export default{ name: "HomeView", components: { WxcMinibar }, created(){ } } </script>

<style> </style>

(2) In another way

Only import the components you want to use

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