经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » TypeScript » 查看文章
自学 TypeScript 第五天，手把手项目搭建 TS 篇
来源：cnblogs　　作者：六扇有伊人　　时间：2022/11/23 18:51:01　　对本文有异议

前言：

昨天咱们已经把贪吃蛇的页面写好了，今天咱们来写 TS 部分

TS 我们要用面向对象的形式去编写我们的功能，所以我们要以一个功能去定义一个对象

把这个项目分成几个模块，也就是几个对象功能

Food类（食物类）：

写对象的前提，我们要去定义类，用类去创建对象

首先我们直接 class 一个 Food 类，由于我们的食物是一个 div 所以我们的 Food 类里面必须有一个属性来存放我们的元素

  1. // 食物 Food 类
  2. class Food{
  3.     element:HTMLElement;
  4.     constructor(){
  5.         // 拿到元素 id
  6.         this.element = document.getElementById('food')!;
  7.     }
  8. }

元素有了，现在我们想食物还有哪些功能？

我们的食物被蛇吃掉以后是不是要消失啊，那怎么确定我的蛇吃到食物了呢，看代码

  1.     // 获取食物 x 轴坐标的方法
  2.     get x(){
  3.         return this.element.offsetLeft
  4.     }
  5.     // 获取食物 y 轴坐标的方法
  6.     get y(){
  7.         return this.element.offsetTop
  8.     }

如果我们蛇的坐标和食物的坐标一样了，是不是就证明我们吃到了食物，所以我们在 Food 类里面直接写俩 get 方法 获取 offsetTop/Left 就获取到了 x y 轴坐标

 坐标有了，但我们现在食物的位置是固定的，那能固定吗？我们的蛇吃完食物，食物的位置是不是要改变，所以我们的食物一定是随机一个位置

  1.     // 修改食物位置
  2.     change(){
  3.         // 生成一个随机的位置  食物的位置 最小是 0 最大是 290
  4.         // 蛇移动一次是一格，一格大小是 10 所以要求食物的坐标必须是整 10
  5.         let top = Math.round(Math.random() * 29) * 10        
  6.         let left = Math.round(Math.random() * 29) * 10        
  7.         this.element.style.left = left + 'px'
  8.         this.element.style.top = top + 'px'
  9.     }

因为我们的盒子是 300 我们的食物是 10 所以我们食物的位置最大是290，最小是0

而且我们设计蛇移动一次是一格也就是 10 所以我们食物的坐标必须是10的倍数

这样我们食物的 Food 类就完成了

计分板，ScorePanel 类：

接下来我们再写一个简单的，我们的计分板，我们的计分板有两个值，一个是积分一个是等级

还是同理，首先先获取元素

  1. // 计分板 定义一个 ScorePanel 类
  2. class ScorePanel{
  3.     // 积分
  4.     score = 0
  5.     lecel = 0
  6.     // 元素
  7.     scoreSpan:HTMLElement
  8.     lecelSpan:HTMLElement
  9.     constructor(){
  10.         this.scoreSpan = document.getElementById('score')!;
  11.         this.lecelSpan = document.getElementById('lecel')!;
  12.     }
  13. }

获取完元素之后，我们的分数和等级是不是要进行一个增加

  1.     addScore(){
  2.         // this.score++
  3.         this.scoreSpan.innerHTML = ++this.score + '';
  4.         // 判断我们多少积分升一级
  5.         if(this.score % 10 === 0){
  6.             this.lecelup();
  7.         }
  8.     }
  9.     // 等级提升
  10.     lecelup(){
  11.         // 判断是否到达最大等级
  12.         if(this.lecel < 10){
  13.             this.lecelSpan.innerHTML = ++this.lecel + '';
  14.         }
  15.     }

蛇类，Snake：

 蛇的类是我们这里最主要的一个类也是最难写的一个类，所以我们这里先写一个基础

还是跟前面的一样，我们先获取元素，但是蛇这里我们会麻烦一点，因为蛇是一个容器，我们要给他分为蛇头和蛇身子

  1. // 设置我们的蛇类
  2. class Snake{
  3.     // 蛇的容器
  4.     element:HTMLElement
  5.     // 蛇的头部
  6.     head:HTMLElement
  7.     // 蛇的身体(包括蛇头的) HTMLCollection 是一个集合，特点：它是会实时的刷新的
  8.     bodies:HTMLCollection
  9.     constructor(){
  10.         // 容器元素
  11.         this.element = document.getElementById('snake')!;
  12.         // 获取蛇头的元素也就是我们元素里面的第一个 div
  13.         this.head = document.querySelector('#snake > div')! as HTMLElement;
  14.         // 获取容器里面的所有 div
  15.         this.bodies = this.element.getElementsByTagName('div')
  16.     }
  17. }

