Vue.js-based mobile end framework Mint UI

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