从零搭建一个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_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文件即可。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

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

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

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

sparkRDD教程之必会的题目

1.前期准备 &#xff08;1&#xff09;看看上一期的博客&#xff0c;最好跟着上一期的博客把sparkRDD的基本命令给熟练掌握后&#xff0c;再来做这篇文章的任务。 上一期的博客&#xff1a;sparkRDD教程之基本命令-CSDN博客 &#xff08;2&#xff09;新建文件task6.scala …
阅读更多...
stack和queue专题

stack和queue专题

文章目录 stack最小栈题目解析代码 栈的压入弹出序列题目解析代码 queue二叉树的层序遍历题目解析代码 stack stack和queue都是空间适配器 最小栈 最小栈的题目链接 题目解析 minst是空就进栈&#xff0c;或者是val < minst.top()就进栈 代码 class MinStack { public:M…
阅读更多...
欧拉路径算法

欧拉路径算法

欧拉图&#xff1a; 对于应该连通图G&#xff0c;有&#xff1a; 1欧拉路径&#xff1a;一条路径&#xff0c;它能够不重复地遍历完所有的边&#xff0c;这个性质很像不重复地一笔画完所有边&#xff0c;所以有些涉及到欧拉路径的问题叫做一笔画问题。 2欧拉回路&#xff1a…
阅读更多...
【C#设计模式(23)——模板方法模式(Template Method Pattern)】

【C#设计模式(23)——模板方法模式(Template Method Pattern)】

前言 在抽象类中封装算法的结构&#xff0c;具体的实现步骤由子类定义&#xff0c;从而达到不改变算法结构的&#xff0c;允许子类重定义方法内容。代码 public abstract class Teamplate {public void TeamplateMethod(){Step1();Step2();Step3();}protected abstract void …
阅读更多...
MyBatis——XML映射文件

MyBatis——XML映射文件

在MyBatis中&#xff0c;既可以通过注解的方式配置SQL语句&#xff0c;也可以通过XML映射文件的方式配置SQL语句。对于简单的SQL语句建议直接通过注解的方式配置SQL语句&#xff1a; Delete("delete from user where id#{id}") Integer deleteById(Integer id);但是…
阅读更多...
Mysql--运维篇--安全性（数据库访问控制，最小权限原则，表空间加密，TLS加密，证书签发，SQL注入及防范等）

Mysql--运维篇--安全性（数据库访问控制，最小权限原则，表空间加密，TLS加密，证书签发，SQL注入及防范等）

一、数据库访问控制 MySQL的访问控制是确保数据库安全的关键机制之一。通过合理的用户权限管理和访问控制策略&#xff0c;可以防止未经授权的用户访问、修改或删除敏感数据。 1、MySQL访问控制的工作原理 MySQL使用基于用户的访问控制模型&#xff0c;每个用户都有特定的权…
阅读更多...
抽奖滚动功能

抽奖滚动功能

代码 <template><div class"box"><video class"video" src"../../assets/video/底层.mp4" loop autoplay muted></video><img class"choujiang" src"../../assets/image/抽奖1.png" alt"&…
阅读更多...
【Python】Python之locust压测教程+从0到1demo：基础轻量级压测实战（1）

【Python】Python之locust压测教程+从0到1demo：基础轻量级压测实战（1）

文章目录 一、什么是Locust二、Locust 架构组成三、实战 Demo准备一个可调用的接口编写一个接口测试用例编写一个性能测试用例执行性能测试用例代码1、通过 Web UI 执行&#xff08;GUI模式&#xff09;2、通过命令行执行&#xff08;非GUI模式&#xff09; 小知识&#xff1a;…
阅读更多...
Microsoft

Microsoft

Microsoft Word目录1.目录编号与文字的间距设置2. 目录编号缩进设置 Excel函数MID&#xff08;提取字符&#xff09;CONCAT&#xff08;组合字符串&#xff09;EXACT&#xff08;比较字符串&#xff09; PowerPointwindows 11 恢复右键传统菜单 Word 目录 1.目录编号与文字的…
阅读更多...
用 Python 处理 CSV 和 Excel 文件

用 Python 处理 CSV 和 Excel 文件

&#x1f496; 欢迎来到我的博客&#xff01; 非常高兴能在这里与您相遇。在这里&#xff0c;您不仅能获得有趣的技术分享&#xff0c;还能感受到轻松愉快的氛围。无论您是编程新手&#xff0c;还是资深开发者&#xff0c;都能在这里找到属于您的知识宝藏&#xff0c;学习和成长…
阅读更多...
JS后盾人--再一次的走进JS？