获取完蛇元素之后，我们还需要获取到蛇的位置，也就是蛇头部的位置。蛇身子暂不考虑

  1.     // 获取我们的蛇的坐标（蛇头）
  2.     get x(){
  3.        return this.head.offsetLeft
  4.     }
  5.     get y(){
  6.         return this.head.offsetTop
  7.     }
  8.     // 设置我们蛇头的坐标
  9.     set x(value:number){
  10.         this.head.style.left = value + ''
  11.     }
  12.     set y(value:number){
  13.         this.head.style.top = value + ''
  14.     }

这样就获取到了，设置蛇的坐标我们现在先写一个简单的，等会再完善

现在我们先写一个吃完食物蛇的身子增加的方法，其实这个增加就是向元素里添加 div

  1.     // 蛇增加身体的一个方法
  2.     addBody(){
  3.         // 向 element 中添加 div
  4.         this.element.insertAdjacentHTML('beforeend','<div></div>')
  5.     }

这样一个基础的模型就写好了，但却还有问题，我们的坐标还没有完善，而我们蛇还不能动

整合：

到现在谁把三个类都放到一个 TS 里面了 ？

看起来不多吗，修改起来太墨迹了，所以我们要把这三个类差分，放到不同的 TS 文件里，然后每一个文件都作为一个模块暴露出去

首先再 src 下边创建一个 modules 的文件夹，然后创建三个 TS 文件

然后每一个 TS 都作为模块暴露出去，代码为

  1. export default class类名;

都弄完了以后我们还需要一个 TS 文件来把我们这三个 TS 进行一个整合

新建一个 GameControl.ts 它现在就是我们的游戏控制器，控制其他的所有类

GameControl，游戏控制类：

首先先引入其他的类，然后来定义，方便使用，同时 GameControl 这个 TS 也是当一个模块去暴露出去的，给到我们最终的 index.ts

  1. // 引入其他类
  2. import Food from './Food' // 食物类 Food
  3. import ScorePanel from './ScorePanel' // 记分类 ScorePanel 
  4. import Snake from './Snake' // 蛇 Snake
  5. // 游戏控制器，控制其他的所有类
  6. class GameControl{
  7.     // 定义三个属性
  8.     food:Food // 食物
  9.     scorepanel:ScorePanel // 记分类
  10.     snake:Snake // 蛇
  11.     constructor(){
  12.         this.food = new Food();
  13.         this.scorepanel = new ScorePanel();
  14.         this.snake = new Snake();
  15. 　　　   this.init();
  16.     }
  17. }
  18. export default GameControl;

定义完之后，肯定要有一个游戏的开始，或者一个游戏的初始化方法

那第一件事就是让我们的蛇可以动，首先绑定一个键盘事件

  1. // 创建一个属性来存储我们的按键,蛇的移动方向
  2. 　 direction:string = ''
  3.  // 游戏初始化方法，调用之后游戏开始
  4.     init(){
  5.         // 键盘摁下的事件
  6.         document.addEventListener('keydown',this.keydomnHandler.bind(this))
  7.     }
  8.     // ArrowUp
  9.     // ArrowDown
  10.     // ArrowLeft
  11.     // ArrowRight
  12.     // 创建一个键盘按下的响应
  13.     keydomnHandler(event:KeyboardEvent){
  14.         // 用户是否合法，用了正确的摁键
  15.         // 触发按下 修改值
  16.         // console.log(event.key)
  17.         this.direction = event.key
  18.     }

