Vue--- mint-UI 穿插

Vue-mint-UI库

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

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

常用

1. 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 组件库
2. 下载

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

   按需打包 配置

3. Mint-UI 组件分类
   1. 标签组件
   2. 非标签组件
4. 使用Mint-UI  组件   在index.html  进行移动端格
   1. 　　

      <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>

 <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>');
 }
 </scri

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

main.js

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

App.vue

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