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