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

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_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文件即可。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/67433.shtml

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

相关文章

minio https配置

minio https配置

minio启动时候指定数据目录,配置文件&#xff0c;密钥文件目录&#xff0c;环境文件 1.创建minio用户,专门用于服务启动的 groupadd -r minio-user useradd -M -r -g minio-user minio-user 2.在当前用户目录下创建minio目录&#xff0c;存储minio相关文件 mkdir minio 在mini…
阅读更多...
Linux自学指南（学习路线大纲）

Linux自学指南（学习路线大纲）

Linux入门与进阶指南 目录 第一部分 入门篇 第一章 Linux 系统 1.1 Unix&#xff1a;Linux的“祖师爷” 1.2 Linux 操作系统的诞生与发展历程 1.3 Linux 主要应用领域的归纳 1.4 开源社区的兴起 第二章 如何选择Linux发行版&#xff1f; 2.1 Debian GNU/Linux 2.2 Ubu…
阅读更多...
Rust 游戏开发框架指南

Rust 游戏开发框架指南

Rust 游戏开发框架指南 主流游戏引擎 1. Bevy 最受欢迎的 Rust 游戏引擎之一&#xff0c;基于 ECS&#xff08;实体组件系统&#xff09;架构。 特点&#xff1a; &#x1f680; 高性能 ECS 系统&#x1f4e6; 热重载支持&#x1f3a8; 现代渲染器&#x1f50a; 内置音频系…
阅读更多...
C# Linq 查询

C# Linq 查询

1.Linq 查询表达式基础 Linq 查询应用程序始终将源数据视为 IEnumerable<T> 或 IQueryable<T> 集合。 LINQ查询表达式包含8个基本子句，分别为from、select、group、where、orderby、join、let和into。 子 句备注from指定数据源和范围变量select指定当执行查询…
阅读更多...
leetcode 面试经典 150 题：汇总区间

leetcode 面试经典 150 题：汇总区间

链接汇总区间题序号228题型数组解法一次遍历法难度简单熟练度✅✅✅ 题目 给定一个 无重复元素 的 有序 整数数组 nums 。 返回 恰好覆盖数组中所有数字 的 最小有序 区间范围列表 。也就是说&#xff0c;nums 的每个元素都恰好被某个区间范围所覆盖&#xff0c;并且不存在属…
阅读更多...
使用Go语言中的Buffer实现高性能处理字节和字符串

使用Go语言中的Buffer实现高性能处理字节和字符串

文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons&#xff1a;JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram&#xff0c;自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 &#xff1f; 5 IDEA必装的插件&…
阅读更多...
常见好用的PHP CMS开源系统有哪些？

常见好用的PHP CMS开源系统有哪些？

开源的系统&#xff0c;网站大家估计也见过很多&#xff0c;尤其是用PHP写的开源系统也很受用户们欢迎&#xff0c;这类系统通常以简单、使用、开源为优势&#xff0c;为用户提供更好的服务。以下就为大家介绍几个常见且好用的PHP CMS开源系统。欢迎补充&#xff01; 1、WordP…
阅读更多...
Mybatis Plus 分页实现

Mybatis Plus 分页实现

目录 前言&#xff1a; 一、分页插件 1、添加配置类 &#xff08;1&#xff09;创建配置类方式: &#xff08;2&#xff09;启动类中配置分页插件方式(推荐): 2、测试 二、XML自定义分页 1、UserMapper中定义接口方法 2、UserMapper.xml中编写SQL ​编辑 3、测试 前…
阅读更多...
玩转大语言模型——使用graphRAG+Ollama构建知识图谱

玩转大语言模型——使用graphRAG+Ollama构建知识图谱

系列文章目录 玩转大语言模型——ollama导入huggingface下载的模型 玩转大语言模型——langchain调用ollama视觉多模态语言模型 文章目录 系列文章目录前言下载和安装用下载项目的方式下载并安装用pip方式下载并安装 生成知识图谱初始化文件夹修改模型配置修改知识库生成配置创…
阅读更多...
[AUTOSAR通信篇] - AutoSAR通信架构

[AUTOSAR通信篇] - AutoSAR通信架构

点击订阅专栏不迷路 文章目录 一、通信驱动二、通信硬件抽象三、通信服务3.1 CAN通信协议栈3.2 J1939通信协议栈3.3 LIN通信协议栈3.4 FlexRay通信协议栈3.5 ETH通信协议栈 返回总目录 先看一张图&#xff0c;这是整个BSW层可以提供的服务&#xff0c;今天我们重点来讲一讲这个…
阅读更多...
mac配置 iTerm2 使用lrzsz与服务器传输文件

mac配置 iTerm2 使用lrzsz与服务器传输文件

