weex-lrui
Version:
A Flyme Style UI library based on Weex for Creator.
127 lines (98 loc) • 3.56 kB
Markdown
# Weex FlymeUI
[](https://travis-ci.org/Yanjiie/weex-flymeui)
[](https://github.com/alibaba/weex-flymeui/commits/master)
[](https://www.npmjs.com/package/weex-flymeui?_blank)
[](https://github.com/FlymeApps/weex-flymeui/blob/master/LICENSE)
> 遵循 [Flyme](https://www.flyme.cn/) 系统设计风格、基于 [Weex](https://github.com/apache/incubator-weex) 的跨平台通用组件库。
## 安装
```shell
npm i weex-flymeui -S
```
## 使用
```vue
<template>
<div>
<fm-button @buttonClick="buttonClicked" theme="blue">安装</fm-button>
</div>
</template>
<script>
import { FmButton } from 'weex-flymeui';
// 或者 import FmButton from 'weex-flymeui/packages/fm-button';
export default {
components: { FmButton },
methods: {
buttonClicked () {
// enter your code
}
}
};
</script>
```
## 使用前
如果你不想打包所有的组件，需要使用 [babel-plugin-component](https://www.npmjs.com/package/babel-plugin-component) 来只引入需要的组件打包，同时如果没有安装 `babel-preset-stage-0`，也需要一并安装。
```shell
npm i babel-preset-stage-0 babel-plugin-component -D
```
```json
// 增加一个plugins的配置到 .babelrc 中
{
"presets": ["es2015", "stage-0"],
"plugins": [
[
"component",
{
"libraryName": "weex-flymeui",
"libDir": "packages",
"style": false
}
]
]
}
```
## 运行 Demo
```shell
npm i
npm run start
```
一旦编译完成后，将会自动打开一个浏览器，你可以在浏览器打开开发者工具，这时候在 console 中你可以看到一个预览二维码，直接使用你的 Weex App 扫码就可以看到 Demo 效果。
## Weex-toolkit
如果你使用 [weex-toolkit](https://github.com/weexteam/weex-toolkit) 来开发你的Weex项目，你需要向 .babelrc 文件中加入 'state-0' 和 'babel-plugin-component'
```shell
npm i babel-preset-stage-0 babel-plugin-component -D
```
```javascript
{
"presets": ["es2015", "stage-0"],
"plugins": [
[
"component",
{
"libraryName": "weex-flymeui",
"libDir": "packages"
}
]
]
}
```
## 需要注意的地方
?> 目前部分组件没有进行 iOS 的适配，欢迎 [提交 Issue 或 PR](https://github.com/FlymeApps/weex-flymeui/issues/new)
!> Weex-FlymeUI 组件均以 1080px 屏幕宽度作为基准尺寸，请在入口文件或者父组件设置 viewport。
*index.js*
```javascript
const meta = weex.requireModule('meta')
// 配置 viewport 的宽度为 1080px
meta.setViewport({
width: 1080px
})
```
*index.html*
```html
<!-- 添加以下 meta -->
<meta name="weex-viewport" content="1080"/>
```
## 贡献代码
我们致力于 Flyme 设计在移动领域的推广，同时在寻找志同道合的朋友。如果你在使用中发现任何问题或有更好的想法，欢迎提交 pull request，并且在提交前记得阅读一下 [贡献指南](https://github.com/FlymeApps/weex-flymeui/blob/master/CONTRIBUTING.md)。
## 协议
* 遵循 [MIT 协议](http://opensource.org/licenses/MIT)
* 请自由地享受和参与开源