前端开发技术之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

      if (‘addEventListener’ in document) {

             document.addEventListener(‘DOMContentLoaded’, function() {

                   FastClick.attach(document.body);

           }, false);

    }

if(!window.Promise) {

              document.writeln(‘

            }

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

Vue.component(Button.name, Button)
3) App.vue 

        Test

      import {Toast} from ‘mint-ui’

      export default {

            methods: {

                handleClick () {

                    Toast(‘点击了测试’);

             }

       }

}

原文链接：http://www.atguigu.com/jsfx/11613.html