美文网首页
mint-ui快速使用

mint-ui快速使用

作者: 命运齿轮1 | 来源:发表于2018-05-15 18:05 被阅读0次

    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快速使用

          本文链接:https://www.haomeiwen.com/subject/wtyydftx.html