npm i weex-flymeui -S
<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 来只引入需要的组件打包,同时如果没有安装 babel-preset-stage-0
,也需要一并安装。
npm i babel-preset-stage-0 babel-plugin-component -D
// 增加一个plugins的配置到 .babelrc 中
{
"presets": ["es2015", "stage-0"],
"plugins": [
[
"component",
{
"libraryName": "weex-flymeui",
"libDir": "packages",
"style": false
}
]
]
}
npm i
npm run start
一旦编译完成后,将会自动打开一个浏览器,你可以在浏览器打开开发者工具,这时候在 console 中你可以看到一个预览二维码,直接使用你的 Weex App 扫码就可以看到 Demo 效果。
如果你使用 weex-toolkit 来开发你的Weex项目,你需要向 .babelrc 文件中加入 'state-0' 和 'babel-plugin-component'
npm i babel-preset-stage-0 babel-plugin-component -D
{
"presets": ["es2015", "stage-0"],
"plugins": [
[
"component",
{
"libraryName": "weex-flymeui",
"libDir": "packages"
}
]
]
}
?> 目前部分组件没有进行 iOS 的适配,欢迎 提交 Issue 或 PR
!> Weex-FlymeUI 组件均以 1080px 屏幕宽度作为基准尺寸,请在入口文件或者父组件设置 viewport。
index.js
const meta = weex.requireModule('meta')
// 配置 viewport 的宽度为 1080px
meta.setViewport({
width: 1080px
})
index.html
<!-- 添加以下 meta -->
<meta name="weex-viewport" content="1080"/>
我们致力于 Flyme 设计在移动领域的推广,同时在寻找志同道合的朋友。如果你在使用中发现任何问题或有更好的想法,欢迎提交 pull request,并且在提交前记得阅读一下 贡献指南。
- 遵循 MIT 协议
- 请自由地享受和参与开源