mint-ui快速使用

2018-05-15  本文已影响0人  命运齿轮1

title: 搭建Vuemint-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)
<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>

运行、打包

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

// 打包 生成dist文件夹
npm run bulid
上一篇下一篇

猜你喜欢

热点阅读