mint-ui

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>

 

posted @ 2020-04-05 18:24  牛牛的自留地  阅读(667)  评论(0)  编辑  收藏  举报