vue項目中使用mint-ui移動端UI組件

1. mint-ui   網址 http://mint-ui.github.io/#!/zh-cn 

$npm install mint-ui --save （若沒有安裝vue-loader、vue-template-compiler，安裝）

2.webpack.config.js定義的指向entry文件（02-mian.js）

import Vue from 'vue';//導入vue核心包 
import mintUI from 'mint-ui';//導入mint-ui核心包

Vue.use(mintUI);
import App from './App.vue';//導入App.vue的vue對象
 
import 'mint-ui/lib/style.min.css' //導入mint-ui的css,能夠不導入，可直接在index2.html文件中 <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">

 let vm = new Vue({ el:'#app', //render:function(create){create()} //es5寫法 render:c=>c(App) //es6寫法  });

 

3.  主vue文件（App.js）

<template>
<div>  
    <mt-button type="default" @click="tip">default</mt-button>
    <mt-button type="primary">primary</mt-button>
    <mt-button type="danger">danger</mt-button>
</div>
</template>
<script> 
    import { Toast } from 'mint-ui';  //使用mint的動態組件須要這樣按需導入 ，簡單css不用按需導入，在（02-mian.js）中 import 'mint-ui/lib/style.min.css'

export default{ 
data(){ return{ } }, 
methods:{ tip(){ Toast({ message: 'erojwejvnnvnkdjdffk', position: 'bottom', duration: 1000 }) } } } 
</script> 
<style scoped>
 </style>

 

.。。