Tecnología : vue2.X
Según los dos capítulos anteriores
1: " [vue create] 1. Utilice vue creat para construir un proyecto "
2: " [vue create] 2. Configure Esline, less, nprogress, ant-design-vue, variables de entorno env, axios , vuex, enrutador, protección de enrutamiento y página de inicio de sesión " A continuación, introduzca la fuente del ícono vectorial Ali y el complemento lodash
en el proyecto
1. Presentar la fuente de iconos de la biblioteca vectorial Ali
Paso 1. Cree un nuevo proyecto en el sitio web oficial de iconfont.Familia
de fuentes: es el nombre de identificación de la clase del icono.
Clase de fuente/Prefijo de símbolo: es el nombre del prefijo del icono recién agregado.
Paso 2. Vaya a la galería para agregar el ícono requerido = "haga clic en el botón descargar a local , descomprima el paquete comprimido descargado y obtenga el siguiente archivo
Paso 3. Agregue una carpeta de iconos en la carpeta src\assets del proyecto y luego copie los 6 archivos de iconfont en ella.
Paso 4. Introduzca iconfont globalmente en el archivo main.js
import './assets/icon/iconfont.js' //引入阿里巴巴图标库js
import './assets/icon/iconfont.css'//引入阿里巴巴图标库css
Paso 5. Agregue el siguiente código a app.vue
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
Paso 6. Agregue el siguiente código a la página 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>
Mis bibliotecas son estos iconos
Efecto de navegación de la página:
Puntos a tener en cuenta:
1. La familia de fuentes en la configuración del proyecto de la biblioteca iconfont de Ali es iconfont, por lo que la clase debe configurarse como iconfont <i class="iconfont"></i>
2. Debe tener el prefijo iconfont; de lo contrario, el icono no se puede mostrar , y la interfaz en realidad muestra un pequeño cuadrado
3. Si se agrega un ícono, actualice el código de iconfont y copie el archivo src\assets\icon\iconfont.css para reemplazarlo.
2. Introducir lodash
Paso 1. Ejecute el siguiente comando en la terminal para instalar el complemento Lodash
yarn add lodash
//如果一直安装失败，提示info There appears to be trouble with
// your network connection. Retrying...，则更换为淘宝镜像源，后再次安装
yarn config set registry 'https://registry.npm.taobao.org
La siguiente captura de pantalla se instaló correctamente.
Paso 2. Declarar como variable global en el archivo main.js
import _ from 'lodash'
Vue.prototype._ = _
Paso 3. Úselo en la página vue (use _ o this._ en cualquier lugar para llamar a 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);
Puntos a tener en cuenta:
1. Sitio web oficial de Lodash: https://www.lodashjs.com/
2. Si la instalación falla todo el tiempo y aparece información Parece haber problemas con
// su conexión de red. Reintentando…, ejecute ( yarn config set registry 'https://registry.npm.taobao.org) para reemplazarlo con la fuente de imagen de Taobao, luego instalar nuevamente