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

news2025/1/17 2:27:26

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.coloradmin.cn/o/2277810.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基于Springboot的社区医院管理系统【附源码】

基于Springboot的社区医院管理系统【附源码】

基于Springboot的社区医院管理系统 效果如下&#xff1a; 系统登陆页面 病例信息页面 家庭医生管理页面 健康档案管理页面 就诊信息管理页面 药品管理页面 个人信息管理页面 用户管理页面 研究背景 随着医疗行业的快速发展和信息化建设的不断推进&#xff0c;社区医院作为基…
阅读更多...
爬虫后的数据处理与使用（使用篇--实现分类预测）

爬虫后的数据处理与使用（使用篇--实现分类预测）

&#xff08;&#xff09;紧接上文&#xff0c;在完成基本的数据处理后&#xff0c;接下来就是正常的使用了。当然怎么用&#xff0c;确实需要好好思考一下~ 上文&#xff1a;爬虫后的数据处理与使用&#xff08;处理篇&#xff09; 前言&#xff1a; 一般来说&#xff0c;我…
阅读更多...
springMVC---常用注解

springMVC---常用注解

目录 一、创建项目 1.依赖 2.web.xml 3.spring-mvc.xml 二、RequestParam注解 1.作用 2.属性 3.代码 DeptController类 启动tomcat 三、RequestBody注解 1.作用 2.属性 3.代码 (1&#xff09;DeptController类 (2&#xff09;index.jsp (3)启动tomcat 四、P…
阅读更多...
持续集成 01|Gitee介绍、Pycharm使用Gitee

持续集成 01|Gitee介绍、Pycharm使用Gitee

目录 一、理论 二、 git的简介与安装 三、Gitee 1、注册网易163邮箱 2、注册Gitee账号 3、git和gitee管理代码工作原理 三、PyCharm安装配置Gitee 四、Pycharm使用Gitee插件的五种场景 1、将 Gitee的新仓库 Checkout&#xff08;检出&#xff09;到 Pycharm中 2、推送…
阅读更多...
深入了解生成对抗网络（GAN）：原理、实现及应用

深入了解生成对抗网络（GAN）：原理、实现及应用

生成对抗网络&#xff08;GAN, Generative Adversarial Networks&#xff09;是由Ian Goodfellow等人于2014年提出的一种深度学习模型&#xff0c;旨在通过对抗训练生成与真实样本相似的数据。GAN在图像生成、图像修复、超分辨率等领域取得了显著的成果。本文将深入探讨GAN的基…
阅读更多...
云服务信息安全管理体系认证，守护云端安全

云服务信息安全管理体系认证，守护云端安全

在数据驱动的时代&#xff0c;云计算已成为企业业务的超级引擎&#xff0c;推动着企业飞速发展。然而&#xff0c;随着云计算的广泛应用&#xff0c;信息安全问题也日益凸显&#xff0c;如同暗流涌动下的礁石&#xff0c;时刻威胁着企业的航行安全。这时&#xff0c;云服务信息…
阅读更多...
正泰电工携手图扑：变电站数字孪生巡检平台

正泰电工携手图扑：变电站数字孪生巡检平台

随着电力行业的快速发展与智能化转型&#xff0c;传统的人工巡检方式难以匹配现代电网对于效率、安全和精细化管理的高标准要求。在此背景下&#xff0c;构建智慧变电站巡检系统已成为推动变电站智能化进程、实现高效运营和保障电网可靠性的重要战略。 图扑软件与正泰电工联合…
阅读更多...
加强金融数据治理，推进金融科技变革！

加强金融数据治理，推进金融科技变革！

​ 近年来&#xff0c;随着大数据、人工智能等新一代信息技术的高速发展&#xff0c;数字化浪潮席卷全球&#xff0c;金融业作为数据密集型行业&#xff0c;以数据支撑决策、以数据防范风险、以数据驱动创新、以数据优化业务已成为金融业的共识&#xff0c;如何加强金融数据治理…
阅读更多...
【数据结构】快排之三路划分+文件归并排序

【数据结构】快排之三路划分+文件归并排序

排序 一.快排1.快排性能分析2.快排之三路划分3.快排之内省排序 二.归并1.外排序2.文件归并排序 一.快排 1.快排性能分析 决定快排性能的关键点是每次单趟排序后&#xff0c;key对数组的分割&#xff0c;如果每次选key基本二分居中&#xff0c;那么快排的递归树就是颗均匀的满…
阅读更多...
机器学习笔记合集

机器学习笔记合集

&#x1f525;转载来源&#xff1a;机器学习笔记合集 大家好&#xff0c;这里是好评笔记&#xff0c;公主 号&#xff1a;Goodnote。本笔记的任务是解读机器学习实践/面试过程中可能会用到的知识点&#xff0c;内容通俗易懂&#xff0c;入门、实习和校招轻松搞定。 笔记介绍 本…
阅读更多...
2025年01月15日Github流行趋势

2025年01月15日Github流行趋势

1. 项目名称&#xff1a;tabby - 项目地址url&#xff1a;https://github.com/TabbyML/tabby - 项目语言&#xff1a;Rust - 历史star数&#xff1a;25764 - 今日star数&#xff1a;1032 - 项目维护者&#xff1a;wsxiaoys, apps/autofix-ci, icycodes, liangfung, boxbeam - 项…
阅读更多...
晨辉面试抽签和评分管理系统之九：随机编排考生的分组(以教师资格考试面试为例)

晨辉面试抽签和评分管理系统之九：随机编排考生的分组(以教师资格考试面试为例)

晨辉面试抽签和评分管理系统&#xff08;下载地址:www.chenhuisoft.cn&#xff09;是公务员招录面试、教师资格考试面试、企业招录面试等各类面试通用的考生编排、考生入场抽签、候考室倒计时管理、面试考官抽签、面试评分记录和成绩核算的面试全流程信息化管理软件。提供了考生…
阅读更多...
Mongodb相关内容

Mongodb相关内容

Mongodb相关内容 1、Windows平台安装2、Linux平台安装3、基本常用命令文档更新删除文档分页查询索引 pymongo操作 客户端下载&#xff1a;https://download.csdn.net/download/guoqingru0311/90273435 1、Windows平台安装 方式一&#xff1a; 方式2&#xff1a; 方式3&#…
阅读更多...
Vue3使用vue-count-to数字滚动模块报错解决方案

Vue3使用vue-count-to数字滚动模块报错解决方案

小伙伴们是不是遇到了vue3项目使用vue-count-to出现报错的问题 报错如下&#xff1a; TypeError: Cannot read properties of undefined (reading _c) 这个错误信息具体是说没读取到_c的属性 具体不清楚是什么原因&#xff0c;排查还得去看源码&#xff0c;所以我们来解决&a…
阅读更多...
C#，图论与图算法，输出无向图“欧拉路径”的弗勒里（Fleury Algorithm）算法和源程序

C#，图论与图算法，输出无向图“欧拉路径”的弗勒里（Fleury Algorithm）算法和源程序

1 欧拉路径 欧拉路径是图中每一条边只访问一次的路径。欧拉回路是在同一顶点上开始和结束的欧拉路径。 这里展示一种输出欧拉路径或回路的算法。 以下是Fleury用于打印欧拉轨迹或循环的算法&#xff08;源&#xff09;。 1、确保图形有0个或2个奇数顶点。2、如果有0个奇数顶…
阅读更多...
H3CNE-12-静态路由（一）

H3CNE-12-静态路由（一）

静态路由应用场景&#xff1a; 静态路由是指由管理员手动配置和维护的路由 路由表&#xff1a;路由器用来妆发数据包的一张“地图” 查看命令&#xff1a; dis ip routing-table 直连路由&#xff1a;接口配置好IP地址并UP后自动生成的路由 静态路由配置&#xff1a; ip…
阅读更多...
【2024年华为OD机试】 (C卷,100分)- 数字涂色（Java JS PythonC/C++）

【2024年华为OD机试】 (C卷,100分)- 数字涂色（Java JS PythonC/C++）

一、问题描述 题目描述 疫情过后&#xff0c;希望小学终于又重新开学了&#xff0c;三年二班开学第一天的任务是将后面的黑板报重新制作。 黑板上已经写上了N个正整数&#xff0c;同学们需要给这每个数分别上一种颜色。 为了让黑板报既美观又有学习意义&#xff0c;老师要求…
阅读更多...
JavaScript动态渲染页面爬取之Splash

JavaScript动态渲染页面爬取之Splash

Splash是一个 JavaScript渲染服务,是一个含有 HTTP API的轻量级浏览器,它还对接了 Python 中的 Twisted 库和 OT库。利用它&#xff0c;同样可以爬取动态渲染的页面。 功能介绍 利用 Splash&#xff0c;可以实现如下功能&#xff1a; 异步处理多个网页的渲染过程:获取渲染后…
阅读更多...
天机学堂2-高并发优化

天机学堂2-高并发优化

day04-高并发优化 方案选择 实现了学习计划和学习进度的统计功能。特别是学习进度部分&#xff0c;为了更精确的记录用户上一次播放的进度&#xff0c;我们采用的方案是&#xff1a;前端每隔15秒就发起一次请求&#xff0c;将播放记录写入数据库。 在并发较高的情况下&#xf…
阅读更多...
ROS2 准备工作（虚拟机安装，Ubuntu安装，ROS2系统安装）

ROS2 准备工作（虚拟机安装，Ubuntu安装，ROS2系统安装）

准备工作 虚拟机安装 大家可以自行去安装VMware链接&#xff1a;https://pan.baidu.com/s/1KcN1I9FN--Sp1bUsjKqWVA?pwd6666 提取码&#xff1a;6666(提供者&#xff1a;零基础编程入门教程) 教程&#xff1a;【【2025最新版】VMware虚拟机安装教程&#xff0c;手把手教你免…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023