码迷,mamicode.com
首页 > 移动开发 > 详细

Mint-ui(基于 Vue.js 的移动端组件库)的使用

时间:2020-02-19 17:26:15      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:移动   eset   form   npm   基于   efault   def   mes   set   

官网: http://mint-ui.github.io/#!/zh-cn

1.安装包 npm install mint-ui -S

2.导包

import Vue from ‘vue‘
import MintUi from ‘mint-ui‘ // 导入全部组件
import ‘mint-ui/lib/style.css‘
Vue.use(MintUi)

3.css类mint-ui组建的使用

<template>
 <div>
  <mt-button type="default">default</mt-button>   // (直接使用)
 </div>
</template>

4.js类mint-ui组建的使用

按需再导入一次,再使用

<template>
 <div>
  <mt-button type="default" @click=‘show‘>default</mt-button>
 </div>
</template>
<script>
 import { Toast } from ‘mint-ui‘;
 export default {
  methods: {
   show: function () {
    Toast({
     message: ‘提示信息‘
    })
   }
  }
 }
</script>

5,按需导入

import { Button } from ‘mint-ui‘
Vue.component(‘mt-button‘, Button)

6.按需导入mint-ui时.babelrc文件的配置

{
   "presets": ["@babel/preset-env"],
   "plugins": [
  "@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties",
  ["component",
   
     {
        "libraryName": "mint-ui",
        "style": true
     }
    
  ]
 ]
 }

Mint-ui(基于 Vue.js 的移动端组件库)的使用

标签:移动   eset   form   npm   基于   efault   def   mes   set   

原文地址:https://www.cnblogs.com/zeroDoctor/p/12331637.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!