blog station

input中加slot标签，表单验证无法回显

默认宽度可能会覆盖回显值，设置足够宽度

Form表单验证通过，却没反应

1
2
3
4
5
6
7
8
9
10
11
12
13

//如果表单验证rules对象中有自定义验证，必须在验证函数最后返回回调函数
let validatePass1 = (rule, value, callback) => {
let reg = /(?!^0*(\.0{1,2})?$)^\d{1,13}(\.\d{1,2})?$/;
if (value && !reg.test(value)) {
    callback(new Error('仅支持输入大于0的数字'));
} else {
    //这里必须返回
    callback()
}
};
rules: {
    market_price: [{ validator: validatePass1, trigger: "change" }],
}

运行npm install 出现thon Python is not set from command line or npm configuration解决方案

管理员权限打开执行：npm install –global –production windows-build-tools

解决Error: ENOENT: no such file or directory, scandir 安装node-sass报错

npm rebuild node-sass

我用的是Windows server 2019系统服务器

nginx安装

本项目用到的框架和工具：vite2 + vue3 + vue-router4 + vuex4 + TS

1.搭建 Vite + Vue 项目

Vite 需要 Node.js 版本 >= 12.0.0。

1
2
3
4
5
6
7
8

# npm 6.x
npm init @vitejs/app my-vue-app --template vue

# 如果用ts的话：
npm init @vitejs/app my-vue-app --template vue-ts

# npm 7+, 需要额外的双横线：
npm init @vitejs/app my-vue-app -- --template vue

CSS

1. 那些不常见，但却非常实用的css属性
2. 24个css新特性2020

JS

1. JS开发必须知道的41个技巧
2. 2020年前端面试复习必读文章【超三百篇文章/赠复习导图】
3. Javascript 里的奇葩知识

直播插件

因为小程序组件<live-player />需要直播相关主体，所以用了腾讯云直播插件<live-room-play />
相关文档
其中有个播放状态监控：

1
2

<!-- 这里有个小窗播放`picture-in-picture-mode`此插件1.3.0版本已经支持，但是没实现了，不知原因，查找中... -->
<live-room-play class="live-room" objectFit="contain" version="2" picture-in-picture-mode="['push', 'pop']" liveAppID="" autoplay="{{autoPlay}}" bindPlayEvent="playStatus" bindNetStatus="netStatus" autopause="true" bindError="error" playUrl="{{playUrl}}">

列表倒计时

find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
find() 方法为数组中的每个元素都调用一次函数执行：
当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined
注意: find() 对于空数组，函数是不会执行的。
注意: find() 并没有改变数组的原始值。

canvas不能wx:if隐藏，否则会获取不到元素，可以使用fixed+top:-9999rpx实现

canvas 2d生成背景图片不遮挡文字：使用await

1
2
3
4
5
6
7
8
9
10
11

const bgImg = canvas.createImage();
      bgImg.src = 'http://www.guoxh.com/blog/img/blog/qr.png';
      let bgImgPo = await new Promise((resolve, reject) => {
        bgImg.onload = () => {
          resolve(bgImg)
        }
        bgImg.onerror = (e) => {
          reject(e)
        }
      });
      ctx.drawImage(bgImgPo, 0, 0, 257, 389)

个人认为这个框架有点鸡肋，起初以为它可以做到SSR，事实too young too naive,这个框架还是相当于封装了个prerender-spa-plugin插件，增加了一些独有的特性和方法，要想做到SSR还是得依赖node；

nuxt基于vuejs的seo优化

一、css单独打包
在nuxt.config.js配置中加下面代码：

1
2
3

build: {
    extractCSS: true,
  }

@vue/cli基于webpack + prerender-spa-plugin + vue-meta-info的seo优化

1.安装prerender-spa-plugin插件

1

npm i prerender-spa-plugin

2.@vue/cli（vuecli3）配置vue.config.js文件添加插件参数配置：