当前位置：首页 > news >正文

从零搭建一个Vue3 + Typescript的脚手架——day1

news 来源：原创 2025/6/10 14:28:27

1.开发环境搭建

(1).配置vite

vite简介
Vite 是一个由尤雨溪开发的现代化前端构建工具，它利用了浏览器对 ES 模块的原生支持，极大地提升了开发服务器的启动速度和热更新效率。Vite 不仅适用于 Vue.js，还支持 React、Svelte 等多种框架，通过其丰富的插件系统和优化的性能，为开发者提供了更加流畅和高效的前端开发体验。
安装配置

首先使用pnpm安装vite

pnpm add vite -D

然后在根目录下创建一个index.html 文件，将基础内容写入：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" href="/favicon.ico" /><title>项目标题</title>
</head>
<body><div id="app"></div>
</body>
</html>

在package.json中添加启动命令

"scripts": {"dev": "vite","build": "vite build","serve": "vite preview"},

在根目录下创建一个.npmrc文件，将基础内容写入：

# 通过该配置兜底解决组件没有类型提示的问题
shamefully-hoist = true

(2).配置typescript

typescript简介
TypeScript 是 JavaScript 的一个超集，它为 JavaScript 添加了类型系统，使得代码更加健壮和可维护。TypeScript 的类型系统可以帮助开发者提前发现潜在的错误，并提供更好的代码补全和重构支持。同时，TypeScript 还支持最新的 ECMAScript 特性，使得开发者可以更方便地使用最新的 JavaScript 语法和特性。
安装配置

使用pnpm安装typescript

pnpm add typescript -D

在根目录下创建一个tsconfig.json文件，将基础内容写入：

{"compilerOptions": {"target": "esnext", // 指定 ECMAScript 目标版本"useDefineForClassFields": true, // 启用 ECMAScript 类字段定义"module": "esnext", // 指定模块代码生成"moduleResolution": "node", // 指定模块解析策略"strict": true, // 启用所有严格类型检查选项"jsx": "preserve", // 指定 JSX 代码生成"sourceMap": true, // 生成相应的 .map 文件"resolveJsonModule": true, // 允许导入 JSON 文件"esModuleInterop": true, // 启用对 CommonJS 和 ES 模块的默认导入支持"lib": ["esnext", "dom"] // 指定要包含在编译中的库文件},// 指定要包含在编译中的文件或文件夹"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],// 指定要排除在编译中的文件或文件夹"exclude": ["node_modules", "dist"]}

(3).配置Vue

Vue
Vue 是一个用于构建用户界面的渐进式 JavaScript 框架。它被设计为可以逐步采用，从简单的表单控件到复杂的单页应用程序。Vue 的核心库只关注视图层，易于上手，同时也可以与其他库或现有项目无缝集成。Vue 的响应式系统和组件化架构使得开发大型应用变得更加简单和高效。
安装配置

使用pnpm安装vue

pnpm add vue@latest // 安装最新版本

安装vite的vue插件

pnpm add @vitejs/plugin-vue -D

在根目录下创建一个vite.config.ts文件，将基础内容写入：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'export default defineConfig({plugins: [vue()], // 使用vue插件
})

编写veu入口文件,在根目录下创建一个src/main.ts文件，将基础内容写入：

import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App) // 创建vue实例
app.mount('#app') // 挂载到页面——这里的#app是index.html中id为app的div(在创建根目录下的index.html时已经提前创建了)

在根目录下创建一个src/App.vue文件，将基础内容写入：

<template><div><h1>hello world</h1></div>
</template><script lang="ts" setup>
</script>

最后在index.html中引入main.ts文件

<script type="module" src="/src/main.ts"></script>

配置好之后，执行pnpm run dev，即可启动项目

(4).配置Eslint

Eslint简介
ESLint 是一个用于识别和报告 JavaScript（以及 JSX、TSX 等）代码中的模式的工具，它可以帮助开发者发现代码中的问题，并按照一定的规则进行代码格式化和风格检查。ESLint 的配置文件通常是一个 .eslintrc 文件，其中可以定义一系列的规则和配置选项。通过 ESLint，开发者可以确保代码的一致性和可读性，同时也可以避免一些常见的错误和问题。
安装配置

使用npx eslint --init命令初始化eslint

npx eslint --init

选择使用typescript和vue

? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? ES modules (import/export)
? Which framework does your project use? Vue
? Does your project use TypeScript? Yes
? Where does your code run? Browser
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Standard
? What format do you want your config file to be in? JavaScript

执行完命令后会在根目录生成一个eslint.config.js文件，并且会将基础内容写入。然后我们写入一些自定义的规则

