快速上手
關(guān)于Vue-ydui
Vue-ydui 是 YDUI Touch 的一個Vue2.x實現(xiàn)版本，專為移動端打造，在追求完美視覺體驗的同時也保證了其性能高效。
通過“掃描二維碼”或 點擊這里 了解 vue-ydui 能做什么？
特性
提供兩種樣式單位（rem 和 px）版本；
高質(zhì)量、功能豐富；
友好的 API ，自由靈活地使用空間；
細致、漂亮的 UI；
使用單文件的 Vue 組件化開發(fā)模式；
基于 npm + webpack + babel 開發(fā)，支持 ES2015；
真正意義上的按需加載組件，可以只加載聲明過的組件及其樣式文件，無需再糾結(jié)文件體積過大。
使用之前
高效的開發(fā)，離不開基礎工程的搭建。在開始使用 vue-ydui 之前，有必要先了解 Vue 的相關(guān)基礎知識以及Vue 組件，并了解移動端相關(guān)特性；
以下概念貫穿 vue-ydui 前后，建議開發(fā)者花點時間來了解。
props傳遞數(shù)據(jù)；
slot內(nèi)容分發(fā)；
$emit事件；
@click.native綁定原生事件，在Vue2.x中，為自定義組件綁定原生事件必須使用修飾符；
另外 vue-ydui 有 使用px 和 使用rem 樣式單位的兩個版本，使用 rem 需了解其相關(guān)知識。
rem是相對根元素<html>的字體大小變化而變化的css單位，通過 ydui.flexible.js 改變根元素的字體大小實現(xiàn)屏幕自適應，具體請 參看這里。
CDN引入
通過 unpkg.com/vue-ydui 可以看到 vue-ydui 最新版本的資源，在頁面上引入 js 和 css 文件即可開始使用（考慮網(wǎng)絡原因，建議下載至本地）。
【使用rem】：
<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="//vuejs.org/js/vue.min.js"> </script>
<script src="//unpkg.com/vue-ydui/dist/ydui.js"></script>
【使用px】：
<link rel="stylesheet" href="//unpkg.com/vue-ydui/dist/ydui.px.css">
<script src="//vuejs.org/js/vue.min.js"></script>
<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">
<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>
<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 來安裝，享受生態(tài)圈和工具帶來的便利，更好地和 webpack 配合使用，當然，也推薦使用 ES2015。
$ npm install vue-ydui --save
# 目錄結(jié)構(gòu)
vue-ydui
|
|-- dist
| |-- lib.px
| | |-- actionsheet
| | |-- badge
| | |-- ...
| |
| |-- lib.rem
| | |-- actionsheet
| | |-- badge
| | |-- ...
| |
| |-- ydui.base.css
| |-- ydui.px.css
| |-- ydui.rem.css
| |-- ydui.flexible.js
| |-- ydui.js
| |
|-- LICENSE
|-- package.json
|-- README.md
# 全局引入
一般在 webpack 入口文件 main.js 中如下配置：
import Vue from 'vue';
import YDUI from 'vue-ydui';
import 'vue-ydui/dist/ydui.rem.css';
Vue.use(YDUI);
new Vue({
el: '#app',
render: h => h(App)
});
注：若引入vue-ydui/dist/ydui.rem.css，則需在入口頁面的 head 標簽內(nèi)引入 ydui.flexible.js，像這樣：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta content="telephone=no" name="format-detection"/>
<script src="//unpkg.com/vue-ydui/dist/ydui.flexible.js"></script>
</head>
<body>
</body>
</html>
# 按需引入
如果您想在 webpack 中按需使用組件，減少文件體積，可以這樣寫（引入“l(fā)ib.rem”組件需在入口頁面引入ydui.flexible.js，同上）：
import {ActionSheet} from 'vue-ydui/dist/lib.rem/actionsheet';
Vue.component(ActionSheet.name, ActionSheet);
注意：按需引入單個組件，另需導入重置基礎樣式（其未包含任何組件樣式），即在入口文件 main.js 中如下配置：
import 'vue-ydui/dist/ydui.base.css';
或在入口頁面的 head 標簽內(nèi)直接引入：
<link rel="stylesheet" href="//unpkg.com/vue-ydui/dist/ydui.base.css">
版本
參與
使用本項目，意味著你也有義務幫助其變得更好。
有任何建議或意見你可以 Pull Request。
官方地址： http://vue.ydui.org/
宜昌網(wǎng)站制作，宜昌企業(yè)網(wǎng)站制作，宜昌網(wǎng)站定制開發(fā)，宜昌三網(wǎng)合一網(wǎng)站，宜昌自適應網(wǎng)站-紅點互動
132 7725 3377
聯(lián)系我們
132-7725-3377
