1、执行命令npm install --save mint-ui下载mint-ui
2、实现按需打包
2.1、执行命令npm install --save-dev babel-plugin-component下载babel-plugin-component
2.2、修改.babelrc文件，在plugins中增加如下内容
["component", [ { "libraryName": "mint-ui", "style": true } ]]
修改后内容：
{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime", ["component", [ { "libraryName": "mint-ui", "style": true } ]]]
3、在index.html中引入移动端的viewport
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
4、在index.html中引入fastclick.js，解决移动端事件延迟，实现快速点击
<!--解决移动端事件延迟-->
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<!--实现快速点击-->
<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>
5、修改后的index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--引入移动端viewport--> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/> <title>vueblank</title> <!--解决移动端事件延迟--> <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script> <!--实现快速点击--> <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> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
6、引入需要使用的组件并且注册成标签
6.1、注册成全局标签
在main.js中引入组件和注册标签：
7、在需要使用的地方使用已经注册好的标签
<template> <div id="app"> <!--加native是使用原生的click事件，不加则为mint-ui包装的click事件--> <mt-button @click.native="clickFunc" type="primary">primary</mt-button> </div> </template> <script> // 引入消息提示框 import { Toast } from 'mint-ui' export default { name: 'App', components: { }, methods: { clickFunc () { Toast('hello') } } } </script> <style> </style>