项目作者: adcentury

项目描述 :
(Deprecated) WeUI Components with love of vue.js
高级语言: Vue
项目地址: git://github.com/adcentury/vue-weui.git
创建时间: 2015-11-19T01:53:53Z
项目社区:https://github.com/adcentury/vue-weui

开源协议:MIT License

下载


(Deprecated) vue-weui

感谢对vue-weui的支持,由于在vue-weui最后提交之后,vue和weui都进行了较大幅度的更新,且我没有更多的时间和精力来跟进,所以此项目今后将不再维护,如果有需要可以使用其他相关库,再次感谢。


npm package dependencies status npm downloads

使用Vue封装,为微信Web服务量身设计(Work with WeUI 0.4.0+)

特点

  • 使用Vue封装了WeUI的所有组件
  • 通过npm安装,可以一次引入所有组件,也可选择只引入需要的组件
  • 不带一行css,与WeUI样式完全解绑,可以方便地进行自定义

预览

qr-of-examples

扫描二维码在手机查看

或直接访问 http://adcentury.github.io/vue-weui

安装

安装weui

vue-weui中组件与css完全解绑,既给予了开发者自主性和灵活性,也能最大限度减少文件大小。安装css方法如下:

  1. npm install --save weui

之后,只需在页面中引入dist/style/weui.css或者dist/style/weui.min.css其中之一即可. 例如:

  1. <head>
  2. <meta charset="UTF-8">
  3. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  4. <title>Vue WeUI</title>
  5. <link rel="stylesheet" href="path/to/weui/dist/style/weui.min.css"/>
  6. </head>

安装vue-weui

  1. npm install vue-weui --save

使用

引用

ES6

  1. // 引用所有组件
  2. import VueWeui from 'vue-weui';
  3. export default {
  4. components: VueWeui
  5. };
  6. // 引用部分组件
  7. import {Dialog} from 'vue-weui';
  8. // 或
  9. // 只引用需要的文件,减少文件大小
  10. import Dialog from 'vue-weui/components/dialog/dialog.vue';
  11. export default {
  12. components: {
  13. Dialog
  14. }
  15. };

CommonJS

  1. var Dialog = require('vue-weui').Dialog;
  2. // 或
  3. var Dialog = require('vue-weui/components/dialog/dialog.vue');
  4. new Vue({
  5. components: {
  6. 'dialog': Dialog
  7. }
  8. });

组件列表和使用说明

点击查看组件列表

查看示例

  1. git clone https://github.com/adcentury/vue-weui
  2. cd vue-weui && npm install
  3. npm start
  4. open http://localhost:8080 in browser

变更日志

点击查看变更日志

反馈

有任何意见和建议请提交issue或PR,谢谢。