鱼与前端🐟

前言mini-Vue 是精简版本的 Vue3，包含了 vue3 源码中的核心内容，附加上 demo 的具体实现。本篇是总集篇，包含了 mini-vue 的全部基本实现，参见传送门内容 传送门reactive篇从零开始的mini-vue①—reactive篇 vnode篇从零开始的mini-vue②—vnode篇 patch篇从零开始的mini-vue③—patch篇 核心diff篇从零开始的mini-vue④—核心diff篇 最长上升子序列篇从零开始的mini-vue⑤—最长上升子序列篇 Component 篇从零开始的mini-vue⑥—Component篇 Scheduler 篇从零开始的mini-vue⑦—Scheduler篇 Compiler 篇从零开始的mini-vue⑧—Compiler篇

前言开始提前批直通车啦~~ 本篇带来 ts 超集的各种挑战加个人解说。源码地址：传送门 Hello World 1type HelloWorld = string; Pick code 12345type MyPick<T, K> = {};type MyPick<T, K extends keyof T> = { [P in K]: T[P];}; 解释：pick 就是获取第一个参数的类型的其中几个，写法是Pick<target,'属性1'|'属性2'>，所以要实现他，就是说第二个属性要在 T 中，extends keyof 保证 K 的所有的类型在 T 中，in 保证 P 所有的类型在 K 中。 那么这里会有一个疑问。in 和 keyof 的区别 首先 keyof 是取 interface 的联合类型， 123456interface UserInfo { userName: "jojo"; psw: "123";&# ...

前言本篇博客主要用于记录hexo butterfly主题魔改，涉及到部分css和js的添加和更改，基本没有对pug和styl进行修改，可以放心食用.每天争取更新 开发日志 2021-12-13更新字体2021-12-14更新本地搜索2021-12-15更新Hexo搭建待更新网站音乐，snackbar，音乐css，pjax2021-12-16更新网站aplayer，音乐css，pjax2021-12-18更新插件版aplayer2021-12-19重新修改了文章布局，发布了几篇教程2021-12-20更新一个菜单栏魔改2022-1-2更新一个RGB头像魔改更新了主页动画平滑处理更新了git贡献日历更新了电子时钟更新了utools插件压缩功能更新Typora2022-1-3更新一个picgo图床更新jojo石之海信封2022-1-3更新替身生成器 Hexo搭建Hexo搭建+github Aplayer全局吸底+不间断播放+配色修改Aplayer的设置与优化 ...

前言mock 工具的使用以及拓展 形式开启 mock 有两种形式 环境变量和注解 通过环境变量开启 mock（生产阶段优选）这个需要 env 里面是否包含 mock 环境的判断不过一旦构建好就改不了了 mock 通过注解开启 mock（开发阶段优选）项目默认开启 mock(main.ts 中注入)不需要的时候直接注释掉即可 综上的新方法开发环境：默认 mock 环境 123VUE_APP_MODE=mockVUE_APP_URL=x'x'xVUE_APP_MARK_TEXT=开发环境 生产环境 123VUE_APP_MODE=productVUE_APP_URL=xxxxVUE_APP_MARK_TEXT=生产环境 main.ts 1234// 通过注释动态控制开发环境是否需要mockif (process.env.VUE_APP_MODE === "mock") { // require("@/mock");} mock 基本使用http://mockjs.com/examples.html常用： 12 ...

前言history模式部署 需要注意的东西 如下： histroy模式加载baseUrl 打包同样 前缀是baseUrlvue.config.js 将dist文件夹下的东西提交到gh-pages指令1git subtree push --prefix dist origin gh-pages效果 部署

前言基于 microapp 的微前端实操 安装microapp 需要基座项目+若干子项目这里以如下三个项目为例子 123vue create basevue create first_childvue create second_child Cd 到基座项目 安装 microapp 1pnpm install @micro-zoe/micro-app --save 在基座中的 main.ts 中引入 1234567891011121314151617181920212223242526import { createApp } from "vue";import App from "./App.vue";import router from "./router";import microApp from "@micro-zoe/micro-app";microApp.start({ // microApp生命周期 lifeCycles: { created(e ...

前言h 函数 hyperscript （生成 script）用于生成对应的标签其实所有的 vue 组件都是经过一次 render 之后转化成 h 函数，然后再去对应的渲染 dom 的。那么使用 h 函数渲染组件有什么优势呢？ sfc 结构vue 是使用了一段叫做 sfc 的结构，类似于一开始学习前端的时候 body script style，现在 vue 是 template script style 1234567891011121314151617181920212223<template> <div class="example">{{ msg }}</div></template><script>export default { data() { return { msg: "Hello world!", }; },};</script>&l ...

前置知识Nginx 项目运行和打包 安装安装一个 windows 的 docker 略 查看 dockerCmddocker version使用 docker 启动一个项目新建项目npm init vue@latest然后一路回车 给他起名字叫docker-demo-vue之后 123cd docker-demo-vuenpm installnpm run dev 就可以看见项目被运行起来了运行起来后给项目打包npm run build 创建 Dockerfile然后在项目根目录创建 Dockerfile注意大小写 一定不能错 而且文件没有后缀里面的内容后面配置镜像的时候会讲到 拉取 nginx 镜像之后拉取 nginx 镜像win+r cmd 打开控制台 输入docker pull nginx此时会有两种情况 如果没有拉取过 nginx 后面会有条 Status 是 Downloaded newer image for nginx:lastest 如果之前接触过拉过 则显示 image is up to date for nginx:lastest 查看镜像docker imag ...

前言白浪费了那么多有用的代码.jpg避免今后用到相同的代码却要在不同的仓库里反复找实现 我决定把公用的代码抽出来 方便以后能用(方便脑子短路的时候找不到合适的代码)成果：https://www.npmjs.com/package/zlinni_common_pkg?activeTab=readme 编写代码首先 GitHub 建一个仓库，我写的是 zlinni_common_pkg 之后添加一个 README，然后导出clone 仓库后，npm init 出现 packgejson(稍后看)新建一个 src 文件夹新建一点代码 zlinniTool.ts 123export const sayHi = (): string => { return "Hello~";}; 包的规则打开我们的 pkgjson这是我写的规则 附加注释 1234567891011121314151617181920212223242526272829{ "name": "zlinni_common_pkg", ...

安装初始化一个项目：yarn inityarn add jest插件 vscode jest 的 snippetJest 用于直接检测(自动 run 脚本) 测试加法函数新建 src 编写一个 math.js 12const sum = (a, b) => a + b;module.exports = { sum }; 在同目录下编写math.jest.js一个测试文件组成 引入的测试 js 模块函数 describea. 包含了 test 函数，和 given when then 123456789101112const { sum } = require("./math");describe("Math module", () => { test("jest math return sum", () => { // given const number = 1; const anotherNumber = 2; // ...