侧边栏壁纸
博主头像
逆流者

不登高山,不知天之高也;不临深溪,不知地之厚也。

  • 累计撰写 147 篇文章
  • 累计创建 43 个标签
  • 累计收到 4 条评论
隐藏侧边栏

Vue23话 简单使用 vue UI 组件库

逆流者
2020-02-02 / 0 评论 / 0 点赞 / 303 阅读 / 0 字 / 正在检测是否收录...
温馨提示:
本文最后更新于2020-02-02,若内容或图片失效,请留言反馈。 部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

1. 常用UI 组件库

1.1 Mint UI

1.2 Elment

2. 简单使用 Mint UI

2.1 下载

npm install --save mint-ui

2.2 按需打包

2.2.1 下载

npm install --save-dev babel-plugin-component

2.2.2 修改 babel 配置

"plugins": ["transform-runtime",["component", [
  {
    "libraryName": "mint-ui",
    "style": true
  }
]]]

2.2.3 mint-ui 组件分类

  • 标签组件
  • 非标签组件

2.2.4. 使用 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"></script>
<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>

main.js

import {Button} from 'mint-ui'
Vue.component(Button.name, Button)

App.vue

<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>
0

评论