绑定写完了，我们现在来让蛇动起来，也就是改蛇的 left 和 top ，向上 top 减少，向下 top 增加，left 同理

  1.     // 创建一个属性来存储我们的按键,蛇的移动方向
  2.     direction:string = ''
  3.     init(){
  4.         // 键盘摁下的事件
  5.         document.addEventListener('keydown',this.keydomnHandler.bind(this));
  6.         this.run();
  7.     }
  8.     run(){
  9.         /**
  10.          * 根据方向 this.direction 来让我们的蛇改变
  11.          * 向上 top 减少
  12.          * 向下 top 增加
  13.          * 向左 left 减少
  14.          * 向右 left 增加
  15.          */
  16.         let x = this.snake.x
  17.         let y = this.snake.y
  18.         // 计算我们的 x y 值
  19.         switch(this.direction){
  20.             case "ArrowUp": 
  21.             case "Up":
  22.                 y -= 10 
  23.                 break;
  24.             case "ArrowDown": 
  25.             case "Down":
  26.                 y += 10
  27.                 break;
  28.             case "ArrowLeft": 
  29.             case "Left":
  30.                 x -= 10
  31.                 break;
  32.             case "ArrowRight": 
  33.             case "Right":
  34.                 x += 10
  35.                 break;
  36.         };
  37.         // 修改蛇的 x y 值
  38.         this.snake.x = x;
  39.         this.snake.y = y;
  40.         setTimeout(this.run.bind(this), 500 - (this.scorepanel.lecel -1) * 50); 
  41.     }

setTinmeout 重复执行我们的代码，让蛇一直动，500 的数值越大，蛇走的越慢，让它随着我们的等级来走，等级乘 50 就行

接下来我们来写游戏失败的方法，贪吃蛇失败无疑就是撞墙或装自己身体

而我们再写 class 类的时候要注意，谁的事情，尽量让谁去处理，蛇死了，是蛇自己的事情，所以我们在 Snake 也就是蛇类，去处理

我们修改蛇的移动是调用了，Snake 里 set x 和 set y，所以只要给这俩前边加一个限制

  1.     // 设置我们蛇头的坐标
  2.     set X(value:number){
  3.         // 新值和旧值相同，不会去改
  4.         if(this.x === value){
  5.             return;
  6.         }
  7.         // x 值的合法范围 也就是 0 - 290 之间
  8.         if(value < 0 || value > 290){
  9.             // 进入判断说明我的蛇撞墙了
  10.             throw new Error('蛇撞墙了!')
  11.         }
  12.         this.head.style.left =  value + "px" 
  13.     }
  14.     set Y(value:number){
  15.         if(this.y === value){
  16.             return;
  17.         }
  18.         // x 值的合法范围 也就是 0 - 290 之间
  19.         if(value < 0 || value > 290){
  20.             // 进入判断说明我的蛇撞墙了
  21.             throw new Error('蛇撞墙了!')
  22.         }
  23.         this.head.style.top = value + 'px'
  24.     }

接下来就是如何吃到食物了

  1.     checkEat(x:number,y:number){
  2.         if(x === this.food.x && y === this.food.y){
  3.             // 食物改变位置
  4.             this.food.change()
  5.             // 积分版
  6.             this.scorepanel.addScore()
  7.             // 蛇添加一节
  8.             this.snake.addBody()
  9.         }
  10.     }

我们之前就都定义好了，直接拿来用就行了，剩下的就是我们的身体如何跟头去移动，还有撞自己身体游戏结束的方法就完成了我们的贪吃蛇

  1.     moveBody(){
  2.         /**
  3.          * 将我们后边身体设置为前边身体的位置，从后往前设置
  4.          * 因为你要先设置前边的，后边的就找不到原来的值了
  5.          */
  6.         // 遍历所有的身体
  7.         for(let i=this.bodies.length-1;i>0;i--){
  8.             // 获取前边身体的位置
  9.             let x = (this.bodies[i-1] as HTMLElement).offsetLeft;
  10.             let y = (this.bodies[i-1] as HTMLElement).offsetTop;
  12.             (this.bodies[i] as HTMLElement).style.left = x + 'px';
  13.             (this.bodies[i] as HTMLElement).style.top = y + 'px';
  14.         }
  15.     }

this.bodies 就是蛇的身体长度，那我们蛇怎么前进呢，就是后边 div 的位置等于前边 div 的位置

这样我们的蛇身子就动起来了，接下来我们写蛇头撞身子游戏结束

  1.     checkHeadBody(){
  2.         // 获取所有的身体，检查是否和我们的蛇头的坐标发生重叠
  3.         for(let i=1;i<this.bodies.length;i++){
  4.             let bd = this.bodies[i] as HTMLElement
  5.             if(this.x === bd.offsetLeft && this.y === bd.offsetTop){
  6.                 // 进入判断说明撞了,游戏结束
  7.                 throw new Error("撞自己了")
  8.             }
  9.         }
  10.     }

