位置: 编程技术 - 正文

Mint UI 基于 Vue.js 移动端组件库(vue mint-ui 官网)

编辑:rootadmin

推荐整理分享Mint UI 基于 Vue.js 移动端组件库(vue mint-ui 官网),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue minxins,vue minio,vue minio,vue minxins,vue jsmind,vue miniui,vue.min.js,minx vue,内容如对您有帮助,希望把文章链接给更多的朋友!

官网地址 UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。

真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大。

考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。

依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化。即使全部引入,压缩后的文件体积也仅有 + K。

Mint UI

GitHub: Mint UI 是一个基于 Vue.js 的移动端组件库。自 6 月初开源以来,根据社区和团队内部的反馈,修复了一些 bug 并新增了部分组件,于本周发布了 0.2.0 版本。本文介绍如何从零开始构建一个使用 Mint UI 的 Vue 项目。

脚手架

随着 Vue.js 的迅速发展,目前搭建一个 Vue 项目的脚手架已经有不少选择了。比如可以使用官方提供的 vue-cli。本文使用饿了么自己的构建工具 cooking 来完成这个任务。

首先,全局安装 cooking:

npm i cooking -g

新建项目文件夹:

mkdir mint-ui-example

进入项目文件夹,使用 cooking 进行构建:

cooking init vue

最后的参数 vue 表示构建的是基于 Vue.js 的脚手架。

在构建过程中,cooking 需要如下一些参数:

Mint UI 基于 Vue.js 移动端组件库(vue mint-ui 官网)

其中“使用何种 CSS 预处理”这里选择的是 Salad,它是一套基于 PostCSS 的解决方案,有兴趣的同学可以了解一下。当然,你也可以选择其他的预处理器。

完成构建后的项目结构为:

接下来安装 Mint UI:

npm i mint-ui --save

引入 Mint UI

好了,之后的工作可以分为两种情况:

1. 引入全部组件

如果你的项目会用到 Mint UI 里较多的组件,最简单的方法就是把它们全部引入。此时需要在入口文件 main.js 中:

2. 按需引入

如果你只需要使用某个组件,可以仅引入这个组件,Mint UI 能够保证在代码打包时,与这个组件无关的文件不会出现在最终代码里。比如需要引入 Button 组件,则在 main.js 中:

可以看出,上面两种引入方法都要单独引入相应的 CSS 文件。这很不方便,尤其当你使用按需引入的方法引入多个组件时。为了避免这个问题,可以使用 babel-plugin-component 插件。首先当然是安装它:

npm i babel-plugin-component -D

然后在 .babelrc 中配置它:

这样上述两种引入方法就可以简化为:

插件会自动引入相应的 CSS 文件。

使用

每个组件的使用方法请阅读文档,这里只举一个微小的例子。在 app.vue 中:

则会得到如下页面:

预告

标签: vue mint-ui 官网

本文链接地址:https://www.jiuchutong.com/biancheng/375891.html 转载请保留说明!

上一篇:vue中SPA单页面应用程序详解(vue只适合做单页项目吗)

下一篇:vue组件父子间通信之综合练习(聊天室)(vue父子组件之间的通讯)

  • 计提环境保护税怎么做分录
  • 一般纳税人增值税优惠政策2023
  • 增值税附表一填错了,主表没错可以不更正不
  • 个税申报赡养老人可以填公婆吗
  • 汇算清缴的利润表本期数与本年数
  • 非本公司员工如何申报个税
  • 房地产开发企业预收款预缴增值税
  • 固定资产账面价值公式
  • 销项税额计算公式13%
  • 外贸企业视同内销进项可以抵扣吗
  • 销售部预借差旅费什么凭证
  • 电子承兑到期怎样兑现
  • 增值税当月抵扣吗
  • 应付账款明细账模板
  • 估价入账固定资产实际入账时补提折旧吗?
  • 企业注销时有未抵扣的留抵
  • 小规模企业怎么报税
  • 服务费不开发票可以做无票收入吗?
  • 承包给对方了,受伤了要赔偿吗
  • 没有开通对公账户
  • 兼营小规模纳税人增值税优惠
  • 用友填制凭证外币科目没弹出
  • 法人股东转让股权涉税
  • 当无法取得对应报价时,将以即时现价报单
  • 验资报告需要什么材料
  • 银行承兑汇票质押率90%
  • 项目的投入资金预算表
  • 公司+农户经营模式是什么意思
  • 注销公司如何登报
  • php 首字母大写
  • 交纳印花税
  • 相思树学名叫什么
  • 工会经费免征三年的文件山东
  • php数组转树
  • 增值税附加税的计算基数
  • 个税率是多少
  • mybatis怎么用
  • php7编译安装gd库
  • 办公室租金会有公摊吗
  • 差额征税可以开专票抵扣吗
  • 买手机手续费怎么算的
  • 出租固定资产租金属于什么收入
  • 企业营业外收入有哪些
  • 什么叫做增值税的新增价值呢
  • 小规模购进商品怎么做账
  • 三方协议代付的钱在哪里
  • 购税盘怎么做会计分录
  • 开出去的发票没有进项发票如何核算成本?
  • 建账之前的业务怎么处理
  • 如果非货币性资产会怎样
  • 损益类科目如何记忆
  • 漏记以前年度财务费用怎么处理
  • 三证合一是哪三证
  • 计提了减值准备怎么算折旧额
  • 企业注销前是不是资产必须处理完
  • 其他流动资产是
  • 企业增资还需要增资账户么
  • sql数据库监控工具
  • windows启动失败是怎么回事
  • windows10pc游戏无法全屏
  • mac硬盘挂载软件
  • 哪款系统重装软件比较好
  • win8.1如何关闭开机密码
  • win8系统咋样
  • cocos2dx schedule
  • android应用程序的主要语言是java
  • 列表框代码
  • jquery时间格式
  • [置顶]游戏名 TentacleLocker
  • unity打开c#
  • 开票软件连接服务器失败什么原因
  • 青春逐梦税务蓝
  • 中国税务局官网热线
  • 城市垃圾处理费会计分录
  • 餐饮专票可以抵扣吗
  • 怎样在电子税务局申报社保
  • 税务申报系统如何改成密码登录
  • 三证合一后还要做什么
  • 国际税务师证书
  • 资源综合利用企业所得税优惠
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设