关于Vue-ydui
Vue-ydui 是 YDUI Touch 的一个Vue2.x实现版本，专为移动端打造，在追求完美视觉体验的同时也保证了其性能高效。
通过“扫描二维码”或 点击这里 了解 vue-ydui 能做什么？
特性
提供使用 rem 和 px 样式单位的两个版本；
高质量、功能丰富；
友好的 API ，自由灵活地使用空间；
细致、漂亮的 UI；
使用单文件的 Vue 组件化开发模式；
基于 npm + webpack + babel 开发，支持 ES2015；
真正意义上的按需加载组件，可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。
使用之前
高效的开发，离不开基础工程的搭建。在开始使用 vue-ydui 之前，有必要先了解 Vue 的相关基础知识以及Vue 组件，并了解移动端相关特性；
以下概念贯穿 vue-ydui 前后，建议开发者花点时间来了解。
props传递数据；
slot内容分发；
$emit事件；
@click.native绑定原生事件，在Vue2.x中，为自定义组件绑定原生事件必须使用 .native 修饰符；
另外 vue-ydui 有 使用px 和 使用rem 样式单位的两个版本，使用 rem 需了解其相关知识。
rem是相对根元素<html>的字体大小变化而变化的css单位，通过 ydui.flexible.js 改变根元素的字体大小实现屏幕自适应，具体请参看这里。
CDN引入
通过 unpkg.com/vue-ydui 可以看到 vue-ydui 最新版本的资源，在页面上引入 js 和 css 文件即可开始使用（考虑网络原因，建议下载至本地）。
【使用rem】：
<!-- 引入Vue2.x -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- 使用rem，需另外引入ydui.flexible.js自适应类库 -->
<link rel="stylesheet" href="//unpkg.com/vue-ydui/dist/ydui.rem.css">
<script src="//unpkg.com/vue-ydui/dist/ydui.flexible.js"></script>
<!-- 引入组件库 -->
<script src="//unpkg.com/vue-ydui/dist/ydui.js"></script>【使用px】：
<!-- 引入Vue2.x -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- 使用px -->
<link rel="stylesheet" href="//unpkg.com/vue-ydui/dist/ydui.px.css">
<!-- 引入组件库 -->
<script src="//unpkg.com/vue-ydui/dist/ydui.js"></script>示例
通过 CDN 可以快速使用 vue-ydui 写出一个示例，您可以复制下面代码或在线预览。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Vue-ydui Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入样式 -->
<link rel="stylesheet" href="//unpkg.com/vue-ydui/dist/ydui.rem.css">
<!-- 引入rem自适应类库 -->
<script src="//unpkg.com/vue-ydui/dist/ydui.flexible.js"></script>
</head>
<body>
<div id="app">
<yd-button type="primary" @click.native="handleClick">Click Me!</yd-button>
</div>
<!-- 引入 Vue -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="//unpkg.com/vue-ydui/dist/ydui.js"></script>
<script>
new Vue({
el: '#app',
methods: {
handleClick: function () {
this.$dialog.alert({mes: 'Hello World!'});
}
}
})
</script>
</body>
</html>NPM 安装
推荐使用 npm 来安装，享受生态圈和工具带来的便利，更好地和 webpack 配合使用，当然，也推荐使用 ES2015。
$ npm install vue-ydui --save# 目录结构
vue-ydui /* 通过 npm install vue-ydui 下载的目录结构 */
|
|-- dist
| |-- lib.px /* 采用 px（css单位）的独立单个组件 */
| | |-- actionsheet
| | |-- badge
| | |-- ...
| |
| |-- lib.rem /* 采用 rem（css单位）的独立单个组件 */
| | |-- actionsheet
| | |-- badge
| | |-- ...
| |
| |-- ydui.base.css /* 重置基础样式（其未包含任何组件样式） */
| |-- ydui.rem.css /* 采用 rem（css单位）的所有组件样式 */
| |-- ydui.px.css /* 采用 px（css单位）的所有组件样式 */
| |-- ydui.flexible.js /* rem 自适应类库 */
| |-- ydui.js /* vue-ydui 核心文件 */
| |
|-- LICENSE
|-- package.json
|-- README.md# 全局引入
一般在 webpack 入口文件 main.js 中如下配置：
import Vue from 'vue';
import YDUI from 'vue-ydui';
import 'vue-ydui/dist/ydui.rem.css';
/* 使用px：import 'vue-ydui/dist/ydui.px.css'; */
Vue.use(YDUI);
new Vue({
el: '#app',
render: h => h(App)
});注：若引入vue-ydui/dist/ydui.rem.css，则需在入口页面的 head 标签内引入 ydui.flexible.js，像这样：
<script src="//unpkg.com/vue-ydui/dist/ydui.flexible.js"></script># 按需引入
如果您想在 webpack 中按需使用组件，减少文件体积，可以这样写（引入“lib.rem”组件需在入口页面引入ydui.flexible.js，同上）：
import {ActionSheet} from 'vue-ydui/dist/lib.rem/actionsheet';
/* 使用px：import {ActionSheet} from 'vue-ydui/dist/lib.px/actionsheet'; */
Vue.component(ActionSheet.name, ActionSheet);注意：按需引入单个组件，另需导入重置基础样式（其未包含任何组件样式），即在入口文件 main.js 中如下配置：
import 'vue-ydui/dist/ydui.base.css';或在入口页面的 head 标签内直接引入：
<link rel="stylesheet" href="//unpkg.com/vue-ydui/dist/ydui.base.css">版本
最新版本：v {{version}}
参与
使用本项目，意味着你也有义务帮助其变得更好。有任何建议或意见您可以进行Pull Request，或者给我提问。
提问时，请尽可能的详细描述问题，我会尽可能快的回复。
不要通过联系QQ的方式给我提问题，因为有时工作或生活忙导致将其遗忘。