mac配置 1. 安装支持rz和sz命令的lrzsz brew install lrzsz2. 下载iterm2-send-zmodem.sh和iterm2-recv-zmodem.sh两个脚本 # 克隆仓库 git clone https://github.com/aikuyun/iterm2-zmodem ~/iterm2-zmodem# 进入到仓库目录 cd ~/iterm2-zmodem# 设置脚本文件可执行权限 c…
阅读更多...
两级式三相光伏并网逆变器Matlab/Simulink仿真模型

两级式三相光伏并网逆变器Matlab/Simulink仿真模型

忘记更新最经典的光伏并网仿真模型了&#xff0c;作为包含经典的MPPT和并网恒功率因素的双闭环控制模型&#xff0c;也是很多相关专业学生的入门研究内容&#xff0c;光伏并网模型三相的和单相都有。 其中三相光伏并网逆变器有大功率和小功率的两种&#xff0c;之前早在硕士期…
阅读更多...
人工智能之深度学习_[2]-PyTorch入门

人工智能之深度学习_[2]-PyTorch入门

PyTorch 1.PyTorch简介 1.1 什么是PyTorch PyTorch是一个基于Python的科学计算包 PyTorch安装 pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simplePyTorch一个基于Python语言的深度学习框架&#xff0c;它将数据封装成张量&#xff08;Tensor&#xff09;来进行…
阅读更多...
ASP.NET Core - 配置系统之配置添加

ASP.NET Core - 配置系统之配置添加

ASP.NET Core - 配置系统之配置添加 2. 配置添加 2. 配置添加 配置系统可以读取到配置文件中的信息&#xff0c;那必然有某个地方可以将配置文件添加到配置系统中。之前的文章中讲到 ASP.NET Core 入口文件中&#xff0c;builder(WebApplicationBuilder 对象) 中有一个 Config…
阅读更多...
GIS大模型：交通领域方面的应用

GIS大模型：交通领域方面的应用

文章目录 1. 实时交通流量预测&#xff1a;2. 动态信号灯控制&#xff1a;3. 交通流模式识别&#xff1a;4. 交通事故预警&#xff1a;5. 路径推荐与导航优化&#xff1a;6. 长期交通规划&#xff1a;7. 事件影响分析&#xff1a;8. 智能停车管理&#xff1a; 大模型在交通流量…
阅读更多...
Redis复制（replica）

Redis复制（replica）

Redis主从复制 [Redis主从复制]&#xff08;replica&#xff09;是一个多Redis实例进行数据同步的过程&#xff0c;其中一个实例是主实例&#xff08;Master&#xff09;&#xff0c;其他实例是从实例&#xff08;Slave&#xff09;。主实例负责处理命令请求&#xff0c;而从实…
阅读更多...
零基础构建最简单的 Tauri2.0 桌面项目 Star 88.4k!!!

零基础构建最简单的 Tauri2.0 桌面项目 Star 88.4k!!!

目录 预安装环境 安装nodejs windows下安装 linux下安装 nodejs常遇问题 安装C环境 介绍 下载 安装 安装Rust语言 Tauri官网 安装 vscode 安装 rust 插件 安装 Tauri 插件 运行成果 预安装环境 安装nodejs windows下安装 NodeJs_安装及下载_哔哩哔哩_bilibi…
阅读更多...
wproxy客户端安装，代理返回JSON

wproxy客户端安装，代理返回JSON

文章目录 一、wproxy基础信息二、使用wproxy客户端代理返回参数 一、wproxy基础信息 https://github.com/avwo/whistle github https://wproxy.org/whistle/quickstart.html 快速上手 Whistle 是基于 Node.JS 实现的操作简单、功能强大的跨平台抓包调试工具&#xff0c;可作为…
阅读更多...
小识MySQL中的OLTP和OLAP

小识MySQL中的OLTP和OLAP

前记&#xff1a;大家带着挑剔的眼光&#xff0c;多多批判和指正&#xff01;&#x1f64f; MySQL中的OLTP和OLAP是两种不同的数据库操作模式&#xff0c;它们各自针对不同的应用场景和需求。 OLTP&#xff08;Online Transaction Processing&#xff0c;联机事务处理&#x…
阅读更多...
C++没有Y Combinator？使用 C++ 实现 Y Combinator（中英双语）

C++没有Y Combinator？使用 C++ 实现 Y Combinator（中英双语）

C 中并没有直接内置的 Y Combinator&#xff0c;但通过现代 C 特性&#xff08;如 lambda 表达式 和 std::function&#xff09;&#xff0c;我们可以实现一个类似 Y Combinator 的功能。 下面我们来详细讲解如何在 C 中实现 Y Combinator。 使用 C 实现 Y Combinator 目标 …
阅读更多...
最新文章

Copyright @ 2022~2023