import globals from "globals";
import pluginJs from "@eslint/js";
import { recommended as tseslintRecommended } from "@typescript-eslint/eslint-plugin";
import { recommended as pluginVueRecommended } from "eslint-plugin-vue";
import { recommended as prettierRecommended } from "eslint-plugin-prettier";/** @type {import('eslint').Linter.Config[]} */
export default [{files: ["**/*.{js,mjs,cjs,ts,vue}"],languageOptions: {globals: { ...globals.browser, ...globals.node },},},pluginJs.configs.recommended,tseslintRecommended,pluginVueRecommended,{files: ["**/*.vue"],languageOptions: {parserOptions: {parser: "@typescript-eslint/parser",ecmaVersion: 2020,sourceType: "module",jsxPragma: "React",ecmaFeatures: {jsx: true,tsx: true,},},},extends: ["plugin:vue/vue3-essential","@vue/typescript/recommended","@vue/prettier","plugin:prettier/recommended",],rules: {// Vue 规则"vue/no-v-html": "off","vue/require-default-prop": "off","vue/require-explicit-emits": "off","vue/html-self-closing": ["error",{html: {void: "always",normal: "always",component: "always",},svg: "always",math: "always",},],},},
];

在根目录下创建一个.eslintignore文件，将基础内容写入：

# Eslint 会忽略的文件
.DS_Store
node_modules
dist
dist-ssr
*.local
.npmrc

(5).配置Vue-Router

Vue Router简介
Vue Router 是 Vue.js 官方的路由管理器。它可以帮助开发者构建单页面应用程序（SPA），通过定义路由和组件之间的映射关系，实现页面之间的导航和切换。Vue Router 提供了丰富的功能和配置选项，包括动态路由、嵌套路由、路由守卫、路由懒加载等。通过 Vue Router，开发者可以轻松地实现页面之间的导航和切换，提高用户体验。
安装配置

使用pnpm安装vue-router

pnpm add vue-router@next -D

在src目录下先创建一个views文件夹，然后在views文件夹下创建一个Home.vue文件，将基础内容写入：

<template><div><h1>Home</h1></div>
</template><script lang="ts">
import { defineComponent } from 'vue'export default defineComponent({name: 'Home',
})
</script>

在src目录下创建一个router文件夹，然后在router文件夹下创建一个index.ts文件，将基础内容写入：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'// 定义路由
const routes: Array<RouteRecordRaw> = [{path: '/',name: 'Home',component: Home}
]// 创建路由实例
const router = createRouter({//  import.meta.env.BASE_URL 是 vite 提供的环境变量，表示项目的根路径history: createWebHistory(import.meta.env.BASE_URL), routes
})export default router

在src/main.ts文件中引入router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App)
app.use(router) // 使用路由
app.mount('#app')

(6).配置环境变量

为什么要区分环境变量
在开发过程中，我们通常需要根据不同的环境（如开发环境、测试环境、生产环境）来配置不同的变量，以便于我们更好地管理和维护项目。例如，我们可能需要在开发环境中使用本地服务器，而在生产环境中使用远程服务器。或者，我们可能需要在开发环境中使用调试模式，而在生产环境中使用发布模式。通过区分环境变量，我们可以轻松地切换不同的配置，而不需要修改代码。

开发环境：为开发人员提供一个安全的地方来进行编码和调试，不会影响到其他环境，一般来说开发人员在本地机器上运行和测试应用程序。
测试环境：为测试人员提供一个模拟生产环境的地方来进行测试，以确保应用程序在发布到生产环境之前是稳定的。
生产环境：为最终用户提供一个稳定、可靠、安全的地方来访问应用程序。
配置环境变量
vite已经为我们封装了环境变量，我们只需要在根目录下创建一个.env文件，然后将环境变量写入即可。
注意：只有以 VITE_ 开头的变量才会被 Vite 特殊处理。

# .env —— 所有环境都会加载
VITE_APP_TITLE= "My App"
# .env.development —— 只在开发环境加载
VITE_BASE_URL = "http://localhost:3000"
# .env.production —— 只在生产环境加载
VITE_BASE_URL= "http://localhost:3001"
# .env.test —— 只在测试环境加载
VITE_BASE_URL= "http://localhost:3002"

在项目的js文件中我们可以通过import.meta.env来访问这些环境变量。该操作是安全的，不会在构建时暴露环境变量。

console.log(import.meta.env.VITE_APP_TITLE) // My App (development)

这样就在项目中配置好了环境变量。
存在问题：
因为我们使用了ts作为开发语言，所以当我们在ts文件中访问环境变量时，会出现类型报错，类型报错详情为：类型ImportMeta上不存在env。
这是由于vite自动导入了import.meta，而ts类型检查不知道vite已经做过处理，因此我们需要进一步在tsconfig.ts文件中配置对应的类型声明。
这里主要有两种配置方式：

直接配置vite提供的类型声明文件（这种方式配置之后我们在 .env文件中写入的内容我们无法使用ts提示）

{"compilerOptions": {"types": ["vite/client"]}
}

自定义环境变量文件的类型声明（这种方式配置之后我们在 .env文件中写入的内容我们可以使用ts提示）
这种配置方式需要在根目录下创建一个env.d.ts文件，然后在文件中写入以下内容：

/// <reference types="vite/client" />interface ImportMetaEnv {readonly VITE_APP_NAME: string;readonly VITE_BASE_URL: string;
}interface ImportMeta {readonly env: ImportMetaEnv;
}

