首页 技术 正文
技术 2022年11月14日
0 收藏 713 点赞 3,342 浏览 1706 个字

Vue-mint-UI库

概述:就是一个 封装好的库

安装/下载:npm install  –save mint-ui

常用

  1. 1) Mint UI:
    a. 主页: http://mint-ui.github.io/#!/zh-cn
    b. 说明: 饿了么开源的基于 vue 的移动端 UI 组件库
    2) Elment
    a. 主页: http://element-cn.eleme.io/
    b. 说明: 饿了么开源的基于 vue 的 PC 端 UI 组件库
  2. 下载
    1. 下载
    npm install --save-dev babel-plugin-component
    2. 修改 babel 配置
    "plugins": ["transform-runtime",["component", [
    {
    "libraryName": "mint-ui",
    "style": true
    }
    ]]]

    按需打包 配置

  3. Mint-UI 组件分类
    1. 标签组件
    2. 非标签组件
  4. 使用Mint-UI  组件   在index.html  进行移动端格
    1.   

      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,
      minimum-scale=1, user-scalable=no" />
      <script
      src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></scrip
      t>
      <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>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,
minimum-scale=1, user-scalable=no" />
<script
src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></scrip
t>
<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>');
}
</scri
import {Button} from 'mint-ui'
Vue.component(Button.name, Button)

main.js

<template>
<mt-button @click="handleClick" type="primary" style="width: 100%">Test</mt-button>
</template>
<script>
import {Toast} from 'mint-ui'
export default {
methods: {
handleClick () {
Toast(' 点击了测试');
}
}
}
</script>

App.vue

定义好的  知道语法格式 拿过来用就ok  !!

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,071
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,549
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,397
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,174
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,809
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,889