0.0 的博客

因为avue组件实在element ui基础上进行二次封装的,avue-crud渲染根据配置如下，为后端返回过来的 this.$refs.applyTplForm.validate((valid, done, msg) => { done() //验证全部通过msg为undefind if (msg) { console.log(msg); let props = this.$refs.applyTp

传送

泛型，可以理解为更广泛的类型。也就是说我们在函数、接口、类等中，约束数据类型的时候，可以通过泛型的方式来实现类型的传参，让数据的类型也可以根据传递的类型值来控制。一、函数中的泛型1、定义泛型函数基础语法：function 函数名<类型变量>(参数名: 类型变量): 类型变量 { return 返回值；}函数名<类型>(参数)案例代码：function getValue<T>(params: T): T { return params;

一、属性的接口属性接口，专门用来约束对象中的每一个属性。基础语法：interface 接口名 { 属性名: 类型; 属性名: 类型; // ...}案例：interface Info { id: number; name: string; age?: number; sayHello?: () => void}const user: Info = { id: 1, name: 'Lee', age: 2

一、基础语法class Person { constructor() { }}二、类的属性1、属性的初始化在 TS 中，我们如果在要 constructor 中定义一个属性，必须先在 constructor 之前对数据进行初始化：class Person { city: string; // 初始化 constructor() { this.city = '成都' }}属性在初始化的时候可以选择不设置初始值，但是就必须在 con

在某些情况下，我们会比 TS 更清楚一个数据的类型。这种时候，我们就可以使用断言来告诉 TS：相信我，我知道自己在干什么。一、基础语法断言的语法分为两种：<> 尖括号as 语法二、尖括号基础语法：<类型>变量名案例：function add(x: number, y?: number): number { return x + <number>y;}add(1, 2);as 语法基础语法：变量名 as 类型案例：functio

在 TS 中，要使用函数，要求必须约束函数参数和返回值的类型。一、基础语法1、JS 中函数函数声明式：function 函数名(参数) { return 返回值}函数表达式：const 变量名 = function(参数) { return 返回值}2、TS 中的函数函数声明式：function 函数名(参数: 参数类型): 返回值类型 { return 返回值}函数表达式分为以下几种写法：1）只定义函数参数和返回值的类型const 变量名 = f

TS 中也和 JS 一样，将所有的数据类型都分为“基本（原始）数据类型”和“引用数据类型”。一、基本数据类型numberstringbooleannullundefinedvoidsymbolbigint1、TS 中使用基本数据类型基础语法：首先在 TS 中，创建变量时，var、let、const 还是和 JS 中的使用方式一样，但是，在声明变量时需要约束变量的数据类型：var 变量名: 类型 = 值;示例代码：var a: number = 1;let b: strin

在 JS 中，通常代码都需要进行到执行阶段时，才能开始对代码的语法进行验证，验证失败的代码才开始有报错提示。TypeScript，简称 TS，是 JS 的一个超集，TS 中包含 JS 的所有特性，同时又具备自己的新特性。一、环境搭建浏览器是不能运行 TS 代码的，因此，我们需要将写好的 TS 代码转换成 JS 代码。1、全局安装 TS npm i -g typescript安装完成后，可以查看版本：tsc -v2、编写 TS 代码let a: number = 100;conso

umi 中内置了 Dva 插件，不用下载可以直接使用。一、创建配置文件在项目的 src 目录中创建 models 目录作为 dva 的配置文件目录（创建完成后重启一下项目）。然后在 models 中创建 playList.js 文件。二、配置 Dvaimport { getPlayListAsync } from '../api/playList'export default { state: { // 歌单数据 data: [] }, r

Umi 内置了一个 umi-request 插件来实现网络请求。该插件内部是基于 fetch 进行封装的。我们在 umi 项目中，可以选择使用内置的 umi-request，也可以单独下载 axios。一、基本使用import request from 'umi-request';export const getPlayListAsync = () => request.get('http://localhost:3000/personalized');二、传参语法1、get 请求r

一、路由懒加载在 umirc.ts 配置文件中，添加以下配置即可：{ dynamicImport: { loading: '@/components/Loading', },}其中，@/components/Loading 是我们自己创建的 loading 组件的路径。二、路由权限验证首先，在配置路由时，需要配置以下属性：{ // 关注 path: '/friend', component: '@/pages/friend', // 模

一、路由跳转Umi 中路由跳转可以分为两种方式：组件（标签）跳转JS 跳转1、组件（标签）跳转Umi 中也可以通过 和 组件来实现跳转：<Link to="路径"></Link><NavLink to="路径" activeClassName="class名"></NavLink>2、JS 跳转在 Umi 中也可以通过 props.history.push(‘路径’) 和 useHistory().push(‘路径’) 来实现跳转。

要想在 umi 项目中使用约定式路由，直接将 .umirc.ts 文件中的 routes 属性删掉就可以了。 import { defineConfig } from 'umi'; export default defineConfig({ nodeModulesTransform: { type: 'none', }, fastRefresh: {}, });一、创建一级路由文件我们在 pages 中分别创建 home、login 和 regi

umi 中的路由分类两种：配置式路由：开发者需要单独创建一个配置文件，通过各种属性或方法来实现对路由规则的配置；约定式路由：开发者不需要手动配置，只需要按照 umi 的规则来创建路由目录和文件，umi 会自动根据文件目录将路由配置解析出来；当项目中的路由结构比较简单，就可以使用约定式路由。如果是比较复杂的项目，都建议使用配置式路由。一、路由模式umi 项目中的路由模式默认是 history 模式，可以通过 history 属性来切换路由模式：import { defineConfig } f

一、创建项目umi 项目，需要我们自己先创建一个空文件夹来作为项目的根目录。然后，在终端中将路径定位到创建好的项目目录中，再执行以下命令，来创建项目中的其他文件。yarn create @umijs/umi-appnpx @umijs/create-umi-app二、下载依赖包默认创建好的 umi 项目，没有安装依赖包，需要我们自己手动下载所有依赖包：yarnnpm install三、启动项目执行以下命令来启动 umi 项目：yarn start...

在 Dva 项目中，状态机相关的插件都已经内置好了，不需要下载，直接在 models 中创建对应的文件，进行配置即可。一、配置初始数据在 models 目录中创建对应的模块文件，然后在文件进行以下配置：export default { // 命名空间 namespace: 'todoList', state: { todos: [ { _id: 1, value: '学习HTML', done: false }, .

Dva 中的异步处理一、不使用状态机的异步请求Dva 项目中默认使用 fetch 来发送网络请求。项目中的 utils 目录中，封装了一个 request.js 文件，该文件中将 fetch 请求封装成了一个 request() 方法。我们发送请求时只需要引入该文件并调用 request() 方法就可以了。1、封装请求 API在 Dva 的项目中，还自动创建了一个 services 目录，用来存放项目中所有请求 API 的文件。例如我们现在需要发送一个“获取待办事项数据”的请求，就可以在 s

Dva 中已经内置了 React Router，不需要再额外下载，直接配置使用即可。一、全局引入路由Dva 中已经自动生成了路由的引入代码，在 src/index.js 文件中：app.router(require('./router').default);我们也可以将 require(’./router’).default 改成 import from 的语法：import router from './router'app.router(router);二、路由的模式Dva 项

一、全局安装 Dva 脚手架工具官网npm install dva-cli -g安装成功后，可以通过以下命令查看脚手架的版本（确保版本是 0.9.1 或以上）：dva -vdva-cli version 0.10.1二、创建 Dva 项目在终端中定位到需要创建项目的路径，然后执行以下命令创建 Dva 项目：dva new dva-demo通过以下命令启动项目：npm start三、引入 antd1、下载依赖包npm install antd babel-plugin-imp