之后我们把这个方法写到 set x、y里面最后一段的位置调用

接下来我们固定一下左右，在 set 里面写

  1.         // 修改 x 时候 是在修改水平坐标，蛇向左移动时候不能向右 反之同理
  2.         if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetTop === value){
  3.             console.log("水平掉头了")
  4.             if(value > this.y){
  5.                 // 新值 大于 x 旧值 掉头 应该继续走
  6.                 value = this.y - 10
  7.             }else{
  8.                 value = this.y + 10 
  9.             }
  10.         }

y 轴是同理的

这样下来我们整个一个贪吃蛇就完成了

 以下贴出所有代码

Food.ts

  1. // 食物 Food 类
  2. class Food{
  3.     element:HTMLElement;
  4.     constructor(){
  5.         // 拿到元素 id 直接赋值
  6.         this.element = document.getElementById('food')!;
  7.     }
  8.     // 获取食物 x 轴坐标的方法
  9.     get x(){
  10.         return this.element.offsetLeft
  11.     }
  12.     // 获取食物 y 轴坐标的方法
  13.     get y(){
  14.         return this.element.offsetTop
  15.     }
  16.     // 修改食物位置
  17.     change(){
  18.         // 生成一个随机的位置  食物的位置 最小是 0 最大是 290
  19.         // 蛇移动一次是一格，一格大小是 10 所以要求食物的坐标必须是整 10
  20.         let top = Math.round(Math.random() * 29) * 10        
  21.         let left = Math.round(Math.random() * 29) * 10        
  22.         this.element.style.left = left + 'px'
  23.         this.element.style.top = top + 'px'
  24.     }
  25. }
  26. export default Food;

ScorePanel.ts

  1. // 计分板 定义一个 ScorePanel 类
  2. class ScorePanel{
  3.     // 用来记录我们的分数和等级
  4.     score = 0
  5.     lecel = 1
  6.     // 记住我们分数和等级 元素，再构造函数中初始化
  7.     scoreSpan:HTMLElement
  8.     lecelSpan:HTMLElement
  9.     // 设置我们的等级最大值
  10.     maxLevel:number
  11.     // 设置多少积分升一级
  12.     upScore:number
  13.     constructor(maxLevel:number = 10,upScore:number = 10){
  14.         this.scoreSpan = document.getElementById('score')!;
  15.         this.lecelSpan = document.getElementById('lecel')!;
  16.         this.maxLevel = maxLevel;
  17.         this.upScore = upScore;
  18.     }
  19.     // 设置一个加分的方法
  20.     addScore(){
  21.         this.score++
  22.         this.scoreSpan.innerHTML = this.score + '';
  23.         // 判断我们多少积分升一级
  24.         if(this.score % this.upScore === 0){
  25.             this.lecelup();
  26.         }
  27.     }
  28.     // 等级提升
  29.     lecelup(){
  30.         // 判断是否到达最大等级
  31.         if(this.lecel < this.maxLevel){
  32.             this.lecel++
  33.             this.lecelSpan.innerHTML = this.lecel + '';
  34.         }
  35.     }
  36. }
  37. export default ScorePanel;

 

