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

发布时间：2024-12-09 阅读量：25

快速上手

关于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中，为自定义组件绑定原生事件必须使用修饰符；

另外 vue-ydui 有使用px 和使用rem 样式单位的两个版本，使用 rem 需了解其相关知识。

rem是相对根元素<html>的字体大小变化而变化的css单位，通过 ydui.flexible.js 改变根元素的字体大小实现屏幕自适应，具体请参看这里。

CDN引入

通过 unpkg.com/vue-ydui 可以看到 vue-ydui 最新版本的资源，在页面上引入 js 和 css 文件即可开始使用（考虑网络原因，建议下载至本地）。

【使用rem】：

<!-- 使用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>

<!-- 引入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 写出一个示例，您可以复制下面代码或在线预览。

<!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 安装

# 目录结构

vue-ydui   /* 通过 npm install vue-ydui 下载的目录结构 */
|
|-- dist
|   |-- lib.px   /* 独立单个组件目录（css单位使用px） */
|   |   |-- actionsheet
|   |   |-- badge
|   |   |-- ...
|   |
|   |-- lib.rem   /* 独立单个组件目录（css单位使用rem） */
|   |   |-- actionsheet
|   |   |-- badge
|   |   |-- ...
|   |
|   |-- ydui.base.css   /* 重置基础样式（其未包含任何组件样式） */
|   |-- ydui.px.css   /* 所有组件样式（使用px） */
|   |-- ydui.rem.css   /* 所有组件样式（使用rem） */
|   |-- 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，像这样：

<!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"/>
    <!-- 引入自适应类库，不建议在main.js里引入 -->
    <script src="//unpkg.com/vue-ydui/dist/ydui.flexible.js"></script>
</head>
<body>

</body>
</html>

# 按需引入

如果您想在 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 0.8.5 beta

参与

使用本项目，意味着你也有义务帮助其变得更好。

有任何建议或意见你可以 Pull Request。

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

宜昌网站制作，宜昌企业网站制作，宜昌网站定制开发，宜昌三网合一网站，宜昌自适应网站-红点互动