这样配置我们在写代码时就会有类型提示了。

(7).封装Axios / fetch

Axios简介
Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它支持请求和响应拦截器、自动转换 JSON 数据、取消请求等功能。Axios 是一个开源项目，它有丰富的文档和示例，可以帮助开发者快速上手。
Fetch简介
Fetch 是一种现代的浏览器 API，用于发送 HTTP 请求和接收 HTTP 响应。Fetch 是基于 Promise 的，因此它可以很容易地与 async/await 一起使用。Fetch 是一种非常灵活的 API，它支持各种 HTTP 方法、请求头、请求体等。Fetch 是一种非常流行的 API，它被广泛应用于 Web 开发中。
Axios和Fetch的区别
Axios 和 Fetch 都是用于发送 HTTP 请求的库，它们有一些共同的特点，但也存在一些区别。

Axios 是一个基于 Promise 的 HTTP 客户端，而 Fetch 是一种现代的浏览器 API。因此，Axios 可以很容易地与 async/await 一起使用，而 Fetch 也可以很容易地与 async/await 一起使用。
Axios 支持请求和响应拦截器、自动转换 JSON 数据、取消请求等功能，而 Fetch 不支持这些功能。因此，如果需要这些功能，可以使用 Axios。
1.axios配置
安装axios

pnpm install axios

封装axios
我们使用axios发送请求时需要进一步对其惊醒一定程度的封装，以便于我们更好地管理和维护项目。这里我们主要封装了以下内容：

请求拦截器：在请求发送之前，我们可以对请求进行一些处理，例如添加请求头、添加请求参数等。
响应拦截器：在请求返回之后，我们可以对响应进行一些处理，例如处理错误、处理数据等。
统一配置基地址，超时时间等
统一处理错误

首先我们在src目录下创建一个utils文件夹，用于存放一些工具与函数，然后在utils文件夹下创建一个axiosRequest.ts文件，将基础内容写入：

import axios from "axios"
import router from "@/router"// 读取当前环境的基地址
const BASE_URL = import.meta.env.VITE_BASE_URLconst request = axios.create({baseURL: "/api",timeout: 5000 // 超时时间
})// 添加请求拦截器
request.interceptors.request.use(function (config) {// 在发送请求之前做些什么// 一般会在这里添加tokenreturn config},function (error) {// 对请求错误做些什么return Promise.reject(error)}
)// 添加响应拦截器
request.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 提取token// 一般会在这里保存token// 对响应数据做点什么return response.data},function (error) {// 超出 2xx 范围的状态码都会触发该函数// token过期if (error.response.status === 401) {// 登录状态已过期，请重新登录//  这里需要清除tokenreturn router.push("/login")}if (error.response.status === 400) {//  请求参数错误} else {// 其他错误}// 对响应错误做点什么console.log(error)return Promise.reject(error)}
)export default request

在外部使用时只需要引入request.ts文件即可。
2. fetch配置
我们同样在utils文件夹下创建一个fetchRequest.ts文件，将基础内容写入：

// 创建FetchService类
export class FetchService {private baseUrl: string;constructor(baseUrl: string) {this.baseUrl = baseUrl;}// 定义get方法async get<T>(url: string): Promise<T> {const response = await fetch(this.baseUrl + url);if (!response.ok) {throw new Error(response.statusText);}const data: T = await response.json();return data;}// 定义post方法async post<T>(url: string, body: any): Promise<T> {const response = await fetch(this.baseUrl + url, {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify(body)});if (!response.ok) {throw new Error(response.statusText);}const data: T = await response.json();return data;}// 定义put方法async put<T>(url: string, body: any): Promise<T> {const response = await fetch(this.baseUrl + url, {method: 'PUT',headers: {'Content-Type': 'application/json'},body: JSON.stringify(body)});if (!response.ok) {throw new Error(response.statusText);}const data: T = await response.json();return data;}// 定义delete方法async delete<T>(url: string): Promise<T> {const response = await fetch(this.baseUrl + url, {method: 'DELETE'});if (!response.ok) {throw new Error(response.statusText);}const data: T = await response.json();return data;}}export default new FetchService(import.meta.env.VITE_BASE_URL);

在外部使用时只需要引入fetchRequest.ts文件即可。