Snake.ts

  1. // 设置我们的蛇类
  2. class Snake{
  3.     // 蛇的容器
  4.     element:HTMLElement
  5.     // 蛇的头部
  6.     head:HTMLElement
  7.     // 蛇的身体(包括蛇头的) HTMLCollection 是一个集合，特点：它是会实时的刷新的
  8.     bodies:HTMLCollection
  9.     constructor(){
  10.         // 容器元素
  11.         this.element = document.getElementById('snake')!;
  12.         // 获取蛇头的元素也就是我们元素里面的第一个 div
  13.         this.head = document.querySelector('#snake > div')! as HTMLElement;
  14.         // 获取容器里面的所有 div
  15.         this.bodies = this.element.getElementsByTagName('div')!;
  16.     }
  17.     // 获取我们的蛇的坐标（蛇头）
  18.     get x(){
  19.        return this.head.offsetLeft
  20.     }
  21.     get y(){
  22.         return this.head.offsetTop
  23.     }
  24.     // 设置我们蛇头的坐标
  25.     set X(value:number){
  26.         // 新值和旧值相同，不会去改
  27.         if(this.x === value){
  28.             return;
  29.         }
  30.         // x 值的合法范围 也就是 0 - 290 之间
  31.         if(value < 0 || value > 290){
  32.             // 进入判断说明我的蛇撞墙了
  33.             throw new Error('蛇撞墙了!')
  34.         }
  35.         // 修改 x 时候 是在修改水平坐标，蛇向左移动时候不能向右 反之同理
  36.         if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetLeft === value){
  37.             console.log("水平掉头了")
  38.             if(value > this.x){
  39.                 // 新值 大于 x 旧值 掉头 应该继续走
  40.                 value = this.x - 10
  41.             }else{
  42.                 value = this.x + 10 
  43.             }
  44.         }
  45.         this.moveBody();
  46.         this.head.style.left =  value + "px" ;
  47.         this.checkHeadBody()
  48.     }
  49.     set Y(value:number){
  50.         if(this.y === value){
  51.             return;
  52.         }
  53.         // x 值的合法范围 也就是 0 - 290 之间
  54.         if(value < 0 || value > 290){
  55.             // 进入判断说明我的蛇撞墙了
  56.             throw new Error('蛇撞墙了!')
  57.         }
  58.         // 修改 x 时候 是在修改水平坐标，蛇向左移动时候不能向右 反之同理
  59.         if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetTop === value){
  60.             console.log("水平掉头了")
  61.             if(value > this.y){
  62.                 // 新值 大于 x 旧值 掉头 应该继续走
  63.                 value = this.y - 10
  64.             }else{
  65.                 value = this.y + 10 
  66.             }
  67.         }
  68.         this.moveBody();
  69.         this.head.style.top = value + 'px';
  70.         this.checkHeadBody()
  71.     }
  72.     // 蛇增加身体的一个方法
  73.     addBody(){
  74.         // 向 element 中添加 div
  75.         this.element.insertAdjacentHTML('beforeend','<div></div>')
  76.     }
  77.     // 添加一个蛇身体移动的方法
  78.     moveBody(){
  79.         /**
  80.          * 将我们后边身体设置为前边身体的位置，从后往前设置
  81.          * 因为你要先设置前边的，后边的就找不到原来的值了
  82.          */
  83.         // 遍历所有的身体
  84.         for(let i=this.bodies.length-1;i>0;i--){
  85.             // 获取前边身体的位置
  86.             let x = (this.bodies[i-1] as HTMLElement).offsetLeft;
  87.             let y = (this.bodies[i-1] as HTMLElement).offsetTop;
  89.             (this.bodies[i] as HTMLElement).style.left = x + 'px';
  90.             (this.bodies[i] as HTMLElement).style.top = y + 'px';
  91.         }
  92.     }
  93.     checkHeadBody(){
  94.         // 获取所有的身体，检查是否和我们的蛇头的坐标发生重叠
  95.         for(let i=1;i<this.bodies.length;i++){
  96.             let bd = this.bodies[i] as HTMLElement
  97.             if(this.x === bd.offsetLeft && this.y === bd.offsetTop){
  98.                 // 进入判断说明撞了,游戏结束
  99.                 throw new Error("撞自己了")
  100.             }
  101.         }
  102.     }
  103. }
  104. export default Snake;

