Vue-mint-UI库
概述:就是一个 封装好的库
安装/下载:npm install --save mint-ui
常用
- 1) Mint UI:
a. 主页: http://mint-ui.github.io/#!/zh-cn
b. 说明: 饿了么开源的基于 vue 的移动端 UI 组件库
2) Elment
a. 主页: http://element-cn.eleme.io/#/zh-CN
b. 说明: 饿了么开源的基于 vue 的 PC 端 UI 组件库 - 下载
1. 下载 npm install --save-dev babel-plugin-component 2. 修改 babel 配置 "plugins": ["transform-runtime",["component", [ { "libraryName": "mint-ui", "style": true } ]]]
- Mint-UI 组件分类
- 标签组件
- 非标签组件
- 使用Mint-UI 组件 在index.html 进行移动端格
-
<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>
-
1 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, 2 minimum-scale=1, user-scalable=no" /> 3 <script 4 src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></scrip 5 t> 6 <script> 7 if ('addEventListener' in document) { 8 document.addEventListener('DOMContentLoaded', function() { 9 FastClick.attach(document.body); 10 }, false); 11 } 12 if(!window.Promise) { 13 document.writeln('<script 14 src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js" 15 '+'>'+'<'+'/'+'script>'); 16 } 17 </scri
import {Button} from 'mint-ui'
Vue.component(Button.name, Button)
<template> <mt-button @click="handleClick" type="primary" style=" 100%">Test</mt-button> </template> <script> import {Toast} from 'mint-ui' export default { methods: { handleClick () { Toast(' 点击了测试'); } } } </script>
定义好的 知道语法格式 拿过来用就ok !!