weex 框架开发的UI库 weex-ui 的配置使用

weex-ui

weex - ui 阿里飞猪出品

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

使用

进入 weex 项目根目录

npm i weex-ui -S

关注我的微信公众号【前端基础教程从0开始】，加我微信，可以免费为您解答问题。回复“1”，拉你进程序员技术讨论群。回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”，领取300G前端，Java，微信小程序，Python等资源，让我们一起学前端。

配置

(1) 以下面方式使用
import { WxcComponent1, WxcComponent2 } from “weex-ui”

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

安装插件

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

配置插件

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

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

使用

以标题为例子

<div>

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


</div>

(2) 以另一种方式

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

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