GameControl.ts

  1. // 引入其他类
  2. import Food from './Food' // 食物类 Food
  3. import ScorePanel from './ScorePanel' // 记分类 ScorePanel 
  4. import Snake from './Snake' // 蛇 Snake
  5. // 游戏控制器，控制其他的所有类
  6. class GameControl{
  7.     // 定义三个属性
  8.     food:Food // 食物
  9.     scorepanel:ScorePanel // 记分类
  10.     snake:Snake // 蛇
  11.     // 创建一个属性来存储我们的按键,蛇的移动方向
  12.     direction:string = ''
  13.     // 创建一个属性来记录我们游戏是否结束
  14.     isLive = true
  15.     constructor(){
  16.         this.food = new Food();
  17.         this.scorepanel = new ScorePanel();
  18.         this.snake = new Snake();
  19.         this.init();
  20.     }
  21.     // 游戏初始化方法，调用之后游戏开始
  22.     init(){
  23.         // 键盘摁下的事件
  24.         console.log("执行")
  25.         document.addEventListener('keydown',this.keydomnHandler.bind(this));
  26.         this.run();
  27.     }
  28.     // ArrowUp
  29.     // ArrowDown
  30.     // ArrowLeft
  31.     // ArrowRight
  32.     // 创建一个键盘按下的响应
  33.     keydomnHandler(event:KeyboardEvent){
  34.         // 用户是否合法，用了正确的摁键
  35.         // 触发按下 修改值
  36.         console.log(event.key,1111)
  37.         this.direction = event.key
  38.     }
  39.     // 创建蛇移动的方法
  40.     run(){
  41.         /**
  42.          * 根据方向 this.direction 来让我们的蛇改变
  43.          * 向上 top 减少
  44.          * 向下 top 增加
  45.          * 向左 left 减少
  46.          * 向右 left 增加
  47.          */
  48.         let x = this.snake.x
  49.         let y = this.snake.y
  50.         // 计算我们的 x y 值
  51.         switch(this.direction){
  52.             case "ArrowUp": 
  53.             case "Up":
  54.                 y -= 10 
  55.                 break;
  56.             case "ArrowDown": 
  57.             case "Down":
  58.                 y += 10
  59.                 break;
  60.             case "ArrowLeft": 
  61.             case "Left":
  62.                 x -= 10
  63.                 break;
  64.             case "ArrowRight": 
  65.             case "Right":
  66.                 x += 10
  67.                 break;
  68.         };
  69.         // 检查是否吃到了
  70.         this.checkEat(x,y)
  71.         // 修改蛇的 x y 值
  72.         try{
  73.             this.snake.X = x;
  74.             this.snake.Y = y;
  75.         }catch{
  76.             // 捕获异常，游戏结束
  77.             alert('GAME OVER!')
  78.             this.isLive = false
  79.         }
  80.         // isLive 开关 ture 的话重复执行
  81.         this.isLive && setTimeout(this.run.bind(this), 500 - (this.scorepanel.lecel -1) * 50); 
  82.     }
  83.     // 定义一个方法，用来检查是否吃到食物
  84.     checkEat(x:number,y:number){
  85.         if(x === this.food.x && y === this.food.y){
  86.             // 食物改变位置
  87.             this.food.change()
  88.             // 积分版
  89.             this.scorepanel.addScore()
  90.             // 蛇添加一节
  91.             this.snake.addBody()
  92.         }
  93.     }
  94. }
  95. export default GameControl;

index.ts

  1. import "./style/index.less"
  3. import GameControl from './modules/GameControl'
  4.  
  5. new GameControl();

这里是六扇有伊人，我们有缘再见

 

原文链接：https://www.cnblogs.com/LiuSan/p/16915033.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

TypeScript热门文章

  • TypeScript利用TS封装Axios实战
  • 在Vue3+TypeScript 前端项目中使用事件总线Mitt
  • 在基于vue-next-admin的Vue3+TypeScript前端项目中，为了使用方便全局挂载对象接口
  • TS 基础及在 Vue 中的实践：TypeScript 都发布 5.0 版本啦，现在不学更待何时！
  • websocket4.0+typescript 实现热更新的方法
  • Vue3+TypeScript 项目中，配置 ESLint 和 Prettier
  • TypeScript类型声明书写详解
  • vue + typescript + video.js实现 流媒体播放 视频监控功能
  • 你可能不知道的typescript实用小技巧
  • typescript基本数据类型

    • TypeScript推荐文章

  • Figma数值输入框支持拖拽调整功能实现
  • 前端 Typescript 入门
  • 从零搭建Vue3 + Typescript + Pinia + Vite + Tailwind CSS + Element Plus开发脚手架
  • 使用命令行方式搭建uni-app + Vue3 + Typescript + Pinia + Vite + Tailwind CSS + uv-ui开发脚手架
  • Vite4+Typescript+Vue3+Pinia 从零搭建(7) - request封装
  • [学习笔记]TypeScript查缺补漏（一）：类
  • TS 基础及在 Vue 中的实践：TypeScript 都发布 5.0 版本啦，现在不学更待何时！
  • 在Vue3+TypeScript 前端项目中使用事件总线Mitt
  • Vue3+TypeScript 项目中，配置 ESLint 和 Prettier
  • 项目中使用TypeScript的TodoList实例详解

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号