Tech Blog

2024-08-13

在上一部分中，我们已经设置好了环境，并且成功地运行了Vue的构建系统。在这一部分，我们将通过一个简单的例子来看看Vue的源码是如何工作的。

首先，我们需要创建一个新的Vue实例，并且可以通过mount方法将其挂载到DOM中。




// main.js
import Vue from './vue'
 
const app = new Vue({
  data: {
    message: 'Hello Vue!'
  }
})
 
app.$mount('#app')

在这个例子中，我们导入了自定义的Vue模块，并创建了一个新的Vue实例，其中包含一个数据属性message。然后，我们调用$mount方法，并传入一个DOM选择器#app，告诉Vue应该挂载到页面上哪个元素内部。

接下来，我们需要一个HTML文件来挂载我们的Vue实例：




<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Example</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
 
  <script src="main.js"></script>
</body>
</html>

在浏览器中打开index.html，你应该能看到页面上显示了"Hello Vue!"。

通过这个简单的例子，我们可以看到Vue实例是如何被创建和挂载到DOM上的。在下一部分，我们将更深入地探讨这个过程中发生了什么，包括Vue的响应式系统和虚拟DOM的创建过程。

- 阅读更多 -

vite+ts+vue3 知识点（自定义指令，自定义插件）

System

2024-08-13

所有,typescript

在Vite + TypeScript + Vue 3项目中，可以通过以下方式实现自定义指令和插件：

自定义指令

创建一个自定义指令的文件，例如src/directives/focus.ts:




import { App, DirectiveBinding } from 'vue';
 
export const focus = {
  // 当被绑定的元素插入到 DOM 中时调用
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    if (binding.value) {
      el.focus();
    }
  },
  // 当绑定的值更新时调用
  updated(el: HTMLElement, binding: DirectiveBinding) {
    if (binding.value) {
      el.focus();
    }
  }
};
 
export default {
  install(app: App) {
    app.directive('focus', focus);
  }
};

然后在main.ts中使用这个指令：




import { createApp } from 'vue';
import App from './App.vue';
import directives from './directives/focus'; // 导入自定义指令
 
const app = createApp(App);
 
app.use(directives); // 使用自定义指令插件
 
app.mount('#app');

在Vue组件中使用这个指令：




<template>
  <input v-focus="true" type="text">
</template>

自定义插件

创建一个自定义插件的文件，例如src/plugins/myPlugin.ts:




import { App } from 'vue';
 
export default {
  install(app: App) {
    // 添加全局方法或属性
    app.config.globalProperties.$myGlobalMethod = () => {
      console.log('This is a global method!');
    };
  }
};

在main.ts中使用这个插件：




import { createApp } from 'vue';
import App from './App.vue';
import myPlugin from './plugins/myPlugin';
 
const app = createApp(App);
 
app.use(myPlugin);
 
app.mount('#app');

在Vue组件中使用插件提供的方法：




<template>
  <button @click="$myGlobalMethod">Call Global Method</button>
</template>

以上代码展示了如何在Vite + TypeScript + Vue 3项目中创建和使用自定义指令和插件。

- 阅读更多 -

TypeScript的类型声明

System

2024-08-13

所有,typescript

在TypeScript中，类型声明可以让你指定变量的类型，以及函数参数和返回值的类型。这有助于编译器在编译时进行类型检查，从而帮助你发现潜在的错误。

以下是几种常见的TypeScript类型声明方式：

基本类型声明：




let isDone: boolean = false;
let count: number = 10;
let name: string = "Alice";

数组类型声明：




let items: number[] = [1, 2, 3];
let items: Array<number> = [1, 2, 3];

元组类型声明（当你想要一个数组中的每个元素有不同的类型时）：




let tuple: [number, string];
tuple = [1, "hello"];

枚举类型声明（当你想为一个数值集合定义一个更友好的名字时）：




enum Color {
  Red = 1,
  Green = 2,
  Blue = 4
}
 
let color: Color = Color.Green;

任意类型（当你不清楚一个类型时）：




let notSure: any = 10;
notSure = "maybe a string instead";
notSure = false; // 任意类型可以是任何类型

空类型（当你想设置一个变量可以是任何类型，但你不想设置一个具体的类型）：




let nothing: void = null; // 不建议这样使用，void通常用于函数返回值

接口类型声明（当你想要定义一种复杂类型的外观）：




interface Person {
  name: string;
  age: number;
}
 
let person: Person = {
  name: "Alice",
  age: 25
};

