FE

来源：互联网发布：淘宝店铺活动如何取消编辑：程序博客网时间：2024/05/17 04:24

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"

阅读全文

0 0