Vue（十一）-- UI组件库mint-ui的使用

目录

• 1.vue UI组件库
  • --1.1一些开源项目
  • --1.2使用Mint-UI
    • ----1.2.1下载
    • ----1.2.2准备
    • ----1.2.3使用

1.vue UI组件库

--1.1一些开源项目

1）Mint-UI:
a.主页：(https://mint-ui.github.io/#!/zh-cn)
b.说明：饿了么开源的基于vue的移动端UI组件库

2）Element
a.主页：(http://element-cn.eleme.io/#/zh-CN)
b.说明：饿了么开源的基于vue的PC端UI组件库

--1.2使用Mint-UI

----1.2.1下载

• 下载：
  npm install --save mint-ui --registry=https://registry.npm.taobao.org

• 下载babel-plugin-component
  借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
  npm install --save-dev babel-plugin-component --registry=https://registry.npm.taobao.org
  只需要在.babelrc文件中添加如下即可，不需要按照官方文档所说替换原来的内容
  

----1.2.2准备

• index页面需要使用如下代码
  解决设备视口适配问题

<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.2.3使用

参照官方文档使用即可
(https://mint-ui.github.io/docs/#/zh-cn2/button)

• main.js引入组件并全局注册
  main.js

/* 
 入口js：创建Vue实例
 */
import Vue from 'vue'
import App from './App.vue'
import {Button} from 'mint-ui'//引入

//注册成标签（全局注册）
/* 
component方法第一个是标签名，但是因为mint-ui中的主键有自己的标签名，所以可以直接拿来用
 如果没有的话还是字符串
 */
Vue.component(Button.name,Button)

new Vue({
  el:'#app',
  components:{//将其映射成标签
    App
  },
  template:'<App/>'//使用组件标签
})

• .文件vue使用标签