webpack + vue 运用mint-ui

2024年1月23日 220次阅读 来源: 李木子

本身从一个月之前正式的打仗vue.js这个框架，然后就猖獗的陶醉上他，易上手我以为是他最大的上风，之前我一直是运用Jquery的，大批的dom操纵让我有点力不从心，之前的我安于现状不想去探究新的学问，直到我直到vue而且运用上他以后，本身的生产力似乎得到了质的奔腾，闲话少叙，进入本日的主题Mint-ui链接形貌。

第一步

装置mint-ui npm install mint-ui --save

第二步

在main.js内里引入mint-ui

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'//最嗨的是他这个直接引入的是一个css文件

Vue.use(MintUI);

第三步

由于webpack把须要的依靠都下载好了我只须要装置下面的依靠就好啦
install babel-preset-es2015 --save-dev

第四步

设置你的babelrc文件
{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime"],
  "comments": false
}

第五步
下面重启一下就能够直接在组件运用啦
须要注重的是，虽然是全局运用，但是在运用的历程当中照样要在组件内援用一下你须要运用的组件

<template>
  <div class="header">
    <div @click='test'>{{headerProps.title}}</div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {DatetimePicker, Button, Toast} from 'mint-ui';
  export default {
    props: {
      headerProps: Object
    },
    data(){
      return {}
    },
    methods:{
      test(){
        Toast('我是Tip');
      }
    }
  }

</script>
<style lang="scss">
  .header {
    /*position: fixed;*/
    z-index: 99;
    width: 100%;
    background: #f55947;
    height: 3rem;
    font: {
      size: 1.2rem;
      weight: 100;
    }
  ;
    div {
      text-align: center;
      line-height: 3rem;
      color: #fff;
      font: {
        weight: 300;
      }
    ;
    }
  }

</style>

从装置到运用的历程就是如许啦，我也是刚打仗vue这个框架，有题目的地方请大神指出呀，也希望能和人人一同进修提高~~~~

    原文作者：李木子
    原文地址: https://segmentfault.com/a/1190000008881319
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