类类型声明：




class MyClass {
  property: string;
  constructor(value: string) {
    this.property = value;
  }
}
 
let myClass: MyClass = new MyClass("Hello");

类型断言（当你确定一个变量的类型，但TypeScript无法推断出时）：




let someValue: any = "this is a string";
let stringLength: number = (<string>someValue).length;
let stringLength: number = (someValue as string).length;

函数类型声明：




let add: (x: number, y: number) => number = function(x, y) {
  return x + y;
};

这些是TypeScript中类型声明的基础。根据你的应用需求，你可以选择合适的类型来声明变量和函数。

- 阅读更多 -

Vue2源码里的flow与TypeScript之间的对比

System

2024-08-13

所有,typescript

Flow和TypeScript都是静态类型检查器，但它们有一些不同。

出现时间：Flow是Facebook在2014年开发的，而TypeScript是Microsoft在2012年开发的。
运行方式：Flow在编码时不需要任何运行时开销，类型检查是在代码编译时进行的。而TypeScript在编码时不会有额外的运行时开销，但需要通过编译器将代码转换成JavaScript。
类型检查：Flow主要提供了类型注解，而TypeScript提供了完整的类型系统，包括泛型、接口等高级特性。
第三方库支持：Flow通常需要库的定义文件（.js.flow）来提供类型支持，而TypeScript可以直接提供类型声明文件。
配置和工具：Flow通常需要Eslint、Flow等工具配合，而TypeScript可以直接使用tslint等工具。
类型推断：Flow有基本的类型推断，而TypeScript有更高级的类型推断能力。
社区和支持：Flow社区较小，而TypeScript社区较大，并且有更多的第三方库和工具支持。
学习曲线：Flow的学习曲线较低，容易上手，而TypeScript的学习曲线较陡峭，但提供了更多的类型系统特性。

Vue2中使用Flow的情况较多，因为它提供了快速的类型检查，同时对代码的侵入性小。而随着TypeScript的发展和更多支持，在新项目中可能会更多地使用TypeScript。

- 阅读更多 -

react-10 函数式写法rsc，配合HOOKS钩子函数

System

2024-08-13

所有,typescript

React 10函数式写法和HOOKS的结合使用，可以使代码更为简洁和功能化。以下是一个简单的React函数式组件的例子，它使用了useState钩子来管理组件的状态，并用useEffect钩子处理副作用。




import React, { useState, useEffect } from 'react';
 
function MyComponent() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    // 假设这里是一个副作用，比如设置文档的标题
    document.title = `You clicked ${count} times`;
  });
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}
 
export default MyComponent;

这个组件是一个计数器，当用户点击按钮时，计数器会增加，同时我们用useEffect更新了文档的标题。这个例子展示了如何使用函数式组件和React的hooks API来管理状态和进行有状态的操作。

System

2024-08-13

所有,typescript

报错信息不完整，但如果你在使用 Vue 和 TypeScript 时遇到了与 node_modules 相关的 vue-tsc 错误，可能是以下原因：

类型定义不匹配：可能是某个库的类型定义与其实际导出的值不匹配。
缺少类型定义：项目中可能使用了一个没有自带类型定义文件的库。
类型检查失败：代码中可能存在不符合 TypeScript 规则的类型标注。

解决方法：

更新类型定义：确保所有库的类型定义是最新的。
安装类型定义：如果库没有内置类型定义，可以通过 @types/库名 来安装。
修改 TypeScript 配置：在 tsconfig.json 中，可以调整类型检查的严格程度，比如将 strict 设置为 false 来暂时忽略某些类型错误。
修正代码：根据错误信息修正代码中的类型不匹配问题。

如果能提供具体的错误信息，可以提供更精确的解决方案。

- 阅读更多 -

react项目typescript版本过低导致build报错的问题

System

2024-08-13

所有,typescript

报错问题：React项目在使用TypeScript时，如果TypeScript版本过低可能会导致在构建项目时出现错误。

报错解释：

TypeScript版本不兼容：项目可能使用了某些特性，这些特性可能在旧版本的TypeScript中不支持。
缺少类型定义文件：项目可能依赖了某些第三方库的类型定义文件，而这些定义文件可能需要更高版本的TypeScript。

解决方法：

