从零开始创建 Vue 3 + Vite + TypeScript 项目：终极指南

在现代 web 开发世界中，构建可靠且高效的应用程序至关重要。Vue 3、Vite 和 TypeScript 的强大结合为我们提供了实现这一目标的理想工具。本指南将引导你从头开始创建一个 Vue 3 + Vite + TypeScript 项目，并逐步介绍你如何利用这些技术的力量。

项目初始化

我们的旅程从创建一个新的 Vue 3 + Vite + TypeScript 项目开始。打开你的终端，导航到所需的目录，然后运行以下命令：

yarn create vite

这将使用 Vite CLI 初始化一个新的项目。选择 vue-ts 模板，然后按 Enter 键。

修改 tsconfig.json

默认情况下，Vite 会使用一个基本的 tsconfig.json 文件。为了充分利用 TypeScript 的强大功能，我们需要对其进行一些修改。打开 tsconfig.json 文件，并在 compilerOptions 对象中添加以下配置：

{
  "target": "esnext",
  "module": "esnext",
  "lib": ["dom", "esnext"],
  "jsx": "react-jsx",
  "moduleResolution": "node",
  "esModuleInterop": true,
  "allowSyntheticDefaultImports": true,
  "strict": true,
  "skipLibCheck": true
}

为项目配置路径别名

路径别名允许我们在代码中使用简短、有意义的别名来引用项目中的模块。在 vite.config.ts 文件中，为以下路径配置别名：

import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      '@': '/src',
      '~': '/node_modules'
    }
  }
})

添加项目中常用类型声明

为了提高代码质量并防止类型错误，我们可以在项目中添加常用的 TypeScript 类型声明。安装以下依赖项：

yarn add @types/node @types/vue

项目中配置跨域代理

如果你的项目需要访问另一个域上的 API，你需要在 vite.config.ts 文件中配置一个跨域代理。添加以下代码：

export default defineConfig({
  server: {
    proxy: {
      '/api': 'http://example.com'
    }
  }
})

编写你的第一个组件

现在项目已经配置好，我们可以编写我们的第一个 Vue 3 组件。在 src/components 目录中创建一个名为 HelloWorld.vue 的文件，并添加以下代码：

<template>
  <div>Hello {{ name }}!</div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  props: {
    name: {
      type: String,
      required: true
    }
  },
  setup() {
    const name = ref('')

    return {
      name
    }
  }
})
</script>