MintUI引入vue项目以及引入iconfont图标
官网地址:http://mint-ui.github.io/#!/zh-cn
中文文档:http://mint-ui.github.io/docs/#/zh-cn2
示例展示:http://elemefe.github.io/mint-ui/#/
如何引入vue2项目:
在public的index.html页面,用CDN的形式引入,这样可以减少vendor包的体积,当然如果不介意可以安装在本地
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
- <title></title>
- <!-- MintUI -->
- <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
- </head>
- <style>
- *{
- list-style: none;
- margin:0;
- padding:0;
- text-decoration: none;
- }
- p{
- margin:0;
- }
- </style>
- <body>
- <noscript>
- <strong>We're sorry but officialwebsite doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
- </noscript>
- <div id="app"></div>
- <!-- vue -->
- <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
- <!-- axios -->
- <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
- <!-- vuex -->
- <script src="https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js"></script>
- <!-- vue-router -->
- <script src="https://cdn.bootcss.com/vue-router/3.0.7/vue-router.min.js"></script>
- <!-- MintUI -->
- <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
- <!-- jquery -->
- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
- </body>
- </html>
然后再vue.config.js中配置中修改如下:
- externals: {
- 'vue': 'Vue',
- 'vuex': 'Vuex',
- 'vue-router': 'VueRouter',
- 'mint-ui': 'MINT',
- 'Axios':'axios'
- }
修改main.js (注释)
修改store.js (注释)
- // import Vue from "vue";
- // import Vuex from "vuex";
- // Vue.use(Vuex);
修改router.js (注释)
- // import Vue from "vue";
- import Router from "vue-router";
- // Vue.use(Router);
如果之前安装了vue、vuex等上面通过cdn引入的文件,现在再package.json中删除对应字段,重新npm insatll安装一下,这样可以批量去掉不需要的依赖包。
之后运行一下,看看项目是否正常,看看MintUI是否成功引入
运行后显示的页面:
ok,到此vue项目中引入MintUI完毕!!如果只是引入MintUI只需要对应的把MintUI相关的做一下调整就可!!!
看了看style.css中字体图标,只有以下7种:
- .mintui {
- font-family:"mintui" !important;
- font-size:16px;
- font-style:normal;
- -webkit-font-smoothing: antialiased;
- -webkit-text-stroke-width: 0.2px;
- -moz-osx-font-smoothing: grayscale;
- }
- .mintui-search:before { content: "\E604"; }
- .mintui-more:before { content: "\E601"; }
- .mintui-back:before { content: "\E600"; }
- .mintui-field-error:before { content: "\E605"; }
- .mintui-field-warning:before { content: "\E608"; }
- .mintui-success:before { content: "\E602"; }
- .mintui-field-success:before { content: "\E609"; }
很显然,对于项目开发来说不够。
那么接下来,我们学习以下如何引入iconfont(阿里图库中的字体图标)
首先选择一个图标,假如购物车
然后点击购物车,添加至项目(没有项目可以创建项目)
然后,进入项目页中,选择Font class模式,生成链接,然后复制到自己做的项目中引入:
在vue的index.html引入以下样式:
- <!-- icon font -->
- <link rel="stylesheet" href="http://at.alicdn.com/t/font_1554067_8odm51jt7so.css">
至此,图标引入项目,再来看看如何使用:
- <span class="iconfont icon-Connectorright-px"></span>
- <span class="iconfont icon-noodle_px"></span>
这样,我们在项目中就成功的额引入了iconfont图标了。
但是,mintUI中大多都是指定了icon,只能取那几个值,来看看mintUI自带的icon是怎么加上的:
而我们引入的iconfont图标,font-family是“iconfont”,前缀是“icon-”,所以不能做为mint-ui里的icon属性值。
这是可以改的,在iconfont官网你的项目中,点击【更多操作】—【编辑项目】
保存后,注意观察,刚才我们的iconfont图标已从默认的“icon-”前缀变成“mintui-”前缀了,但修改项目后的样式链接已经失效,需要重新生成链接,重新引入我们的项目中。
之后,可以在icon属性中使用我们引入的图标了,这意味着我们扩充了mint-ui里的图标,不再局限在那7个图标了.
然后我们的引入方式就变成了:
- <span class="mintui mintui-Connectorright-px"></span>
- <span class="mintui mintui-noodle_px"></span>
想使用更多的图标,就添加到项目,然后生成链接,引入项目,就可以使用了!
完。
MintUI引入vue项目以及引入iconfont图标的更多相关文章
- 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap
1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...
- 在vue项目中引入jquery
在vue项目中引入jquerycnpm install jquery --save在main.js中引入,加入下面这行代码:import 'jquery'注:有些项目是按需加载的,在main.js里面 ...
- vue项目中引入Sass
Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...
- 在vue项目中引入阿里图标库小记
使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...
- vue项目中引入iconfont
背景 对于前端而言,图标的发展可谓日新月异.从img标签,到雪碧图,再到字体图标,svg,甚至svg也有了类似于雪碧图的方案svg-sprite-loader.雪碧图没有什么好讲的了,只是简单地利用了 ...
- 如何在vue项目中引入阿里巴巴的iconfont图库
1. 打开 http://www.iconfont.cn/ 2. 选择我们喜欢的图标,点击上面的小车,加入图标库,即右侧的购物车 3.点击购物车,点击下载代码 4.解压下载的文件夹,将文件夹复制到 a ...
- vue-cli构建的vue项目中引入stylus文件
在写基于vue-cli的vue项目时,如果直接引入styl文件,会报错,需要安装stylus.stylus-loader依赖以及别名配置. 1.下载安装stylus.stylus-loader,推荐使 ...
- vue项目全局引入vue-awesome-swiper插件做出轮播效果
在安装了vue的前提下,打开命令行窗口,输入vue init webpack swiper-test,创建一个vue项目且名为swiper-test(创建速度可能会有点慢,耐心等),博文讲完后,源码托 ...
- 在 Vue 项目中引入 tinymce 富文本编辑器
项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...
随机推荐
- java之spring之初始spring
1.Spring 在多个框架中起到润滑剂的作用,桥梁的作用,纽带的作用. 2.Spring是一个容器,也是一个对象工厂.帮助程序员创建对象,管理对象. 3.Spring的体系结构: 4.学习sprin ...
- python预习day1
计算机基础 cpu 大脑 内存 临时记忆 硬盘 永久记忆 输入设备 眼睛 耳朵 输出设备 嘴巴 操作系统 控制计算机硬件工作流程的 应用程序 安装在操作系统之上的软件 python简介 python是 ...
- angular http interceptors 拦截器使用分享
拦截器 在开始创建拦截器之前,一定要了解 $q和延期承诺api 出于全局错误处理,身份验证或请求的任何同步或异步预处理或响应的后处理目的,希望能够在将请求移交给服务器之前拦截请求,并在将请求移交给服务 ...
- 【转】Vue.js——60分钟组件快速入门(上篇)
文章作者:keepfool 文章出处:http://www.cnblogs.com/keepfool/ 组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的 ...
- MongoDB 基本概念
MongoDB和关系型数据库的对应关系 关系数据库 MongoDB 数据库 database 数据库 database 表格 table 集合 collection 行 row 文档 ...
- 深入理解JVM-hotspot虚拟机对象探秘
1.背景与大纲 在我们了解了java虚拟机的运行时数据区后,我们大概知道了虚拟机内存的概况,但是我们还是不清楚具体怎么存放的访问的: 接下来,我们将深入探讨HotSport虚拟机在java堆中对象的分 ...
- zookeeper的安装使用
转载从:https://blog.csdn.net/shenlan211314/article/details/6170717 一.zookeeper 介绍 ZooKeeper 是一个为分布式应用所设 ...
- Linux操作系统的计划任务
Linux操作系统的计划任务 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.任务计划概述 Linux任务计划.周期性任务执行 未来的某时间点执行一次任务: at: 指定时间点, ...
- MySQL重置自增id
专注和简单一直是我的秘诀之一,简单的事情可能比复杂更难做到,你必须努力理清思路,从而使其便的简单:但这最终是值得的,因为你一旦做到了,便可创造奇迹. ---乔布斯 #删除所有数据 delete fr ...
- 【原创】selenium+python+openpyxl实现登录自动化测试,自动读取excel用例数据,并将数据结果自动写入到excel
# -*- coding: utf-8 -*- from selenium import webdriver from openpyxl import load_workbook from time ...