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>

 

.。。