项目记录 | 青训营笔记这是我参与「第四届青训营」笔记创作活动的的第7天做项目过程中，有很多地方需要注意，这里记录下

这是我参与「第四届青训营」笔记创作活动的的第7天

做项目过程中，有很多地方需要注意，这里记录下来。

Git

git丢弃本地修改的所有文件

git checkout . #本地所有修改的。没有的提交的，都返回到原来的状态

遇到合并时出现冲突先不解决，返回

git reset --merge

解决冲突后再次合并

git add .

git status

git commit -m"说明"

git merge 分支名

git commit 报错 'node' 不是内部或外部命令，也不是可运行的程序或批处理文件

可能是提交的时候有校验导致的，而验证的插件依赖于nodejs，首先检查是否配置了nodejs相关环境，如果实在找不到原因可以尝试提交取消验证，在最后面加上--no-verify即可

项目

引入element-plus后样式不生效

main.js中加上import 'element-plus/dist/index.css'

Vue在v-for循环中动态加载相对路径图片

Vue中加载相对路径资源需要加上require()才被解析

1660533454(1).png

通过axios获取本地json数据

安装axios npm install axios --save
json文件放在public文件夹中(vue3)
通过axios.get()方法获取json数据
- 在对应页面import axios
- 通过axios.get()方法获取json数据
- 调用方法

将部分页面截图并下载到本地

用到html2canvas

 var downloadContent = document.querySelector('#renderControlPanel');
 html2canvas(downloadContent).then(canvas => {
          let url = canvas.toDataURL("image/png");
          let link = document.createElement("a");
          var date = new Date();
          var year = date.getFullYear();
          var month = date.getMonth() + 1;
          var day = date.getDate();
          var mytime = date.toLocaleTimeString();     //获取当前时间
          var time = year + "-" + month + "-" + day + ' ' + mytime;
          link.download = "页面预览" + time;
          link.href = url;
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);

        });

使用html2canvas改善图片清晰度

主要步骤是

扩大canvas容器，其实就是增加了分辨率
关闭canvas默认的抗锯齿设置
将合成图片缩放至原来的大小

handleDownload() {
        var downloadContent = document.querySelector('#renderControlPanel');
        var width = downloadContent.offsetWidth
        var height = downloadContent.offsetHeight
        var canvas = document.createElement('canvas')
        var scale = 2
        canvas.width = width * scale
        canvas.height = height * scale
        canvas.getContext('2d').scale(scale, scale)
        var opts = {
          scale: scale,
          canvas: canvas,
          width: width,
          height: height,
          // 避免下载不全
          backgroundColor: null,
          // 【重要】开启跨域配置
          useCORS: true
        }

        html2canvas(downloadContent, opts).then((canvas) => {
          var context = canvas.getContext('2d')
          // 【重要】关闭抗锯齿
          context.mozImageSmoothingEnabled = false
          context.webkitImageSmoothingEnabled = false
          context.msImageSmoothingEnabled = false
          context.imageSmoothingEnabled = false

          var img = Canvas2Image.convertToPNG(canvas, canvas.width / 2, canvas.height / 2)

          let dataURL = img.getAttribute('src')

          // 下载图片
          let a = document.createElement('a')
          document.body.appendChild(a)
          a.href = img.src
          // 设置下载标题
          var date = new Date();
          var year = date.getFullYear();
          var month = date.getMonth() + 1;
          var day = date.getDate();
          var mytime = date.toLocaleTimeString();     //获取当前时间
          var time = year + "-" + month + "-" + day + ' ' + mytime;
          a.download = "页面" + time; // 图片名字
          a.click()
        })
      },