您现在的位置: 365建站网 > 365学习 > Mint UI —— 基于 Vue.js 的移动端组件库用法教程

Mint UI —— 基于 Vue.js 的移动端组件库用法教程

文章来源:365jz.com     点击数:467    更新时间:2017-12-16 10:13   参与评论

Mint UI

GitHub:github.com/ElemeFE/mint

项目主页:mint-ui.github.io/#

Demo:elemefe.github.io/mint-

文档:mint-ui.github.io/docs/#

由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库。自 6 月初开源以来,根据社区和团队内部的反馈,修复了一些 bug 并新增了部分组件,于本周发布了 0.2.0 版本。本文介绍如何从零开始构建一个使用 Mint UI 的 Vue 项目。

 

webpack + vue 使用mint-ui


自己从一个月之前正式的接触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这个框架,有问题的地方请大神指出呀,也希望能和大家一起学习进步~~~~

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (467人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------