mint-ui（MintUI快速上手）
- >
- 话题 >
Mint-UI
Mint-UI是基于Vue.js的移动端组件库。
Overview预览
安装
npm安装
npm i mint-ui -S
CDN
<!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"><!-- 引入组件库 --><script src="https://unpkg.com/mint-ui/lib/index.js"></script>Hello World<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css"></head><body> <div > <mt-button @click.native="handleClick">按钮</mt-button> </div></body> <!-- 先引入 Vue --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- 引入组件库 --> <script src="https://unpkg.com/mint-ui/lib/index.js"></script> <script> new Vue({ el: '#app', methods: { handleClick: function() { this.$toast('Hello world!') } } }) </script></html>关于事件绑定
在 Vue 2.0 中，为自定义组件绑定原生事件必须使用.native修饰符。为便于易用，Mint-UI对Button组件进行了处理，使它可以监听click事件。
//Button组件可以直接使用click事件<mt-button @click="handleButtonClick">Click Me</mt-button>//其他组件需要将.native<my-component @click.native="handleClick">Click Me</my-component>
Quickstart快速开始
一.使用vue-cli快速搭建Vue项目npm install -g vue-clivue init webpack projectname二.引入 Mint UI
1.完整引入
在入口文件main.js中写入以下内容：(注意：样式文件需要单独引入)
import Vue from 'vue'//引入Mint-UI组件import MintUI from 'mint-ui'//引入Mint-UI样式import 'mint-ui/lib/style.css'import App from './App.vue'Vue.use(MintUI)new Vue({ el: '#app', components: { App }})
2.按需引入
首先，安装 babel-plugin-component：(借助babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。)npm install babel-plugin-component -D然后，将 .babelrc 修改为：{ "presets": [ ["es2015", { "modules": false }] ], "plugins": [["component", [ { "libraryName": "mint-ui", "style": true } ]]]}在main.js中导入需要的组件 import Vue from 'vue' import { Button, Cell } from 'mint-ui' import App from './App.vue' Vue.component(Button.name, Button) Vue.component(Cell.name, Cell) /* 或写为 * Vue.use(Button) * Vue.use(Cell) */ new Vue({ el: '#app', components: { App } })
至此，一个基于 Vue 和 Mint UI 的****已经搭建完毕，现在就可以编写代码了。
- 发表于 2023-02-08 09:35
- 阅读 ( 73 )
- 分类：互联网
