Vim + VScode / WebStorm

使用 vim 快捷键的好处：

1. 提高效率。
2. 统一 WebStorm（JetBrains 系列软件） 和 VScode 的快捷键操作。

Uniapp 开发记录

使用 Vue3 的 setup 语法糖

配置跨域代理

canvas

创建高清的 canvas

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

const createHDCanvas = (w, h) = >{
    const canvas = document.createElement("canvas");
    const ratio = window.devicePixelRatio || 1;
    canvas.width = w * ratio; // 实际渲染像素
    canvas.height = h * ratio; // 实际渲染像素
    canvas.style.width = `${w}px`; // 控制显示大小
    canvas.style.height = `${h}px`; // 控制显示大小
    const ctx = canvas.getContext("2d");
    ctx.scale(ratio, ratio);
    // canvas 绘制
    return canvas;
};

常用代码

test

初始化 vue-router

新建 history 对象

新建 router 对象

app.use(router)

1
2
3
4
5
6
7
8
9

const history = createWebHashHistory();
const router = createRouter({
  history: history,
  routes: [{ path: "/", component: HelloWorld }],
});

const app = createApp(App);
app.use(router);
app.mount("#app");

CSS normalize

adding CSS Reset

在 index.css 中添加 @import-normalize; 即可。

作用是保证页面在不同浏览器上默认样式相近。

Vue 组件的三种方式（单文件组件）

1. 用 JS 对象

   1	export default { data, props, methods, created, ...}

2. 用 TS 类 <script lang="ts">

   1 2 3 4 5

   @Component export default class XXX extends Vue{ xxx: string = 'hello'; @Prop(Number) xxx: number | undefined; }

3. 用 JS 类 <script lang="js">

   1 2 3 4

   @Component export default class XXX extends Vue{ xxx = 'hi' }

常见技巧

输入网址后浏览器的做了什么：

1.DNS域名解析；
2.建立TCP连接；
3.发送HTTP请求；
4.服务器处理请求；
5.返回响应结果；
6.关闭TCP连接；
7.浏览器解析HTML；
8.浏览器布局渲染；