跳至主要內容
关于async/await的异常捕获

一，为什么要捕获异常

//确认提交
const submitWorkloadSure = async () => {
  
    let data = await WorkloadSures()
     console.log(555)
};
qianxun大约 3 分钟vue知识点必会
typeScript中使用axios

项目一

根据名称获取动漫列表

1,定义api.type.ts （定义后台接口返回的类型）


interface ApiFormat<T> {
  /** 状态码 */
  code: number
  /** 状态文字 */
  message: string
  /** 数据 */
  data: T
}

export type Search = ApiFormat<{
  /** 当前返回页数 */
  pageindex: number
  /** 总页数 */
  pagetotal: number
  /** 动漫列表 */
  results: {
    /** 分类列表 */
    category: string
    /** 封面 */
    cover: string
    /** 首发时间 */
    date: string
    /** 介绍 */
    description: string
    /** 动漫id */
    id: string
    /** 动漫状态（更新、完结...） */
    season: string
    /** 动漫名称 */
    title: string
  }[]
}>
qianxun大约 1 分钟vue知识点必会vue中的 TypeScript
前端模块化

一，什么是前端模块化

模块化就是将一个复杂的应用程序，按照规范拆分成几个相互独立的文件，这些文件里面完成共同的或者类似的逻辑，通过对外暴露一些数据或者调用方法，与外部整合。

这样每个文件彼此独立，我们开发者更容易开发和维护代码，特别是当开发的项目越来越大，代码复杂性也不断增加，这对于模块化的需求也会越来越大。

模块化主要特点是：可复用性、可组合性、独立性、中心化。

所以使用模块化可以帮我们解决什么问题呢？

  • 解决了命名冲突：因为每个模块是独立的，所以变量或函数名重名不会发生冲突
  • 提高可维护性：因为每个文件的职责单一，有利于代码维护
  • 性能优化：异步加载模块对页面性能会非常好
  • 模块的版本管理：通过别名等配置，配合构建工具，可以实现模块的版本管理
  • 跨环境共享模块：通过 Sea.js 的NodeJS版本，可以实现模块的跨服务器和浏览器共享
qianxun大约 9 分钟vue知识点必会
typeScript项目实战

一，利用typeScript实现新增，删除一行数据

这里基本涵盖了typeScript在项目中的实战用法

1,html部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="./style.css" />
	<title>蛋老喵</title>
</head>
<body>
	<button class="remind">随机1只喵</button>
	<table>
		<thead>
			<tr>
				<th>图片id</th>
				<th>图片预览</th>
				<th>图片高度</th>
				<th>图片宽度</th>
				<th>图片地址</th>
				<th>删除图片</th>
			</tr>
		</thead>
		<tbody id="table-body">
			<tr>
				<td>idxxx</td>
				<td><img src="./example.jpeg" /></td>
				<td>高度xx</td>
				<td>宽度xx</td>
				<td>地址xx</td>
				<td><a href="#">X</a></td>
			</tr>
		</tbody>
	</table>
	<script src="./script.js"></script>
</body>
</html>
qianxun大约 1 分钟vue知识点必会vue中的 TypeScript
搞懂npm与cnpm

一，什么是npm

npm是node官方的包管理工具 cnpm 是淘宝NPM镜像官网，来自淘宝NPM镜像官网的说明：

淘宝为我们搭建了一个国内的npm服务器，它目前是每隔10分钟将国外npm仓库的所有内容“搬运”回国内的服务器上，这样我们直接访问淘宝的国内服务器就可以了，它的地址是：https://registry.npm.taobao.org

qianxun大约 2 分钟vue知识点必会
npm与yarn的区别

一，yarn简介

yarn 是由 Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具，yarn 是为了弥补 npm 的一些缺陷而出现的。

二，npm的缺陷

  • npm install 下载速度慢，重新 install 时速度依旧慢

  • 同一个项目，安装的无法保持一致性。原因是因为 package.json 文件中版本号的特点导致的，下面三个版本号在安装的时候代表不同的含义。

    "5.0.3"     # 表示安装指定的5.0.3版本
"~5.0.3"    # 表示安装5.0.X中最新的版本
"^5.0.3"    # 表示安装5.X.X中最新的版本

  • 使用 npm 安装多个 js 包时，包会在同一时间下载和安装。安装过程中，其中一个包抛出了一个异常，但 npm 会继续安装其他包，所以错误信息就会在一大堆提示信息中丢失掉，以至于直到执行前，都不会发现实际发生的错误。

qianxun大约 1 分钟vue知识点必会
vue-router4.0的基本使用

一，安装

npm install vue-router@4

二，基本用法

2.1 在项目中新建router/index.js

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import About from '@/components/About.vue'
import Home from '@/components/Home.vue'
import User from '@/components/User.vue'
import NotFound from '@/components/NotFound.vue'


//定义一些路由
//每个路由都需要映射到一份组件

const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/users/:id', component: User}
]

//创建路由实例并传递routes配置
 const router = createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: createWebHashHistory(),
    routes, // `routes: routes` 的缩写
  })

  export default router
qianxun大约 1 分钟vue知识点必会
vue-router源码浅析

一， 路由的本质

简单来说，浏览器端路由其实并不是真实的网页跳转（和服务器没有任何交互），而是纯粹在浏览器端发生的一系列行为，本质上来说前端路由就是：

对 url 进行改变和监听，来让某个 dom 节点显示对应的视图

二， 路由的区别

一般来说，浏览器端的路由分为两种：

1. hash 路由，特征是` url` 后面会有 # 号，如` baidu.com/#foo/bar/baz`。
2. history路由，`url` 和普通路径没有差异。如 `baidu.com/foo/bar/baz`。
qianxun大约 14 分钟vue知识点必会
typeScript在vue项目中常见用法

一，模板中的 TypeScript

在使用了 <script lang="ts"> 或 <script setup lang="ts"> 后，<template> 在绑定表达式中也支持 TypeScript。

<script setup lang="ts">
let x: string | number = 1
</script>

<template>
  <!-- 出错，因为 x 可能是字符串 -->
  {{ x.toFixed(2) }}
</template>
qianxun大约 2 分钟vue知识点必会vue中的 TypeScript
除了自渡，其他人爱莫能助
Copyright © 2024 ChenSino