使用Vue封装,为微信Web服务量身设计(Work with WeUI 0.4.0+)css
扫描二维码在手机查看vue
或直接访问 http://adcentury.github.io/vue-weuigit
vue-weui中组件与css彻底解绑,既给予了开发者自主性和灵活性,也能最大限度减小文件大小。安装css方法以下:github
npm install --save weuinpm
以后,只需在页面中引入dist/style/weui.css
或者dist/style/weui.min.css
其中之一便可. 例如:微信
<head>ui
<meta charset="UTF-8">spa
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">scala
<title>Vue WeUI</title>设计
<link rel="stylesheet" href="path/to/weui/dist/style/weui.min.css"/>
</head>
npm install vue-weui --save
// 引用全部组件
import VueWeui from 'vue-weui';
export default {
components: VueWeui
};
// 引用部分组件
import {Dialog} from 'vue-weui';
// 或
// 只引用须要的文件,减小文件大小
import Dialog from 'vue-weui/components/dialog/dialog.vue';
export default {
components: {
Dialog
}
};
var Dialog = require('vue-weui').Dialog;
// 或
var Dialog = require('vue-weui/components/dialog/dialog.vue');
new Vue({
components: {
'dialog': Dialog
}
});
git clone https://github.com/adcentury/vue-weui
cd vue-weui && npm install
npm start
open http://localhost:8080 in browser