版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/LABLENET/article/details/78353076
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"