[vue2] vue introduces Ali vector icon iconfont and introduces lodash plug-in

Technology : vue2.X

According to the previous two chapters
1: " [vue create] 1. Use vue creat to build a project "
2: " [vue create] 2. Configure Esline, less, nprogress, ant-design-vue, environment variables env, axios, vuex, Router , routing guard and login page " Next, introduce the Ali vector icon iconfont and the lodash plug
-in into the project

1. Introduce Ali vector library iconfont

Step 1. Create a new project on the official website of iconfont.
Font Family: it is the icon class identification name
FontClass/Symbol Prefix: it is the prefix name of the newly added icon insert image description here

Step 2. Go to the gallery to add the required icon = "click the download to local button, decompress the downloaded compressed package, and get the following file insert image description here

Step 3. Add an icon folder under the project src\assets folder, and then copy the 6 files of iconfont into it
insert image description here

Step 4. Introduce iconfont globally in the main.js file

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

Step 5. Add the following code to app.vue

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

Step 6. Add the following code to the vue page

<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>

My libraries are these icons

insert image description here
Browsing the page effect:

Points to note:
1. The Font Family in the project configuration of the Ali iconfont library is iconfont, so the class needs to be configured as iconfont <i class="iconfont"></i>
2. It must be prefixed with iconfont, otherwise the icon cannot be displayed, and the interface actually displays a small square
3 .If an icon is added, update the iconfont code and copy the src\assets\icon\iconfont.css file to replace it insert image description here

2. Introduce lodash

Step 1. Run the following command in the terminal to install the Lodash plugin

yarn add lodash

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

The screenshot below is installed successfully
insert image description here

Step 2. Declare as a global variable in the main.js file

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

Step 3. Use it on the vue page (use _ or this._ anywhere to call 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);

insert image description here

Points to note:
1. Lodash official website: https://www.lodashjs.com/
2. If the installation fails all the time and prompts info There appears to be trouble with
// your network connection. Retrying…, execute ( yarn config set registry 'https://registry.npm.taobao.org) to replace it with the Taobao image source, then install again