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>

      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="width: 100%">Test</mt-button>
</template>
<script>
import {Toast} from \'mint-ui\'
export default {
methods: {
handleClick () {
Toast(\' 点击了测试\');
}
}
}
</script>

App.vue

 

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