vue手机端项目php,MintUI基于Vue.js移动端组件库详解

Mint UI 包含丰富的 CSS 和 JS 组件&＃xff0c;能够满足日常的移动端开发需要。接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库&＃xff0c;需要的朋友参考下吧&＃xff0c;希望能帮助到大家。

官网地址 http://mint-ui.github.io/

Mint UI 包含丰富的 CSS 和 JS 组件&＃xff0c;能够满足日常的移动端开发需要。通过它&＃xff0c;可以快速构建出风格统一的页面&＃xff0c;提升开发效率。

真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件&＃xff0c;无需再纠结文件体积过大。

考虑到移动端的性能门槛&＃xff0c;Mint UI 采用 CSS3 处理各种动效&＃xff0c;避免浏览器进行不必要的重绘和重排&＃xff0c;从而使用户获得流畅顺滑的体验。

依托 Vue.js 高效的组件化方案&＃xff0c;Mint UI 做到了轻量化。即使全部引入&＃xff0c;压缩后的文件体积也仅有 100&＃43; K。

Mint UI

GitHub&＃xff1a;https://github.com/ElemeFE/mint-ui

项目主页&＃xff1a;http://mint-ui.github.io/#!/zh-cn

Demo&＃xff1a;http://elemefe.github.io/mint-ui/#!/

文档&＃xff1a;http://mint-ui.github.io/docs/#!/zh-cn

由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库。自 6 月初开源以来&＃xff0c;根据社区和团队内部的反馈&＃xff0c;修复了一些 bug 并新增了部分组件&＃xff0c;于本周发布了 0.2.0 版本。本文介绍如何从零开始构建一个使用 Mint UI 的 Vue 项目。

脚手架

随着 Vue.js 的迅速发展&＃xff0c;目前搭建一个 Vue 项目的脚手架已经有不少选择了。比如可以使用官方提供的 vue-cli。本文使用饿了么自己的构建工具 cooking 来完成这个任务。

首先&＃xff0c;全局安装 cooking&＃xff1a;

npm i cooking -g

新建项目文件夹&＃xff1a;

mkdir mint-ui-example

进入项目文件夹&＃xff0c;使用 cooking 进行构建&＃xff1a;

cooking init vue

最后的参数 vue 表示构建的是基于 Vue.js 的脚手架。

在构建过程中&＃xff0c;cooking 需要如下一些参数&＃xff1a;

其中“使用何种 CSS 预处理”这里选择的是 Salad&＃xff0c;它是一套基于 PostCSS 的解决方案&＃xff0c;有兴趣的同学可以了解一下。当然&＃xff0c;你也可以选择其他的预处理器。

完成构建后的项目结构为&＃xff1a;

接下来安装 Mint UI&＃xff1a;

npm i mint-ui --save

引入 Mint UI

好了&＃xff0c;之后的工作可以分为两种情况&＃xff1a;

1. 引入全部组件

如果你的项目会用到 Mint UI 里较多的组件&＃xff0c;最简单的方法就是把它们全部引入。此时需要在入口文件 main.js 中&＃xff1a;import MintUI from &＃39;mint-ui&＃39;;

import &＃39;mint-ui/lib/style.css&＃39;;

Vue.use(MintUI);

2. 按需引入

如果你只需要使用某个组件&＃xff0c;可以仅引入这个组件&＃xff0c;Mint UI 能够保证在代码打包时&＃xff0c;与这个组件无关的文件不会出现在最终代码里。比如需要引入 Button 组件&＃xff0c;则在 main.js 中&＃xff1a;import Button from &＃39;mint-ui/lib/button&＃39;;

import &＃39;mint-ui/lib/button/style.css&＃39;;

Vue.component(Button.name, Button);

可以看出&＃xff0c;上面两种引入方法都要单独引入相应的 CSS 文件。这很不方便&＃xff0c;尤其当你使用按需引入的方法引入多个组件时。为了避免这个问题&＃xff0c;可以使用 babel-plugin-component 插件。首先当然是安装它&＃xff1a;

npm i babel-plugin-component -D

然后在 .babelrc 中配置它&＃xff1a;{

"plugins": ["other-plugin", ["component", [

{ "libraryName": "mint-ui", "style": true }

]]]

}

这样上述两种引入方法就可以简化为&＃xff1a;import MintUI from &＃39;mint-ui&＃39;;

Vue.use(MintUI);

和import Button from &＃39;mint-ui/lib/button&＃39;;

Vue.component(Button.name, Button);

插件会自动引入相应的 CSS 文件。

使用

每个组件的使用方法请阅读文档&＃xff0c;这里只举一个微小的例子。在 app.vue 中&＃xff1a;

type&＃61;"primary"

&＃64;click&＃61;"sheetVisible &＃61; true">

选择操作

cancel-text&＃61;""

:actions&＃61;"actions"

:visible.sync&＃61;"sheetVisible">

import { Toast, MessageBox } from &＃39;mint-ui&＃39;;

export default {

name: &＃39;app&＃39;,

data() {

return {

sheetVisible: false,

actions: [{

name: &＃39;展示 Toast&＃39;,

method: this.showToast

}, {

name: &＃39;展示 Message Box&＃39;,

method: this.showMsgbox

}]

};

},

methods: {

showToast() {

Toast(&＃39;这是一个 Toast&＃39;);

},

showMsgbox() {

MessageBox(&＃39;提示&＃39;, &＃39;这是一个 Message Box&＃39;);

}

}

};

则会得到如下页面&＃xff1a;

预告

以上就是 Mint UI 的使用方法介绍。如果在使用的过程中遇到任何问题&＃xff0c;或者是想给我们一些建议&＃xff0c;欢迎大家去 GitHub 仓库提 issue。

可能有些同学知道&＃xff0c;除了这个移动端组件库以外&＃xff0c;饿了么还有一套桌面端组件库 vue-desktop。目前我们正在对它进行重构&＃xff0c;这次有了 UED 的介入&＃xff0c;整体视觉有了很大的提升。完成后也会开源&＃xff0c;而且会有两个版本&＃xff0c;分别支持 vue 1.0.x 和 vue 2.0。当然&＃xff0c;Mint UI 也会考虑支持 vue 2.0。

PS: mint-ui在手机页面的样式不正常问题

问题一、

在使用 vue2.0 &＃43;mint-ui 时pc端的样式没有问题但是手机端的就缩小了&＃xff0c;失去了想要的效果

这是一个头文件的申明问题在入口文件index.html里的标签里加上这个代码即可

相关推荐&＃xff1a;