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
