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:百度前端的开源项 ...
随机推荐
- C# vb .net实现邮戳效果滤镜
在.net中,如何简单快捷地实现Photoshop滤镜组中的邮戳效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第一步 ...
- JVM性能优化--Java的垃圾回收机制
一.Java内存结构 1.Java堆(Java Heap) java堆是java虚拟机所管理的内存中最大的一块,是被所有线程共享的一块内存区域,在虚拟机启动时创建.此内存区域的唯一目的就是存放对象实例 ...
- Laravel 5.5 发布，ThinkSNS+ 升级及状况分享
升级场景 ThinkSNS+ 一直依赖,都是保留 Laravel 的 commit 记录的前提下,进行开发,为了追随 Laravel 的升级,我们在本地的仓库中新建了一个分支,如果 laravel 更 ...
- C++ primer学习笔记_6_函数---函数定义、参数传递
1. 习题参考: 6.14 举一个形参应该是引用类型的例子,再举一个形参不能是引用类型的例子. 答: 形参使用引用类型的情况:(1)避免拷贝传递大对象的时候,这里的string对象s:(2)当需要从函 ...
- BUUCTF复现记录1
平台地址:https://buuoj.cn/ 里面很多之前的题目,不错的平台.另外幕后大哥博客https://www.zhaoj.in/ 以下的解题,都是参考各位大佬的WP去复现,重在记录下 ...
- 优化nginx数据包头缓存
例子:414错误,网址太长. 长网址访问例子: 以下脚本会生成一个长网址并访问,导致414长网址报错. [root@proxy ~]#vim nginx_test.sh #!/bin/bash URL ...
- E. Little Pony and Expected Maximum（组合期望）
题目描述: Little Pony and Expected Maximum time limit per test 1 second memory limit per test 256 megaby ...
- windows查看文件MD5值的命令
今天需要,就记录一下. certutil -hashfile filename MD5 certutil -hashfile filename SHA1 certutil -hashfile file ...
- discuz数据批量入库接口
近期在做社区,首选discuz,数据需要用scrapy爬虫批量入库,就写了一个php入库接口. <?php define('PW', 'abc123456');//一定要修改 if($_REQU ...
- 深度学习Keras框架笔记之TimeDistributedDense类
深度学习Keras框架笔记之TimeDistributedDense类使用方法笔记 例: keras.layers.core.TimeDistributedDense(output_dim,init= ...