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

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

article 2025/1/15 21:43:01

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文件中配置对应的类型声明。
这里主要有两种配置方式：

  1. 直接配置vite提供的类型声明文件（这种方式配置之后我们在 .env文件中写入的内容我们无法使用ts提示）
{
  "compilerOptions": {
    "types": ["vite/client"]
  }
}
  1. 自定义环境变量文件的类型声明（这种方式配置之后我们在 .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发送请求时需要进一步对其惊醒一定程度的封装，以便于我们更好地管理和维护项目。这里我们主要封装了以下内容：
  1. 请求拦截器：在请求发送之前，我们可以对请求进行一些处理，例如添加请求头、添加请求参数等。
  2. 响应拦截器：在请求返回之后，我们可以对响应进行一些处理，例如处理错误、处理数据等。
  3. 统一配置基地址，超时时间等
  4. 统一处理错误

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

import axios from "axios"
import router from "@/router"

// 读取当前环境的基地址
const BASE_URL = import.meta.env.VITE_BASE_URL

const request = axios.create({
  baseURL: "/api",
  timeout: 5000 // 超时时间
})

// 添加请求拦截器
request.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
   // 一般会在这里添加token
    return 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) {
      // 登录状态已过期，请重新登录
      //  这里需要清除token
      return 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文件即可。


http://www.kler.cn/a/504128.html

相关文章：

  • C++:string
  • 怎么理解编码器与解码器？
  • WINFORM - DevExpress -＞ devexpress版--报表(report)
  • Windows图形界面(GUI)-QT-C/C++ - QT控件创建管理初始化
  • GitLab CI/CD使用runner实现自动化部署前端Vue2 后端.Net 7 Zr.Admin项目
  • 腾讯云AI代码助手编程挑战赛-智能聊天助手
  • Redis快速入门店铺营业状态设置
  • px、em 和 rem 的区别：深入理解 CSS 中的单位
  • 【ArcGIS初学】产生随机点计算混淆矩阵
  • 【树莓派3B】香瓜树莓派3B之语音识别机器人
  • 2025年  生活公报计划
  • 见微知著：Tripo 开创 3D 生成新时代
  • 无人机反制设备十大应用场景详解
  • 什么是IDE,新手如何选择IDE?
  • 宝塔面板 php8.0 安装 fileinfo 拓展失败
  • 解决“无法定位程序输入点 av_buffer_create 于动态链接库 XXX\Obsidian.exe 上”问题
  • electron 打包后的 exe 文件，运行后是空白窗口
  • 开源工作管理解决方案tillywork
  • IO流相关概念
  • 使用 LLaMA-Factory 微调大模型
  • 【练习】力扣热题100 除自身以外数组的乘积
  • WinForm如何跨线程更新界面
  • 在vscode中使用R-1
  • “代驾”小程序查漏补缺
  • 【漫话机器学习系列】048.编码有序类别特征（Encoding Ordinal Categorical Features）
  • C#里使用libxl设置EXCEL里公式计算的例子