Vue--- mint-UI 穿插

Vue-mint-UI库

概述：就是一个封装好的库

安装/下载：npm install --save mint-ui

常用

1) Mint UI:
a. 主页: http://mint-ui.github.io/#!/zh-cn
b. 说明: 饿了么开源的基于 vue 的移动端 UI 组件库
2) Elment
a. 主页: http://element-cn.eleme.io/#/zh-CN
b. 说明: 饿了么开源的基于 vue 的 PC 端 UI 组件库

下载

1. 下载
npm install --save-dev babel-plugin-component
2. 修改 babel 配置
"plugins": ["transform-runtime",["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]

按需打包配置

Mint-UI 组件分类
1. 标签组件
2. 非标签组件

使用Mint-UI 组件在index.html 进行移动端格

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,
minimum-scale=1, user-scalable=no" />
<script
src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></scrip
t>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
if(!window.Promise) {
document.writeln('<script
src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"
'+'>'+'<'+'/'+'script>');
}
</script>

View Code

 1 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,
 2 minimum-scale=1, user-scalable=no" />
 3 <script
 4 src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></scrip
 5 t>
 6 <script>
 7 if ('addEventListener' in document) {
 8 document.addEventListener('DOMContentLoaded', function() {
 9 FastClick.attach(document.body);
10 }, false);
11 }
12 if(!window.Promise) {
13 document.writeln('<script
14 src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"
15 '+'>'+'<'+'/'+'script>');
16 }
17 </scri

import {Button} from 'mint-ui'
Vue.component(Button.name, Button)

main.js

<template>
<mt-button @click="handleClick" type="primary" style=" 100%">Test</mt-button>
</template>
<script>
import {Toast} from 'mint-ui'
export default {
methods: {
handleClick () {
Toast(' 点击了测试');
}
}
}
</script>

App.vue

定义好的知道语法格式拿过来用就ok ！！