【日积录】~~~不断更新

学习Vue 还会有一段时间，但是自己的脑容量有限，总是忘掉一些东西。因此，找一个专门的地方，记录一些可小可大的小点。已被不时之需。

古人云：“无三不成礼”，又云“兽三为群，人三为众，女三为粲”。以此为开始吧。

时间：2022年5月5日

1、在Css里面使用@

@被定义为src的别名，在CSS中使用，需要在@前面加上一个~

2、token（令牌）

token是由服务器下发，是一个用户的唯一标识。很多网站都在用token作为用户的id。vuex不是持久化的。

3、Vue开发中，api太多解决方法：

在main.js中引入API

配置

这样，当你需要使用API里面的接口时，不需要在引入

直接这样即可：

=========================================================================

2022年5月6日

=========================================================================

4、qrcode的使用

可以将一个地址转换成图片

<1 在npm官网中，找到qrcode 传送门

<2 搜索qrcode 地址

<3 安装

npm install --save qrcode

<4 引入 看ES6 ES7的使用

import QRCode from 'qrcode'

使用，如下图

其中最核心的还是 ：

QRCode.toDataURL(URl)  URl指的是二维码图片的本地地址

返回的是一个Promise，加载完后，返回的是二维码图片地址

<template>
    <div>
        <el-button type="success" icon="el-icon-user-solid" @click="toEwm">成功按钮</el-button>
        <img :src="imgUrl" />
    </div>
  
</template>

<script>
import QRCode from 'qrcode'
export default {
    name:'Test',
    data()
    {
        return{
            imgUrl:""
        }
    },
    methods:{
        async toEwm()
        {
            let result =  await QRCode.toDataURL("C:\\fakepath\\11.png");
            //返回的是一个图片的地址
            this.imgUrl = result
        }
    }
}
</script>

<style>

</style>

地址里面存储的是，一个自己生成的二维码 

【效果图】

======================================================

2022年5月9日

======================================================

5、图片懒加载

Vue-LazyLoad 懒加载传送门

会用就行，如果访问服务器很慢，图片加载不出来，会暂时展现loading的图片

如果获取失败，则展示error的图片

import VueLazyload from 'vue-lazyload'
import atm from "@/assets/1.gif"

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: atm,
  loading: atm,
  attempt: 1
})

6、表单验证

一个组件validate，这个GitHub上的很麻烦，饿了么给的比较清楚。也是会用就行

传送门，记得下载2版本的

7、路由懒加载

类似于饿了么ui的按需引用，用的时候才引入，提高了效率。会用即可。搭建项目的时候，选择路由懒加载的方式。使用的时候【传送门】
 

8、打包时删去map文件

map文件是组件中报错的详细汇总，上线了，也没啥用，而且占得的内存很大。删了比较好

在vue.config.js中加入 productionSourceMap:false, 

打包命令  npm run build

=========================================================================

2022年5月14日

=========================================================================

9、less样式

浏览器不支持less样式，安装一个插件让浏览器识别你的less less-loader

命令：npm install less-loader@7  (注:@7为7版本，如果7版本不行，则更改成其他版本试试) 

 

还需要在使用less样式的地方，加上 lang="less" 

但愿精诚所至，金石为开吧！