title: 搭建Vuemint-ui 框架
- mint-ui 是有餓了么前端團隊推出的基于Vue.js的移動端組件庫剑勾。下面就讓我們一起來看看mint-ui的構(gòu)建吧洲守。
安裝vue.js環(huán)境
// 全局安裝腳手架
npm install -g vue-cli
創(chuàng)建vue項目
// 創(chuàng)建一個基于 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
