Vue--- mint-UI 穿插
Vue-mint-UI库
概述:就是一个 封装好的库
安装/下载:npm install --save mint-ui
常用
- 1) Mint UI:
a. 主页: http://mint-ui.github.io/#!/zh-cn
b. 说明: 饿了么开源的基于 vue 的移动端 UI 组件库
2) Elment
a. 主页: http://element-cn.eleme.io/#/zh-CN
b. 说明: 饿了么开源的基于 vue 的 PC 端 UI 组件库 - 下载
1. 下载 npm install --save-dev babel-plugin-component 2. 修改 babel 配置 "plugins": ["transform-runtime",["component", [ { "libraryName": "mint-ui", "style": true } ]]]
- Mint-UI 组件分类
- 标签组件
- 非标签组件
- 使用Mint-UI 组件 在index.html 进行移动端格
-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></scrip t> <script> if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); } if(!window.Promise) { document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js" '+'>'+'<'+'/'+'script>'); } </script>
-
1 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, 2 minimum-scale=1, user-scalable=no" /> 3 <script 4 src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></scrip 5 t> 6 <script> 7 if ('addEventListener' in document) { 8 document.addEventListener('DOMContentLoaded', function() { 9 FastClick.attach(document.body); 10 }, false); 11 } 12 if(!window.Promise) { 13 document.writeln('<script 14 src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js" 15 '+'>'+'<'+'/'+'script>'); 16 } 17 </scri
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
import {Button} from 'mint-ui'
Vue.component(Button.name, Button)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <mt-button @click="handleClick" type="primary" style="width: 100%">Test</mt-button> </template> <script> import {Toast} from 'mint-ui' export default { methods: { handleClick () { Toast(' 点击了测试'); } } } </script>
定义好的 知道语法格式 拿过来用就ok !!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!