Mint-ui 移动端前端框架 vue
https://zhuanlan.zhihu.com/p/21802181
先按装vue脚手架:vue-cli
安装mint-ui
npm i mint-ui --save
安装 babel-plugin-component
npm i babel-plugin-component --save
然后在 .babelrc 中配置它:
{
"plugins": ["other-plugin", ["component", [
{ "libraryName": "mint-ui", "style": true }
]]]
}
引入方法1:【全部引入】
import MintUI from 'mint-ui';
Vue.use(MintUI);
引入方法1:【局部引入】
import Button from 'mint-ui/lib/button';
Vue.component(Button.name, Button);
插件会自动引入相应的 CSS 文件。
例如:
在 app.vue 中:
<template> <h1>mint-ui-example</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>
https://zhuanlan.zhihu.com/p/21802181
给心灵一个纯净空间,让思想,情感,飞扬!