mintUI和mUI
mintUI
安装:
npm install mint-ui -S
引入:
// 按需引入部分组件 import { Cell, Checklist } from 'mint-ui'; Vue.component(Cell.name, Cell); Vue.component(Checklist.name, Checklist);
/*引入mint 注册成标签(全局)*/
import { Header ,Swipe, SwipeItem } from 'mint-ui'
Vue.component(Header.name, Header)
Vue.component(Swipe.name, Swipe)
Vue.component(SwipeItem.name, SwipeItem)
使用:
<mt-header title="商城">
<router-link to="/" slot="left">
<mt-button icon="back"> < 返回</mt-button>
</router-link>
<mt-button icon="more" slot="right"></mt-button>
</mt-header>
mUI
下载代码例子,引入:
/*导入mui样式表*/
import './lib/mui/css/mui.css'
import './lib/mui/css/icons-extra.css'
使用:
<nav class="mui-bar mui-bar-tab">
<router-link class="mui-tab-item" to="/home">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</router-link>
<nav>
mintUI和mUI的更多相关文章
- 基于Mint UI和MUI开发VUE项目一之环境搭建和首页的实现
一:简介 Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率.真正意义上的按需加载组件.可以只加载声明过的组件及其样式 ...
- Vue(day7)
一.环境搭建 下面我们需要为后面要做的Vue项目搭建开发环境. 1.基本的运行环境 该项目使用node& vue在webpack环境下进行开发.首先安装基本的模块文件: npm install ...
- 基于Vue的WebApp项目开发(六)
实现商品购买列表页面 步骤一:新建goodslist.vue文件 <template> <div id="tml"> <!--利用mui中的图文表格组 ...
- 基于Vue的WebApp项目开发(五)
实现图片分享列表 步骤一:新增图片列表文件photolist.vue <template> <div id="tml"> 图片分享页面 </div&g ...
- 基于Vue的WebApp项目开发(四)
实现新闻咨询页面 目录结构 步骤一:创建newslist.vue文件 <template> <div id="tml"> <!--使用mui框架,实现 ...
- 基于Vue的WebApp项目开发(三)
实现根组件通用的头部和底部样式 明白由webpack搭建起来的Vue项目的执行流程,那么就可以知道实现这个需要只要在根组件和入口文件上做“手脚”即可 <!--以后项目的根组件--> < ...
- Vue PC端框架
Vue PC端框架 1. Element 中文文档:http://element-cn.eleme.io/#/zh-CN github地址:https://github.com/ElemeFE/ele ...
- Vue笔记(有点乱)
Vue学习笔记(2019.7.31) 目录 Vue学习笔记(2019.7.31) vue 基本指令用法 v-cloak v-text v-html v-bind v-on 跑马灯 v-on v-mod ...
- iView webapp / Mint UI / MUI [前端UI]
前端UI iView webapp一套高质量的 微信小程序 UI 组件库 https://weapp.iviewui.com/?from=iview Mint UI 基于 Vue.js 的移动端组件库 ...
随机推荐
- awk 分组求和
awk 分组求和 分组求和 awk '{s[substr($2,1,6)] += $1} END{for(i in s) {print i, s[i]/(1024*1024*1024)} }' fil ...
- PackageUtils
import android.content.Context; import android.content.Intent; import android.content.pm.Application ...
- Smarty section、foreach控制循环次数的实现详解
<!--{ section name='i' loop=$a }--><!--{ if $smarty.section.i.index < 3 }--><!--{ ...
- PO BAPI "BAPI_PO_CREATE1"
DATA: poheader LIKE bapimepoheader, poheaderx LIKE bapimepoheaderx, poitem LIKE ...
- Elasticsearch 空值过滤
参考:https://blog.csdn.net/zhang862520682/article/details/80333196 参考:https://www.jianshu.com/p/7a5d70 ...
- $nextTick的使用
原文地址 概览 官方文档说明: 用法: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 疑问: DOM 更新循环是指什么? 下次更新循环是什么时候 ...
- Ruby On Rails 路径穿越漏洞(CVE-2018-3760)
Ruby On Rails在开发环境下使用Sprockets作为静态文件服务器,Ruby On Rails是著名Ruby Web开发框架,Sprockets是编译及分发静态资源文件的Ruby库. Sp ...
- Java 基础篇之注解
注解 注解,其实是代码里的特殊标记,这些标记可以在编译.类加载.运行时被读取,并执行相应的处理.通过使用注解,可以在不改变原有逻辑的情况下,在源文件中嵌入补充一些信息. Annotation 提供了一 ...
- 李宏毅 Gradient Descent Demo 代码讲解
何为梯度下降,直白点就是,链式求导法则,不断更新变量值. 这里讲解的代码为李宏毅老师机器学习课程中 class 4 回归展示 中的代码demo Loss函数 python代码如下 import n ...
- flex 遇上white-space:nowrap的2种解决方法
需求:使用flex布局,超出部分想使用点点点显示 一.方法1使用min-width:0 效果: HTML代码如下: <div class="team-body"> &l ...