一、使用vite创建TS开发环境

47 阅读1分钟

创建TS开发环境

我们选择最简单最好用的方式:vite。不用做过多的配置开箱即用。

  • 执行命令npm create vite
  • 输入项目名,我们就叫deep-ts。此时会出来几个选项如图: image.png
    我们直接选择第一个Vanilla,这个是原生的项目结构。
  • 接下来就是选择语言,我们选择typescript image.png
  • 进入到项目目录,执行cd deep-ts
  • 安装相关的依赖包,执行npm i
  • 通过vscode打卡项目,执行: code .
  • 最后启动项目,执行: npm run dev
  • 至此一个ts开发环境创建完成了
  • 打开如下链接

image.png

你会看到这么一个界面

image.png

目录梳理

  • 打开src目录,删掉不用的文件

image.png

  • main.ts里的内容全部删掉,css文件和自带演示用的counter.ts删掉。这样就得到了一个干净的目录
  • 我们在main.ts中写一行代码: console.log("Hello, world!");打开浏览器控制台就得到了输出内容