Vite + Vue 3 + Typescript 环境搭建指南

2023-12-11 12:25:28

前言

本文将介绍如何利用 Vite、Vue 3 和 TypeScript 来创建一个高效的前端开发环境。Vite 是一种构建工具，能够加速开发阶段的性能，而 Vue 3 则是当前最新版本的 Vue 框架，提供了更好的响应性和更高的性能。TypeScript 的类型检查则有助于增强代码质量和可维护性。

环境配置

搭建此环境需要确保系统已安装 Node.js 和 npm。可以通过以下命令检测是否已经安装：

node -v
npm -v

若未安装，需先从官方网站下载并按照说明进行安装。

使用 CLI 创建项目

Vue 官方提供了 @vue/cli 来创建 Vue 3 + TypeScript 项目，步骤如下：

安装 @vue/cli:

npm install -g @vue/cli

初始化新项目:

vue create my-project

在交互式提示中选择“Manually select features”，然后添加Vue 3和TypeScript。

cd my-project

启动开发服务器：

npm run serve

使用 Vite 创建项目

Vite 提供了一种更快速的启动方式来创建 Vue 3 + TypeScript 的项目。步骤如下：

安装 Vite 和 Vue:

npm init vite@latest my-vue-app --template vue-ts
cd my-vue-app

安装依赖包：

npm install

启动开发服务器：

npm run dev

配置 TypeScript

在项目中使用 TypeScript，需要进行一些配置以确保类型检查和编译顺利进行。对于Vite创建的项目，tsconfig.json文件已经存在，可以在此基础上调整。

编辑 tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "allowJs": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "include": ["env.d.ts", "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"],
  "exclude": ["node_modules"]
}

此配置启用了一些高级特性，如 strict 模式和模块解析路径。

创建 shims-vue.d.ts:

为了解决 TypeScript 对 Vue 组件类型推断的问题，可以创建一个全局声明文件：

// shims-vue.d.ts
declare module "*.vue" {
  import { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}