jq960素材网

当前位置: 主页 > JQ/JS插件 > vue插件 > ui >

YDUI Touch基于Vue2.x的移动端&微信UI

官方网址:http://vue.ydui.org/ 下载次数:
插件描述


一只基于Vue2.x的移动端&微信UI

Vue-ydui 是 YDUI Touch 的一个Vue2.x实现版本,专为移动端打造,在追求完美视觉体验的同时也保证了其性能高效。

特性

提供两种样式单位(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.rem.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.px.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="//unpkg.com/vue"></script>
<!-- 引入组件库 -->
<script src="//unpkg.com/vue-ydui/dist/ydui.rem.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   /* 独立单个组件目录(css单位使用px) */
|   |   |-- actionsheet
|   |   |-- badge
|   |   |-- ...
|   |
|   |-- lib.rem   /* 独立单个组件目录(css单位使用rem) */
|   |   |-- actionsheet
|   |   |-- badge
|   |   |-- ...
|   |
|   |-- ydui.base.css   /* 重置基础样式(其未包含任何组件样式) */
|   |-- ydui.flexible.js   /* rem自适应类库 */
|   |-- ydui.rem.js   /* rem版核心文件,默认 */
|   |-- ydui.rem.css   /* 所有组件样式(使用rem) */
|   |-- ydui.px.js   /* px版核心文件 */
|   |-- ydui.px.css   /* 所有组件样式(使用px) */
|   |
|-- LICENSE
|-- package.json
|-- README.md

# 全局引入

一般在 webpack 入口文件 main.js 中如下配置:

import Vue from 'vue';

import YDUI from 'vue-ydui'; /* 相当于import YDUI from 'vue-ydui/ydui.rem.js' */
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">

版本

最新版本:v1.2.6 beta

FBI Warning:目前处于公测阶段,版本更新较为频繁,请谨慎直接使用在项目中。


顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表