【vue2】vue引入阿里矢量图标iconfont以及引入lodash插件

技术：vue2.X

根据前面两章
一：《【vue create】一.使用vue creat搭建项目》
二：《【vue create】二.配置Esline、less、nprogress、ant-design-vue、环境变量env、axios、vuex、Router、路由守卫以及登录页》
接下来在项目中引入阿里矢量图标iconfont以及引入lodash插件

1.引入阿里矢量库iconfont

第一步.在iconfont的官网新建项目
Font Family:是图标类标识名
FontClass/Symbol 前缀：是新增图标的前缀名称在这里插入图片描述

第二步.去图库新增需要的图标=》点击下载至本地按钮，解压下载的压缩包，得到如下的文件在这里插入图片描述

第三步.在项目src\assets文件夹下新增icon文件夹，然后把iconfont的6个文件复制进去
在这里插入图片描述

第四步.在main.js文件全局引入iconfont

import './assets/icon/iconfont.js' //引入阿里巴巴图标库js
import './assets/icon/iconfont.css'//引入阿里巴巴图标库css

第五步.在app.vue加入如下代码

.icon {
    
    
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

第六步.在vue页面里新增如下代码

<template>
  <div>首页
  //单色图标
    <i class="iconfont h-icon-xiaolian1"></i>
	//彩色图标如下
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#h-icon-xiaolian"></use>
    </svg>
  </div>
</template>

我的库是这些图标

在这里插入图片描述
浏览页面效果：

注意点：
1.阿里iconfont库项目配置里的Font Family是iconfont，则 class需要配置为iconfont <i class="iconfont"></i>
2.一定需要带iconfont的前缀名，不然图标无法显示，界面实际显示的是小方块
3.如果新增了图标，则更新iconfont代码，并复制src\assets\icon\iconfont.css文件替换即可在这里插入图片描述

2.引入lodash

第一步.在终端运行如下命令安装Lodash插件

yarn add lodash

//如果一直安装失败，提示info There appears to be trouble with
// your network connection. Retrying...，则更换为淘宝镜像源，后再次安装
yarn config set registry 'https://registry.npm.taobao.org

如下截图安装成功
在这里插入图片描述

第二步.在main.js文件申明为全局变量

import _ from 'lodash'
Vue.prototype._ = _

第三步.在vue页面使用(在任何地方使用_或者this._即可调用lodash)

    let users = [
      {
    
     user: 'a', age: 48 },
      {
    
     user: 'b', age: 34 },
      {
    
     user: 'a', age: 42 },
      {
    
     user: 'b', age: 55 }
    ];
 
    let c = this._.orderBy(users, ['age'], ['desc']);
    console.log('age降序排列:', c);
 
    let d = _.orderBy(users, ['user', 'age'], ['desc', 'asc']);
    console.log('user降序,age升序排序:', d);

在这里插入图片描述

注意点：
1.Lodash官网：https://www.lodashjs.com/
2.如果一直安装失败，提示info There appears to be trouble with
// your network connection. Retrying…，则执行（yarn config set registry 'https://registry.npm.taobao.org）更换为淘宝镜像源，后再次安装