mint-ui快速使用

title: 搭建Vuemint-ui 框架

• mint-ui 是有饿了么前端团队推出的基于Vue.js的移动端组件库。下面就让我们一起来看看mint-ui的构建吧。

安装vue.js环境

 // 全局安装脚手架
 npm install -g vue-cli

创建vue项目

// 创建一个基于 webpack 模板的新项目
 vue init webpack my-prj
// 安装依赖
 cd my-project
 npm install
// 安装路由
 npm install vue-router

下载、引用Mint-ui

npm install mint-ui -S

// 引入全部组件 在main.js中引用
import Mint from 'mint-ui'
Vue.use(Mint)

• 每个组件的使用方法请阅读文档，这里只举一个微小的例子。在 app.vue 中

<template>
  <h1>mint-uiexample</h1>
  <mt-button
    type="primary"
    @click="sheetVisible = true">
    选择操作
  </mt-button>
  <mt-actionsheet
    cancel-text=""
    :actions="actions"
    :visible.sync="sheetVisible">
  </mt-actionsheet>
</template>

<script>
  import { Toast, MessageBox } from 'mint-ui';
  export default {
    name: 'app',

    data() {
      return {
        sheetVisible: false,
        actions: [{
          name: '展示 Toast',
          method: this.showToast
        }, {
          name: '展示 Message Box',
          method: this.showMsgbox
        }]
      };
    },

    methods: {
      showToast() {
        Toast('这是一个 Toast');
      },

      showMsgbox() {
        MessageBox('提示', '这是一个 Message Box');
      }
    }
  };
</script>

• 效果如下

  
  111.jpg

运行、打包

// 启动项目 locallhot:8080
npm run dev

// 打包 生成dist文件夹
npm run bulid

• mint-ui地址 http://mint-ui.github.io/#!/zh-cn