JS后盾人--再一次的走进JS？

程序跑起来与避免延迟 如果你讲JS&#xff0c;你就不可能只讲JS 后盾人说开发就要用VScode&#xff08;确实&#xff0c;Windows和Linux都可以跑&#xff09; 然后就是第一天开发的时候装的那些插件 前端访问流程基本分析 托管到服务器上的东西&#xff0c;谁访问下载到谁的…
阅读更多...
Android 调用系统服务接口获取屏幕投影(需要android.uid.system)

Android 调用系统服务接口获取屏幕投影(需要android.uid.system)

媒体投影 借助 Android 5&#xff08;API 级别 21&#xff09;中引入的 android.media.projection API&#xff0c;您可以将设备屏幕中的内容截取为可播放、录制或投屏到其他设备&#xff08;如电视&#xff09;的媒体流。 Android 14&#xff08;API 级别 34&#xff09;引入…
阅读更多...
PT8M2102 触控型 8Bit MCU

PT8M2102 触控型 8Bit MCU

1. 产品概述 PT8M2102 是一款基于 RISC 内核的 8 位 MTP 单片机&#xff0c;内部集成了电容式触摸感应模块、 TIMER 、 PWM、 LVR 、 LVD 、 WDT 等外设&#xff0c;其主要用作触摸按键开关&#xff0c;广泛适用于触控调光、电子玩具、消 费电子、家用电器等领域&am…
阅读更多...
LangGraph 教程：初学者综合指南（2）

LangGraph 教程：初学者综合指南（2）

工具集成 将工具集成到 LangGraph 聊天机器人中可以显着增强其功能&#xff0c;使其能够按照您喜欢的方式访问和处理信息。 让我们修改上一节中创建的基本聊天机器人&#xff0c;以包含一个可以在网络上搜索信息的工具。我们将使用langchain_中community.tools TavilySearchR…
阅读更多...
项目练习：若依管理系统字典功能-Vue前端部分

项目练习：若依管理系统字典功能-Vue前端部分

文章目录 一、情景说明二、若依Vue相关代码及配置1、utils代码2、components组件3、api接口代码4、main.js配置 三、使用方法1、html部分2、js部分 一、情景说明 我们在做web系统的时候&#xff0c;肯定会遇到一些常量选择场景。 比如&#xff0c;性别&#xff1a;男女。 状态…
阅读更多...
oracle闪回表

oracle闪回表

文章目录 闪回表案例1&#xff1a;&#xff08;未清理回收站时的闪回表--成功&#xff09;案例2&#xff08;清理回收站时的闪回表--失败&#xff09;案例3&#xff1a;彻底删除表&#xff08;不经过回收站--失败&#xff09;案例4&#xff1a;闪回表之后重新命名新表总结1、删…
阅读更多...
TensorFlow Quantum快速编程（基本篇）

TensorFlow Quantum快速编程（基本篇）

一、TensorFlow Quantum 概述 1.1 简介 TensorFlow Quantum（TFQ）是由 Google 开发的一款具有开创性意义的开源库，它宛如一座桥梁，巧妙地将量子计算与 TensorFlow 强大的机器学习功能紧密融合。在当今科技飞速发展的时代，传统机器学习虽已取得诸多瞩目成就，然而面对日益…
阅读更多...
K8s数据存储之详解（Detailed Explanation of K8s Data Storage）

K8s数据存储之详解（Detailed Explanation of K8s Data Storage）

K8s数据存储相关概念详解&#xff08;临时存储&#xff0c;节点存储&#xff0c;网络存储&#xff0c;PV/PVC&#xff09; 本篇文章分享一下存储卷和数据持久化的相关概念&#xff1a; 存储卷概述 临时存储卷&#xff08;Ephemeral Volumes&#xff09; 节点存储卷&#xff…
阅读更多...
java求职学习day12

java求职学习day12

1 泛型机制&#xff08;熟悉&#xff09; 1.1 基本概念 &#xff08;1&#xff09;通常情况下集合中可以存放不同类型的元素&#xff0c;是因为将所有对象都看作Object类型放入&#xff0c;因此从集合中取出元素时&#xff0c;也是Object类型&#xff0c;为了表达该元素真实的…
阅读更多...
最新文章

Copyright @ 2022~2023