How to use Vue.js mobile component library

This time I will bring you how to use the Vue.js mobile component library. What are the precautions when using the Vue.js mobile component library? The following is a practical case, let’s take a look. one time.

Mint UI contains rich css and JS components, which can meet daily mobile development needs. Through it, you can quickly build a page with a unified style and improve development efficiency.

Load components on demand in a true sense. You can load only the declared components and their style files, without worrying about the file size being too large.

Taking into account the performance threshold of the mobile terminal, Mint UI uses CSS3 to handle various animations to avoid unnecessary redrawing and rearrangement of the browser, so that users can obtain a smooth and smooth experience.

Relying on Vue.js' efficient componentization solution, Mint UI is lightweight. Even if all are introduced, the compressed file size is only 100K.

Mint UI

Mint UI, launched by the Ele.me front-end team, is a mobile component library based on Vue.js. since 6 Since it was open sourced at the beginning of the month, based on feedback from the community and within the team, some bugs have been fixed and some new components have been added. Version 0.2.0 was released this week. This article explains how to build a program from scratch using Vue project for Mint UI.

Scaffolding

With the rapid development of Vue.js, there are currently many options for building scaffolding for a Vue project. For example, you can use the officially provided vue-cli. This article uses Ele.me’s own build tool cooking to complete this task.

First, install cooking globally:

npm i cooking -g

Create a new project folder:

mkdir mint-ui-example

Enter the project folder and use cooking to build:

cooking init vue

The last parameter vue indicates that the scaffolding is built based on Vue.js.

Among them, "Which CSS preprocessing to use" here is Salad, which is a solution based on PostCSS. Interested students can learn about it. Of course, you can also choose other preprocessors.

Next install Mint UI:

npm i mint-ui --save

Introducing Mint UI

Okay, the subsequent work can be divided into two situations:

1. Introduce all components

If your project will use more components in Mint UI, the easiest way is to introduce them all. At this time, it needs to be in entry file main.js:

import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';
Vue.use(MintUI);

2. Introduce on demand

If you only need to use a certain component, you can only introduce this component. Mint UI can ensure that files unrelated to this component will not appear in the final code when the code is packaged. For example, if you need to introduce the Button component, in main.js:

import Button from 'mint-ui/lib/button';
import 'mint-ui/lib/button/style.css';
Vue.component(Button.name, Button);

It can be seen that the above two import methods require the corresponding CSS files to be imported separately. This is inconvenient, especially when you use the on-demand import method to introduce multiple components. To avoid this problem, you can use the babel-plugin-component plugin. The first thing to do is to install it:

npm i babel-plugin-component -D

Then configure it in .babelrc:

{
 "plugins": ["other-plugin", ["component", [
 { "libraryName": "mint-ui", "style": true }
 ]]]
}

In this way, the above two introduction methods can be simplified to:

import MintUI from 'mint-ui';
Vue.use(MintUI);

and

import Button from 'mint-ui/lib/button';
Vue.component(Button.name, Button);

The plug-in will automatically import the corresponding CSS files.

use

Please read the documentation for the method of using each component. Here is just a small example. In app.vue:

<template>
 <h1 id="mint-ui-example">mint-ui-example</h1>
 <mt-button>
 选择操作
 </mt-button>
 <mt-actionsheet>
 </mt-actionsheet>
</template>
<script>
 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;);
 }
 }
 };
</script>

The above is an introduction to how to use Mint UI. If you encounter any problems during use, or want to give us some suggestions, you are welcome to file an issue in the GitHub repository.

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

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

 问题一、

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

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

 <meta><p>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！</p><p>推荐阅读：</p><p><a href="http://www.php.cn/js-tutorial-392745.html" target="_blank">vue父子组件通信使用方法</a><br></p><p><a href="http://www.php.cn/js-tutorial-392737.html" target="_blank">mint-ui loadmore上拉加载与下拉刷新冲突处理方法</a><br></p><!--content end-->

The above is the detailed content of How to use Vue.js mobile component library. For more information, please follow other related articles on the PHP Chinese website!