Vue的学习（12）

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 组件库

下载
npm install --save mint-ui

这里可以按需打包减少体积

1. 下载
   npm install --save-dev babel-plugin-component
2. 修改 .babelrc 配置
   “plugins”: [“transform-runtime”,[“component”, [
   {
   “libraryName”: “mint-ui”,
   “style”: true
   }
   ]]]

如果你只希望引入部分组件，比如 Button 和 Cell，那么需要在 main.js 中写入以下内容：

import Vue from 'vue'
import App from './App'
import { Button} from 'mint-ui'
//注册成标签（全局）
Vue.component(Button.name, Button)  //第一个参数组件标签名，第二个参数组件

new Vue({
  el:'#app',//需要挂载到哪
  components:{App},//将App映射为标签
  template:'<App/>'//模板
})

APP中或者其他组件中直接引入使用，参考官网仿写就行

<template>
<mt-button type="primary" @click.native="handleClick" style="width: 100%">Test</mt-button>
</template>

<script>
  import { Toast } from 'mint-ui'
  import { Indicator } from 'mint-ui'
  export default {
    methods:{
      handleClick(){
        Toast('提示信息')
        Indicator.open({
          text: '加载中...',
          spinnerType: 'fading-circle'
        });
      }
    }
  }
</script>

<style scoped>

</style>

这里遇到点情况，热加载显示的页面还是昨天的页面，后来找到问题是文件太多，可能重命名时不对，导致src一直不运行，然后进入入口文件找问题，发现那里被自动修改了，开热加载的时候还是别重命名了