一只基于Vue2.x的移動端&微信UI。 -YDUI Touch

發(fā)布時(shí)間：2024-12-09 閱讀量：248

快速上手

關(guān)于Vue-ydui

Vue-ydui 是 YDUI Touch 的一個(gè)Vue2.x實(shí)現(xiàn)版本，專為移動端打造，在追求完美視覺體驗(yàn)的同時(shí)也保證了其性能高效。

通過“掃描二維碼”或點(diǎn)擊這里了解 vue-ydui 能做什么？

特性

提供兩種樣式單位（rem 和 px）版本；

高質(zhì)量、功能豐富；

友好的 API ，自由靈活地使用空間；

細(xì)致、漂亮的 UI；

使用單文件的 Vue 組件化開發(fā)模式；

基于 npm + webpack + babel 開發(fā)，支持 ES2015；

真正意義上的按需加載組件，可以只加載聲明過的組件及其樣式文件，無需再糾結(jié)文件體積過大。

使用之前

高效的開發(fā)，離不開基礎(chǔ)工程的搭建。在開始使用 vue-ydui 之前，有必要先了解 Vue 的相關(guān)基礎(chǔ)知識以及Vue 組件，并了解移動端相關(guān)特性；

以下概念貫穿 vue-ydui 前后，建議開發(fā)者花點(diǎn)時(shí)間來了解。

props傳遞數(shù)據(jù)；

slot內(nèi)容分發(fā)；

$emit事件；

@click.native綁定原生事件，在Vue2.x中，為自定義組件綁定原生事件必須使用修飾符；

另外 vue-ydui 有使用px 和使用rem 樣式單位的兩個(gè)版本，使用 rem 需了解其相關(guān)知識。

rem是相對根元素<html>的字體大小變化而變化的css單位，通過 ydui.flexible.js 改變根元素的字體大小實(shí)現(xiàn)屏幕自適應(yīng)，具體請參看這里。

CDN引入

通過 unpkg.com/vue-ydui 可以看到 vue-ydui 最新版本的資源，在頁面上引入 js 和 css 文件即可開始使用（考慮網(wǎng)絡(luò)原因，建議下載至本地）。

【使用rem】：

<!-- 使用rem，需另外引入ydui.flexible.js自適應(yīng)類庫 -->
<link rel="stylesheet" href="//unpkg.com/vue-ydui/dist/ydui.rem.css">
<script src="//unpkg.com/vue-ydui/dist/ydui.flexible.js"> </script>

<!-- 引入Vue2.x -->
<script src="//vuejs.org/js/vue.min.js"> </script>
<!-- 引入組件庫 -->
<script src="//unpkg.com/vue-ydui/dist/ydui.js"></script>

【使用px】：

<!-- 使用px -->
<link rel="stylesheet" href="//unpkg.com/vue-ydui/dist/ydui.px.css">

<!-- 引入Vue2.x -->
<script src="//vuejs.org/js/vue.min.js"></script>
<!-- 引入組件庫 -->
<script src="//unpkg.com/vue-ydui/dist/ydui.js"></script>

示例

通過 CDN 可以快速使用 vue-ydui 寫出一個(gè)示例，您可以復(fù)制下面代碼或在線預(yù)覽。

<!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自適應(yīng)類庫 -->
    <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 安裝

# 目錄結(jié)構(gòu)

vue-ydui   /* 通過 npm install vue-ydui 下載的目錄結(jié)構(gòu) */
|
|-- dist
|   |-- lib.px   /* 獨(dú)立單個(gè)組件目錄（css單位使用px） */
|   |   |-- actionsheet
|   |   |-- badge
|   |   |-- ...
|   |
|   |-- lib.rem   /* 獨(dú)立單個(gè)組件目錄（css單位使用rem） */
|   |   |-- actionsheet
|   |   |-- badge
|   |   |-- ...
|   |
|   |-- ydui.base.css   /* 重置基礎(chǔ)樣式（其未包含任何組件樣式） */
|   |-- ydui.px.css   /* 所有組件樣式（使用px） */
|   |-- ydui.rem.css   /* 所有組件樣式（使用rem） */
|   |-- ydui.flexible.js   /* rem自適應(yīng)類庫 */
|   |-- 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 標(biāo)簽內(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"/>
    <!-- 引入自適應(yīng)類庫，不建議在main.js里引入 -->
    <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';
/* 使用px：import {ActionSheet} from 'vue-ydui/dist/lib.px/actionsheet'; */

Vue.component(ActionSheet.name, ActionSheet);

注意：按需引入單個(gè)組件，另需導(dǎo)入重置基礎(chǔ)樣式（其未包含任何組件樣式），即在入口文件 main.js 中如下配置：

import 'vue-ydui/dist/ydui.base.css';

或在入口頁面的 head 標(biāo)簽內(nèi)直接引入：

<link rel="stylesheet" href="//unpkg.com/vue-ydui/dist/ydui.base.css">

版本

最新版本：v 0.8.5 beta

參與

使用本項(xiàng)目，意味著你也有義務(wù)幫助其變得更好。

有任何建議或意見你可以 Pull Request。

官方地址： http://vue.ydui.org/

宜昌網(wǎng)站制作，宜昌企業(yè)網(wǎng)站制作，宜昌網(wǎng)站定制開發(fā)，宜昌三網(wǎng)合一網(wǎng)站，宜昌自適應(yīng)網(wǎng)站-紅點(diǎn)互動

快速上手

關(guān)于Vue-ydui

Vue-ydui 是 YDUI Touch 的一個(gè)Vue2.x實(shí)現(xiàn)版本，專為移動端打造，在追求完美視覺體驗(yàn)的同時(shí)也保證了其性能高效。

通過“掃描二維碼”或 點(diǎn)擊這里 了解 vue-ydui 能做什么？

特性

使用之前

高效的開發(fā)，離不開基礎(chǔ)工程的搭建。在開始使用 vue-ydui 之前，有必要先了解 Vue 的相關(guān)基礎(chǔ)知識以及Vue 組件，并了解移動端相關(guān)特性；

以下概念貫穿 vue-ydui 前后，建議開發(fā)者花點(diǎn)時(shí)間來了解。

另外 vue-ydui 有 使用px 和 使用rem 樣式單位的兩個(gè)版本，使用 rem 需了解其相關(guān)知識。