更新TypeScript版本：检查package.json中的devDependencies部分，找到TypeScript相关的条目，并将其更新到支持项目所需特性的最新版本。
安装或更新类型定义文件：如果缺少特定于TypeScript版本的类型定义文件，可以通过npm或yarn安装或更新这些文件。
修改tsconfig.json：确保tsconfig.json文件中的compilerOptions与项目兼容，特别是target和lib选项。
清理缓存和重新安装依赖：有时候，旧的依赖或缓存文件可能导致问题，可以尝试运行npm cache clean --force或yarn cache clean来清理缓存，然后删除node_modules文件夹和package-lock.json或yarn.lock文件，之后重新运行npm install或yarn install来安装依赖。

在更新TypeScript版本时，确保项目中的所有依赖项也都兼容新版本的TypeScript。如果问题依然存在，可能需要查看具体的错误信息，以便进一步诊断问题。

System

2024-08-13

所有,typescript




import React from 'react';
import { Select } from 'antd';
import { Dictionary } from '@/types/global';
 
interface DXSelectProps<T> {
  dataSource: Dictionary<T>;
  value?: T;
  onChange?: (value: T) => void;
}
 
function DXSelect<T>({ dataSource, value, onChange }: DXSelectProps<T>) {
  const options = Object.entries(dataSource).map(([key, item]) => (
    <Select.Option key={key} value={item}>
      {key}
    </Select.Option>
  ));
 
  return (
    <Select value={value} onChange={onChange} placeholder="请选择">
      {options}
    </Select>
  );
}
 
export default DXSelect;

这段代码定义了一个泛型组件DXSelect，它接受一个泛型T作为选项值的类型，并且使用了Ant Design的Select组件来渲染一个下拉选择框。该组件可以接受一个字典对象作为数据源，并允许用户选择其中的条目。当选项变化时，它会调用提供的onChange回调函数。这个组件可以用于任何需要从固定数据集中进行选择的场景。

- 阅读更多 -

前端基础篇-深入了解 HTML 表格标签、表单标签和表单项标签

System

2024-08-13

所有,html

HTML表格标签：




<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>32</td>
  </tr>
</table>

HTML表单标签：




<form action="/submit" method="post">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="提交">
</form>

HTML表单项标签：




<input type="text" name="fullname" />
<input type="password" name="password" />
<input type="radio" name="gender" value="male" /> 男
<input type="radio" name="gender" value="female" /> 女
<input type="checkbox" name="interest" value="reading" /> 阅读
<input type="checkbox" name="interest" value="gaming" /> 游戏
<select name="country">
  <option value="china">中国</option>
  <option value="usa">美国</option>
  <option value="japan">日本</option>
</select>
<textarea name="comments" rows="5" cols="40"></textarea>

以上代码展示了如何使用HTML创建表格、表单以及表单中常用的输入项，如文本框、密码框、单选按钮、复选框、选择列表和文本区域。这些标签是Web开发中构建交互式表单页面的基础。

- 阅读更多 -

Vite-Vue3-TypeScript：009-屏幕适配

System

2024-08-13

所有,typescript

屏幕适配是前端开发中一个常见的问题。在Vue3项目中，可以使用一些CSS工具和库来帮助我们更好地进行屏幕适配。以下是一个简单的例子，展示如何使用CSS的媒体查询来进行基本的屏幕适配。

首先，在项目中安装并设置postcss-pxtorem库，这是一个可以将CSS中的px单位转换为rem单位的工具，有利于实现响应式布局。




npm install postcss-pxtorem --save-dev

在vite.config.ts中配置postcss-pxtorem:




import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入postcss-pxtorem
import pxtorem from 'postcss-pxtorem'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        pxtorem({
          rootValue: 37.5, // 设计稿宽度/10，通常设置为37.5（对应100px设计稿）
          propList: ['*'], // 需要转换的属性，这里选择转换所有属性
        }),
      ],
    },
  },
})

在main.ts中引入Element Plus和Normalize.css:




import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'normalize.css/normalize.css' // 用于清除默认样式
 
const app = createApp(App)
 
app.use(ElementPlus)
 
app.mount('#app')

在组件中使用样式，例如：




<template>
  <div class="container">
    <el-button type="primary">按钮</el-button>
  </div>
</template>
 
<script setup lang="ts">
// 这里是组件的逻辑
</script>
 
<style scoped>
.container {
  width: 6.4rem; /* 相当于250px */
  margin: 0 auto;
}
</style>

以上代码展示了如何在Vite + Vue3 + TypeScript项目中使用postcss-pxtorem进行屏幕适配。通过设置rootValue为设计稿宽度的1/10，我们可以很方便地将CSS单位转换为rem，实现响应式布局。

- 阅读更多 -