前端培训之vueUI 组件库

1. 常用
1) MintUI:

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 组件库
2. 使用 MintUI
2.1. 下载:
npminstall–savemint-ui
2.2. 实现按需打包
1. 下载

npminstall–save-devbabel-plugin-component

2. 修改 babel 配置

“plugins”: [“transform-runtime”,[“component”, [

      {

         “libraryName”: “mint-ui”,

        “style”: true

      }

]]]
2.3.mint-ui 组件分类
1) 标签组件

2) 非标签组件
2.4. 使用 mint-ui 的组件
1) 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>

2) main.js import {Button} from ‘mint-ui’

Vue.component(Button.name, Button)
3) 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>
想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训,尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习


上一篇:
下一篇:
关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
电话:010-56253825
邮箱:info@atguigu.com
地址:北京市昌平区宏福科技园综合楼6层(北京校区)

 深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)