weex-ui-demo
Weex Ui
一个基于 Weex 的富交互、轻量级、高性能的 UI 组件库
文档
预览
你可以通过飞猪、淘宝、天猫、Weex Playground 或者浏览器扫码体验
安装
npm i igola-weex-ui -S
使用
<template>
<div>
<wxc-button text="Open Popup"
@wxcButtonClicked="buttonClicked">
</wxc-button>
<wxc-popup width="500"
pos="left"
:show="isShow"
@wxcPopupOverlayClicked="overlayClicked">
</wxc-popup>
</div>
</template>
<script>
import { WxcButton, WxcPopup } from 'igola-weex-ui';
// 或者分开引用(不是很推荐)
// import WxcButton from 'igola-weex-ui/packages/wxc-button';
// import WxcPopup from 'igola-weex-ui/packages/wxc-popup';
module.exports = {
components: { WxcButton, WxcPopup },
data: () => ({
isShow: false
}),
methods: {
buttonClicked () {
this.isShow = true;
},
overlayClicked () {
this.isShow = false;
}
}
};
</script>
使用前
为了不打包所有的组件,你需要使用 babel-plugin-component
来只引入需要的组件打包,同时如果没有安装 babel-preset-stage-0
,也需一并安装。
npm i babel-preset-stage-0 babel-plugin-component -D
{
"presets": ["es2015", "stage-0"],
"plugins": [
[
"component",
{
"libraryName": "igola-weex-ui",
"libDir": "packages",
"style": false
}
]
]
}
更多
- 如果
webpack.config.js
中 babel-loader 有对 node_modules 进行 exclude 处理,请修改成这样exclude: /node_modules(?!(\/|\\).*(weex).*)/
- 更多使用可见:在 weex-toolkit 创建的项目中使用 Weex Ui 和 weex-ui-demo
- 为了获取最新特性, 请常查看 升级日志 并更新组件到最新版本
- 很多常见问题可以从 faq 和 issue 列表 获得答案,假如发现了新 Bug,可以给我们提一个issue
- 更多的 Weex 建设经验可以从 Weex + Ui - Weex Conf 2018 这篇文章了解,欢迎翻译~
调试
npm i
npm run start
一旦它编译完成后,将会自动打开一个浏览器,你可以将浏览器切换到开发者模式,这时候在 console 中你可以看到一个预览二维码,直接使用你的 Weex App 扫码就可以看到 Demo 效果。
贡献
想解 Bug,贡献代码或者提高文档可读性?有这个想法非常好,在提交 pull request 前记得阅读一下 Contributing Guide。
感谢给 Weex Ui 贡献代码的你们!
协议
- 遵循 MIT 协议
- 请自由地享受和参与开源
Dependencies
Dependencies
@vue/test-utils: ^1.0.0-beta.29autoprefixer: ^8.0.0babel-core: ^6.26.0babel-eslint: ^8.2.1babel-loader: ^7.1.1babel-plugin-istanbul: ^4.1.6babel-preset-stage-0: ^6.24.1chai: ^4.1.2compression: ^1.7.4css-loader: ^0.28.8eslint: ^4.15.0eslint-config-standard: ^10.2.1eslint-friendly-formatter: ^3.0.0eslint-loader: ^1.7.1eslint-plugin-chai-friendly: ^0.4.1eslint-plugin-import: ^2.7.0eslint-plugin-node: ^5.2.0eslint-plugin-promise: ^3.4.0eslint-plugin-standard: ^3.0.1eslint-plugin-vue: ^4.0.0express: ^4.17.1extract-text-webpack-plugin: ^3.0.2friendly-errors-webpack-plugin: ^1.6.1fs-extra: ^5.0.0glob: ^7.1.2html-webpack-plugin: ^2.30.1html-webpack-plugin-for-multihtml: ^2.30.2ip: ^1.1.5karma: ^1.7.1karma-chrome-launcher: ^3.1.0karma-coverage: ^1.1.1karma-mocha: ^1.3.0karma-sinon-chai: ^1.3.3karma-sourcemap-loader: ^0.3.7karma-spec-reporter: 0.0.31karma-viewport: ^1.0.4karma-webpack: ^2.0.6mocha: ^5.2.0node-notifier: ^5.1.2node-sass: ^4.12.0phantom-limb: 0.0.1portfinder: ^1.0.13postcss-import: ^11.0.0postcss-loader: ^2.0.9postcss-plugin-weex: ^0.1.6puppeteer: ^1.20.0raw-loader: ^0.5.1rimraf: ^2.6.2sass-loader: ^7.1.0script-ext-html-webpack-plugin: ^1.8.5sinon: ^4.1.3sinon-chai: ^2.14.0uppercamelcase: ^3.0.0vue: ^2.5.11vue-loader: ^12.2.0vue-router: ^3.0.1vue-style-loader: ^3.0.3vue-template-compiler: ^2.5.11webpack: ^3.10.0webpack-dev-server: ^2.9.7webpack-merge: ^4.1.0webpack-uglify-parallel: ^0.1.4weex-loader: ^0.7.2weex-vue-precompiler: ^0.1.17weex-vue-render: ^1.0.17ws: ^1.1.0