Vue 应用运行的ts文件

崎山小鹿

看这段代码：
<body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>

main.ts 是 Vue 应用的启动入口，Vite 负责处理它，再由浏览器执行转换后的 JavaScript。.ts 并不代表它是一种完全不同的运行环境，而是在 JavaScript 的基础上增加了类型检查等开发能力。

这段代码主要做了两件事。

1. 创建 Vue 应用的挂载位置
<div id="app"></div>


这是一个空的 HTML 容器。

Vue 启动之后，会把需要显示的页面内容渲染到这个容器中。例如，原本的 HTML 是空的：
<div id="app"></div>


Vue 渲染之后，浏览器中可能相当于显示：
<div id="app">
  <h1>脑波云平台</h1>
  <button>登录</button>
</div>


上面只是示意，实际显示什么取决于 Vue 组件的内容。

2. 加载前端入口文件
<script type="module" src="/src/main.ts"></script>


这行代码告诉浏览器和 Vite：加载 /src/main.ts 这个模块文件。

其中：
- type="module"：按照 ES 模块的方式加载代码，支持 import 和 export。
- src="/src/main.ts"：指定入口文件的位置。
- main.ts：一般负责初始化 Vue、加载路由、注册插件以及挂载应用。
二、为什么使用 .ts，而不是 .js？
主要原因是项目使用了 TypeScript（TS）。
文件后缀        含义        特点
.js        JavaScript        可以直接编写 JavaScript 代码
.ts        TypeScript        在 JavaScript 基础上增加静态类型检查
.vue        Vue 单文件组件        通常包含模板、脚本和样式

例如，使用 JavaScript：
function add(a, b) {
  return a + b;
}

console.log(add(10, 20));


使用 TypeScript：
function add(a: number, b: number): number {
  return a + b;
}

console.log(add(10, 20));


对比一下：
a: number
b: number
): number


这些是 TypeScript 的类型标注，表示：
- a 必须是数字。
- b 必须是数字。
- 函数返回值应该是数字。
如果错误地传入字符串，TypeScript 的类型检查工具就可以帮助发现问题。

需要注意：TypeScript 最终需要转换成 JavaScript，才能在浏览器中运行。 Vite 在开发环境中负责处理 .ts 文件，构建生产版本时也会完成相应的转换。