Vue 3 +Vite + TypeScript：项目搭建实操指南（上）

2024-02-19 21:55:26

在构建现代化的前端应用时，选择合适的工具链至关重要。Vue 3 提供了简洁高效的数据绑定与组件化方式；Vite 能够显著提高开发效率和性能；TypeScript 则带来了强类型检查的能力，增强代码质量和可维护性。本文旨在指导开发者如何使用这三种技术搭建项目。

环境准备

在开始之前，确保系统已安装 Node.js（至少 14.x 版本），可通过 node -v 命令查看版本信息。同时，建议安装 npm 或 yarn 包管理器来简化依赖包的管理和更新。

创建 Vue 3 + Vite 项目

通过使用 Vite 的脚手架命令初始化项目：

npm create vite@latest vue-vite-ts --template vue-ts
cd vue-vite-ts

上述命令会根据提示创建一个新的基于 Vue 3 和 TypeScript 的 Vite 项目。默认情况下，项目结构如下：

src/：存放源代码。
public/：存放静态资源文件。
vite.config.ts：Vite 配置文件。

安装依赖

进入项目目录后，安装所有必要依赖包：

npm install

此命令会根据 package.json 文件中的依赖列表下载并安装所需的库和工具。

项目配置

Vue 3 + Vite + TypeScript 的组合提供了多种自定义选项。通过修改配置文件可以优化开发流程及代码质量。

编辑 Vite 配置

Vite 使用 JavaScript API 来进行配置，主要由 vite.config.ts 文件控制。在默认配置基础上，可添加以下内容：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 8081, // 指定开发服务器端口
  },
});

此配置使用了 Vue 插件，并设置了开发服务器监听的端口号。

配置 TypeScript

在项目根目录下，通常已自动生成了一个 tsconfig.json 文件。可根据需要调整编译选项：

{
  "compilerOptions": {
    "target": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

上述设置启用了严格的类型检查，确保源代码文件被正确解析并生成映射文件。

组件开发与调试

开发组件

Vue 3 的单文件组件 (SFC) 格式非常方便，允许将 HTML、CSS 和 JavaScript 分别组织在一个 .vue 文件内。在 src/components/ 目录中创建新组件：

<!-- src/components/Greeting.vue -->
<template>
  <div class="greeting">
    <h1>{{ message }}</h1>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const message = ref('你好，Vue3+Vite+TypeScript!');
</script>

<style scoped>
.greeting {
  color: #42b983;
}
</style>