Vue.js-based mobile end framework Mint UI

Source: Internet
Author: User

Mint UI

Github:github.com/elemefe/mint

Project home: mint-ui.github.io/#

demo:elemefe.github.io/mint-

Document: mint-ui.github.io/docs/#

Are you hungry? The Mint UI, launched by the front-end team, is a vue.js-based mobile-side component library. Since open source in early June, some bugs have been fixed and some additions have been made, based on feedback from the community and within the team, which was released this week in version 0.2.0. This article describes how to build a Vue project with the Mint UI from scratch.

Scaffolding

With the rapid development of vue.js, there are many options for building a Vue project scaffold. For example, the official VUE-CLI can be used. This article uses the hungry own build tool cooking to accomplish this task.

First, the global installation cooking:

npm i cooking -g

New project folder:

mkdir mint-ui-example

Go to the project folder and build using cooking:

cooking init vue

The final parameter, Vue, is to build scaffolding based on vue.js.

During the build process, cooking needs some of the following parameters:

where "CSS preprocessing" is selected here is salad, it is a set of POSTCSS-based solutions, interested students can understand. Of course, you can also choose other pre-processors.

The completed build project structure is:

Next install the Mint UI:

npm i mint-ui --save
Introducing the Mint UI

Well, then the work can be divided into two kinds of situations:

1. Introduction of all components

If your project will use more components in the Mint UI, the simplest way is to bring them all in. At this point you need to main.js in the Portal file:
import MintUI from ‘mint-ui‘;import ‘mint-ui/lib/style.css‘;Vue.use(MintUI);

2. On-Demand Introduction

If you only need to use a component, you can only introduce this component, and the Mint UI will guarantee 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 a 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 both of the above methods are introduced into the corresponding CSS file separately. This is inconvenient, especially if you introduce multiple components using an on-demand approach. To avoid this problem, you can use the Babel-plugin-component plugin. The first of course is to install it:

npm i babel-plugin-component -D

Then configure it in the. BABELRC:

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

In this way, the two methods can be simplified into:

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

And

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

The plugin will automatically introduce the corresponding CSS file.

Use

How to use each component please read the documentation, here are just a small example. In the App.vue:

<Template><H1>mint-ui-example</H1><Mt-buttonType="PRIMARY"@Click="Sheetvisible = True"> Selection Action</Mt-button><Mt-actionsheetCancel-text="": Actions="Actions": Visible.Sync="Sheetvisible"></Mt-actionsheet></Template><Script>Import{Toast,MessageBox}From' Mint-ui ';ExportDefault{Name:' App ',Data(){Return{Sheetvisible:False,Actions:[{Name:' Show Toast ',Method:This.Showtoast},{Name:' Show Message Box 'method: this. Showmsgbox }] }; }, methods: {showtoast  () {toast ( ' This is a Toast ' ); }, showmsgbox () {messagebox< Span class= "P" > ( ' hint '   ' This is a Message Box ' } } }; </script>          

You will get the following page:


Notice

The above is a description of how the Mint UI is used. If you encounter any problems in the use of the process, or want to give us some suggestions, welcome to the GitHub warehouse to mention issue.

Some students may know that in addition to this mobile component library, Hungry is also a set of desktop-side component library Vue-desktop. We are now restructuring it, this time with UED intervention, the overall vision has a great improvement. Open source is also available after completion, and there will be two versions that support Vue 1.0.x and Vue 2.0, respectively. Of course, the Mint UI will also consider supporting Vue 2.0.

Vue.js-based mobile end framework Mint UI

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.