【三十天精通Vue 3】第十七天 Vue 3的服务器渲染详解

news2024/9/21 8:01:02

请添加图片描述

✅创作者：陈书予
🎉个人主页：陈书予的个人主页
🍁陈书予的个人社区，欢迎你的加入: 陈书予的社区
🌟专栏地址: 三十天精通 Vue 3

文章目录

    • 引言
    • 一、Vue 3 服务器端渲染概述
      • 1.1 服务器端渲染的概念
      • 1.2 Vue 3 中的服务器端渲染
      • 1.3 Vue 3 服务器端渲染的优势和劣势
    • 二、Vue 3 服务器端渲染的基础
      • 2.1 服务器端渲染的基础配置
      • 2.2 使用 Vite 进行服务器端渲染
      • 三、Vue 3 服务器端渲染实践
      • 3.1 服务器端渲染的基本步骤
      • 3.2 服务器端渲染中的路由处理
      • 3.3 服务器端渲染中的数据获取
      • 3.4 服务器端渲染中的 CSS 处理
      • 3.5 服务器端渲染中的性能优化
    • 四、Vue 3 服务器端渲染最佳实践
      • 4.1 服务器端渲染的最佳实践
      • 4.2 在 Vue 3 中的服务器端渲染最佳实践
    • 五、Vue 3 服务器端渲染常见问题及解决方案
      • 5.1 如何处理异步数据
      • 5.2 如何处理动态路由
      • 5.3 如何处理样式
      • 5.4 如何处理状态管理
      • 5.5 如何处理 SEO

引言

Vue 3 是一款非常流行的前端框架，它提供了一系列强大的功能来构建现代化的Web应用程序。其中，服务器端渲染（Server Side Rendering，SSR）是Vue 3 的一个非常重要的特性，它可以显著提高应用程序的性能和SEO优化效果。本篇文章将对Vue 3 服务器端渲染进行详细的介绍和分析，包括基础概念、基础配置、实践和最佳实践等内容。

一、Vue 3 服务器端渲染概述

1.1 服务器端渲染的概念

服务器端渲染（Server Side Rendering，SSR）是一种将Web页面在服务器端预先渲染成HTML字符串，然后将其直接发送给客户端浏览器的技术。与传统的客户端渲染（Client Side Rendering，CSR）相比，服务器端渲染可以提高页面加载速度、SEO效果和用户体验。

1.2 Vue 3 中的服务器端渲染

Vue 3 提供了一个官方的服务器端渲染方案，可以将Vue应用程序渲染成HTML字符串，并在服务器端生成静态HTML文件。Vue 3 的服务器端渲染采用了一些新的特性，如Composition API和Teleport等，可以更好地支持服务器端渲染的需求。

1.3 Vue 3 服务器端渲染的优势和劣势

Vue 3 服务器端渲染的优势包括：

  • 提高页面加载速度：由于服务器端已经将页面渲染成HTML字符串，客户端只需要下载和解析HTML即可展示页面，而无需等待JavaScript代码下载和执行。
  • 改善SEO效果：搜索引擎爬虫可以直接抓取服务器端渲染后的HTML页面，提高了网站在搜索引擎中的排名。
  • 提高用户体验：页面渲染速度更快，用户能够更快地看到内容，减少了等待时间。

Vue 3 服务器端渲染的劣势包括：

  • 服务器端渲染的实现较为复杂，需要对服务器端的运行环境、路由配置、数据获取和CSS处理等方面进行特别的考虑和处理。
  • 服务器端渲染的性能消耗较大，需要消耗更多的服务器资源。

二、Vue 3 服务器端渲染的基础

2.1 服务器端渲染的基础配置

在进行 Vue 3 服务器端渲染之前，需要进行一些基础配置，包括安装相关的依赖和设置一些基本的配置项。下面是一些常用的服务器端渲染配置：

  1. 安装依赖

在进行服务器端渲染之前，需要安装相关的依赖。可以使用以下命令来安装依赖：

npm install vue vue-server-renderer express

其中，vue 是 Vue 3 的核心库，vue-server-renderer 是服务器端渲染相关的库，express 是一个常用的 Node.js Web 框架。

  1. 配置服务器端入口文件

创建服务器端入口文件 server.js，该文件中包含服务器的基本配置和路由处理。以下是一个基本的服务器端入口文件示例：

const express = require('express')
const { createSSRApp } = require('vue')
const { renderToString } = require('@vue/server-renderer')

const app = express()

// 服务器端路由处理
app.get('*', async (req, res) => {
  // 创建应用实例
  const app = createSSRApp({
    // 应用程序选项
  })

  try {
    // 渲染应用程序
    const html = await renderToString(app)
    res.send(html)
  } catch (err) {
    res.status(500).send('Internal Server Error')
  }
})

// 启动服务器
app.listen(3000, () => {
  console.log('Server running at http://localhost:3000')
})

在该示例中，我们使用 Express 框架来创建了一个基本的服务器，并对所有的请求进行了路由处理。当收到请求时，服务器会创建一个应用实例，然后使用 renderToString 方法将应用渲染成 HTML 字符串，并将其发送回客户端。

  1. 配置客户端入口文件

创建客户端入口文件 client.js，该文件包含了客户端的基本配置和路由处理。以下是一个基本的客户端入口文件示例：

import { createApp } from 'vue'
import App from './App.vue'

// 创建应用实例
const app = createApp(App)

// 启动应用
app.mount('#app')

在该示例中，我们使用 Vue 3 的 createApp 方法来创建一个应用实例，并使用 mount 方法将其挂载到 HTML 页面中。

2.2 使用 Vite 进行服务器端渲染

Vite 是一个基于浏览器原生 ES imports 开发的前端构建工具，它能够实现快速的冷启动和热更新，同时支持服务器端渲染。

在使用 Vite 进行服务器端渲染时，我们需要按照以下步骤进行配置：

  1. 安装相关依赖
bashCopy code
npm install vite vue-server-renderer express

其中，vite 是 Vite 的核心依赖，vue-server-renderer 是 Vue 3 服务器端渲染的核心依赖，express 则是用于搭建服务器的依赖。

  1. 创建 Vite 配置文件

在项目根目录下创建一个名为 vite.config.js 的文件，用于配置 Vite 的相关参数。具体配置可以参考 Vite 官方文档进行设置。

const { createServer: createViteServer } = require('vite')
const { createRenderer } = require('vue-server-renderer')
const express = require('express')

const app = express()

const isProd = process.env.NODE_ENV === 'production'

async function createServer() {
  const viteServer = await createViteServer({
    server: {
      middlewareMode: true,
    },
  })

  app.use(viteServer.middlewares)

  const renderer = createRenderer({
    template: `<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>{{ title }}</title>
    </head>
    <body>
      <!--vue-ssr-outlet-->
      <script src="/@vite/client"></script>
      <script src="/src/entry-server.js"></script>
    </body>
    </html>
    `,
  })

  app.get('*', async (req, res) => {
    const context = {
      url: req.url,
      title: 'Vue 3 SSR',
    }

    try {
      const html = await renderer.renderToString(context)
      res.send(html)
    } catch (err) {
      console.error(err)
      res.status(500).send('Internal Server Error')
    }
  })

  app.listen(3000, () => {
    console.log('Server running at http://localhost:3000')
  })
}

createServer()

上述代码中，我们首先引入了相关依赖，然后创建了一个 Express 应用程序实例。在应用程序中，我们使用 Vite 的 middlewares 中间件来处理静态资源文件的请求。接着，我们创建了一个 Vue 3 服务器端渲染的渲染器实例，并在 Express 应用程序中创建了一个处理所有路由的处理程序。当请求到来时，我们将请求的 URL 以及页面标题传递给渲染器实例进行页面渲染，最终将渲染结果发送给客户端。

  1. 创建入口文件

创建入口文件的步骤如下：

  1. 在项目根目录下创建一个名为 entry-server.js 的文件，该文件将用于服务器端渲染的入口。
  2. 在 entry-server.js 中导入 createApp 函数和根组件。
  3. 创建一个函数 renderToString，该函数将用于渲染页面。
  4. 创建一个函数 createServerRenderer，该函数将返回一个对象，其中包含一个函数 renderToString，这个函数将在服务器端使用。
  5. 导出 createServerRenderer 函数。

下面是示例代码：

// entry-server.js

import { createApp } from './app'
import { renderToString } from '@vue/server-renderer'

const { app, router } = createApp()

function renderToStringWithRouter(url) {
  router.push(url)
  return renderToString(app)
}

export default function createServerRenderer() {
  return {
    renderToString: renderToStringWithRouter
  }
}

在该示例中，我们使用 @vue/server-renderer 中的 renderToString 函数进行渲染。我们还定义了一个名为 createServerRenderer 的函数，并将其导出。该函数返回一个对象，其中包含一个名为 renderToString 的函数。在这个示例中，我们创建了一个名为 renderToStringWithRouter 的函数，该函数在渲染之前调用路由器来设置正确的路由状态。

值得注意的是，在实际项目中，createApp 函数可能会包含其他的插件和组件，具体的内容根据项目的需求而定。

三、Vue 3 服务器端渲染实践

3.1 服务器端渲染的基本步骤

在 Vue 3 中进行服务器端渲染的基本步骤如下：

  1. 创建一个 Vue 实例，并将其挂载到一个空的 HTML 模板中。
  2. 根据路由地址获取需要渲染的组件。
  3. 调用组件的 asyncData 方法获取组件需要的数据。
  4. 将获取到的数据通过 props 传递给组件。
  5. 在服务器端使用 renderToString 方法将 Vue 实例渲染为字符串。
  6. 将渲染后的 HTML 字符串发送给客户端。

3.2 服务器端渲染中的路由处理

在服务器端渲染中，路由处理需要特殊注意，因为服务器端的路由与客户端的路由是不一样的。在服务器端渲染中，需要根据请求的路由地址获取对应的组件并进行渲染。

为了实现服务器端的路由处理，可以使用 Vue Router 提供的 createRouter 方法和 createMemoryHistory 方法来创建路由实例和路由历史实例。创建完路由实例和路由历史实例后，可以使用 router.push 方法来根据请求的路由地址进行路由跳转，并获取需要渲染的组件。

import { createMemoryHistory, createRouter } from 'vue-router'

const routes = [
  // 定义路由规则
  // ...
]

// 创建路由实例和路由历史实例
const router = createRouter({
  history: createMemoryHistory(),
  routes
})

// 在服务器端通过路由跳转获取需要渲染的组件
router.push(context.url)

3.3 服务器端渲染中的数据获取

在客户端渲染中，通常使用异步请求来获取组件需要的数据。但在服务器端渲染中，由于没有浏览器环境，无法使用异步请求，需要使用另外的方式来获取数据。

为了解决这个问题，可以在组件中定义一个 asyncData 方法，该方法返回一个 Promise 对象，在服务器端渲染时调用该方法来获取组件需要的数据。在调用 asyncData 方法时，需要传递路由参数和 store 实例，以便在方法中使用。

import { createStore } from 'vuex'

const store = createStore({
  // ...
})

export default {
  // ...
  async asyncData({ params, store }) {
    await store.dispatch('fetchData', params.id)
  }
}

3.4 服务器端渲染中的 CSS 处理

在服务器端渲染中，需要注意 CSS 的处理，因为在客户端渲染中，浏览器会自动加载和解析 CSS，但在服务器端渲染中，没有浏览器环境，需要手动处理 CSS。

为了解决这个问题，可以使用一些工具来处理 CSS，如使用 vue-server-renderer 提供的 renderStyles 方法来生成 CSS 字符串，并在 HTML 模板中添加 <style> 标签来引入 CSS。

import { createSSRApp, renderToString } from 'vue'
import { renderStyles } from '@vue/server-renderer'

const app = createSSRApp(App)

// 渲染 Vue 实例为字符串
const html = await renderToString(app)

// 生成 CSS 字符串
const css = await renderStyles()

// 在 HTML 模板中添加 CSS
const finalHtml = `
  <html>
    <head>
      <style>${css}</style>
    </head>
    <body>${html}</body>
  </html>
`

除此之外，还可以使用一些 CSS 预处理器或者 CSS-in-JS 的方式来处理 CSS。例如，可以使用 sass-loader 来编译 SASS 文件，并将生成的 CSS 字符串添加到 HTML 模板中。另外，还可以使用 CSS-in-JS 的库如 styled-components 来在组件内定义样式，并在服务器端渲染时生成对应的 CSS 字符串。

3.5 服务器端渲染中的性能优化

以下是在Vue 3服务器端渲染中进行性能优化的几个步骤：

  1. 使用异步组件：在Vue 3中，可以使用 defineAsyncComponent 方法来定义异步组件。当组件被渲染时，该方法会返回一个Promise对象，组件将在该Promise对象解析后渲染。这可以减少初始加载的文件大小和组件的数量。
  2. 缓存组件：在服务器端渲染中，组件的重复渲染是常见的情况。为了避免重复渲染，可以使用缓存技术来缓存已经渲染的组件，以便在后续请求中重复使用。
  3. 优化数据获取：在服务器端渲染中，由于没有浏览器环境，无法使用异步请求来获取数据。因此，在获取数据时，需要尽可能地减少数据请求的次数，可以通过将多个数据请求合并为一个请求，或使用缓存来减少数据请求的次数。
  4. 优化CSS：在服务器端渲染中，需要特别注意CSS的处理，因为在服务器端渲染中，CSS是同步加载的。为了避免CSS阻塞渲染，可以将CSS提取为独立的文件，或使用内联CSS。
  5. 使用CDN：使用CDN可以提高静态文件的加载速度，并减少服务器负载。可以将静态文件存储在CDN上，并在服务器端渲染中使用CDN链接来加载静态文件。

四、Vue 3 服务器端渲染最佳实践

4.1 服务器端渲染的最佳实践

以下是服务器端渲染的最佳实践：

  1. 使用异步组件和动态导入来减小打包文件的大小，提高服务器端渲染的性能。
  2. 服务器端渲染需要特别注意内存泄漏问题，要及时释放不再使用的组件、实例和资源。
  3. 避免使用浏览器 API 和 DOM 操作，因为在服务器端没有浏览器环境。
  4. 避免在服务器端渲染中使用全局变量，因为不同请求之间共享同一个全局变量可能会导致意外的问题。
  5. 避免在服务器端渲染中使用单例模式，因为单例模式会导致不同请求之间共享同一个实例，可能会导致意外的问题。

4.2 在 Vue 3 中的服务器端渲染最佳实践

以下是在 Vue 3 中的服务器端渲染的最佳实践：

  1. 使用 @vue/server-renderer 包提供的 createRenderer 方法来创建服务器端渲染实例。
  2. 使用 createMemoryHistory 方法来创建路由历史实例，使用 createRouter 方法来创建路由实例。
  3. 在服务器端渲染中使用 asyncData 方法来获取组件需要的数据。
  4. 在服务器端渲染中使用 onBeforeRender 方法来进行一些操作，例如初始化一些全局变量。
  5. 使用 @vue/server-renderer 包提供的 renderToString 和 renderToStream 方法来将 Vue 实例渲染为字符串或流。

五、Vue 3 服务器端渲染常见问题及解决方案

5.1 如何处理异步数据

在服务器端渲染中，由于没有浏览器环境，无法使用异步请求。为了解决这个问题，可以在组件中定义一个 asyncData 方法，该方法返回一个 Promise 对象，在服务器端渲染时调用该方法来获取组件需要的数据。在调用 asyncData 方法时，需要传递路由参数和 store 实例，以便在方法中使用。在客户端渲染时，可以在组件的 mounted 钩子函数中获取数据。

5.2 如何处理动态路由

在服务器端渲染中，动态路由需要特殊处理。需要在服务器端通过路由跳转获取需要渲染的组件，并将路由参数传递给组件。可以使用 Vue Router 提供的 createRouter 方法和 createMemoryHistory 方法来创建路由实例和路由历史实例，在服务器端通过路由跳转获取需要渲染的组件。

5.3 如何处理样式

在服务器端渲染中，需要将组件的样式打包成一个 CSS 文件，并在 HTML 模板中引入。可以使用 Vue CLI 提供的插件 @vue/cli-plugin-ssr 来自动化配置服务器端渲染的样式处理。该插件会将组件的样式提取出来，打包成一个 CSS 文件，并在 HTML 模板中引入该文件。

5.4 如何处理状态管理

在服务器端渲染中，由于每个请求都是一个新的实例，所以需要将状态管理实例在每个请求中重新创建。可以在服务器端创建一个新的状态管理实例，并将其传递给组件。在客户端渲染时，可以将服务器端传递的状态合并到客户端状态中。

5.5 如何处理 SEO

在服务器端渲染中，由于 HTML 是由服务器端生成的，所以可以在服务器端设置 HTML 的一些 SEO 相关的标签，例如 title、meta 等。可以在 Vue 3 中使用 createHead 方法来创建一个头部管理实例，在组件中使用该实例来设置 HTML 的头部标签。在服务器端渲染时，可以将头部标签的内容添加到 HTML 模板中。
在这里插入图片描述

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

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

相关文章

【SpringBoot实践】Web请求中日期字符串与LocalDate、LocalDateTime的通用转换

【SpringBoot实践】Web请求中日期字符串与LocalDate、LocalDateTime的通用转换

1.背景 最近在做一个后台项目&#xff0c;在这个项目中涉及到了多种与日期相关的请求参数&#xff0c;在请求对象中使用了LocalDate与LocalDateTime两个日期类型。通过日期字符串与前端进行交互&#xff0c;也包含两种格式&#xff1a;yyyy-MM-dd HH:mm:ss与yyyy-MM-dd。 在以…
阅读更多...
STM32 学习笔记_5 调试方法；外部中断

STM32 学习笔记_5 调试方法；外部中断

调试 OLED&#xff1a;方便&#xff0c;试试更新&#xff0c;但是显示框小。 串口&#xff1a;数据全&#xff0c;但是带电脑不方便。 MDK 自带 debug OLED 调试 4个引脚的&#xff1a;3.3~5V 电压&#xff0c;地&#xff0c;SCL SDA 的 IIC。 我们把 GND-VCC-SCL-SDA 接…
阅读更多...
微信小程序国际化

微信小程序国际化

参考文件: 国际化&#xff08;微信小程序TS 微信小程序国际化 一、环境目录 注意:一定要注意项目目录结构&#xff0c;新建文件夹miniprogram&#xff0c;并把前面新建的文件移到这个目录中 二、安装根目录依赖 在NEW-FAN-CLOCK1 中安装根目录依赖 npm i -D gulp minipro…
阅读更多...
provide和inject，Teleport，Fragment

provide和inject，Teleport，Fragment

作用:实现祖孙组件间通信 套路:父组件有一个provide选项来提供数据&#xff0c;子组件有一个inject选项来开始使用这些数据 父组件 只要provide了&#xff0c;那么后代都能拿到&#xff0c;父子之间一般使用props&#xff0c;祖孙组件一般采用provide 响应式数据判断 isRef:…
阅读更多...
TIA博途中文本列表的具体使用方法介绍与示例

TIA博途中文本列表的具体使用方法介绍与示例

TIA博途中文本列表的具体使用方法介绍与示例 一、 文本列表的概念 应用场景：设备的当前操作模式、当前的运行流程、当前的运行状态等 功能介绍：  根据信号数值的不同，显示不同的文本  通过下拉列表选择不同的文本给变量赋值  通过文本列表实现配方元素数值的选择输入…
阅读更多...
直播系统开发中如何优化API接口的并发

直播系统开发中如何优化API接口的并发

概述 在直播系统中&#xff0c;API接口并发的优化是非常重要的&#xff0c;因为它可以提高系统的稳定性和性能。本文将介绍一些优化API接口并发的方法。 理解API接口并发 在直播系统中&#xff0c;API接口是用于处理客户端请求的关键组件。由于许多客户端同时连接到系统&…
阅读更多...
云计算与多云混合云架构的比较与选择

云计算与多云混合云架构的比较与选择

第一章&#xff1a;引言 随着互联网的迅速发展&#xff0c;云计算逐渐成为了一个热门话题。而随着企业的不断发展&#xff0c;多云混合云架构逐渐成为了一种重要的技术架构。本文将从中国国内资深IT专家的角度&#xff0c;对云计算和多云混合云架构进行比较和选择的分析&#…
阅读更多...
IPSec数据报文封装格式详解

IPSec数据报文封装格式详解

以下遵循GMT 0022-2014 IPSec VPN 技术规范。 IPsec提供两种封装协议AH&#xff08;鉴别头&#xff0c;Authentication Header&#xff09;和ESP&#xff08;封装安全载荷&#xff0c;Encapsulation Security Payload&#xff09;。 AH可以提供无连接的完整性、数据源鉴别和抗重…
阅读更多...
Linux 进程通讯 - 共享内存机制

Linux 进程通讯 - 共享内存机制

共享内存机制&#xff0c;就是在物理内存中划分一段内存&#xff0c;多个进程间可以共同访问这段内存&#xff0c;也可对这段内存做修改操作&#xff0c;从而达到进程通讯的效果&#xff01; 共享内存机制是允许两个或多个进程&#xff08;不相关或有亲缘关系&#xff09;访问…
阅读更多...
JavaWeb02(servlet)

JavaWeb02(servlet)

目录 一.servlet 1.1 什么是servlet? 1.2 实现接口,初始代码 1.3 学会配置和映射 1.4 掌握servlet的生命周期 生命周期的各个阶段 1.5 获取servlet初始化参数和上下文参数 1.5.1 初始代码 推荐使用 1.5.2 初始化参数 1.5.3 上下文参数 1.6 servlet应用:处理用户登…
阅读更多...
融云 CTO 岑裕：出海技术前沿探索和排「坑」实践

融云 CTO 岑裕：出海技术前沿探索和排「坑」实践

在本文中&#xff0c;你将看到以下内容&#xff1a; 全球通信网络在接入点、链路加速、服务商、协议等层面的动态演进&#xff1b; 进入到具体市场&#xff0c;禁运国、跨国拦截、区域一致性差等细节“坑点”如何应对&#xff1b; 融云如何从技术侧帮助开发者应对本地化用户体…
阅读更多...
首发支持NOA的单征程3行泊一体域控，这家Tier1开“卷”

首发支持NOA的单征程3行泊一体域控，这家Tier1开“卷”

NOA正成为智能驾驶下半场的竞争焦点之一。 显然&#xff0c;NOA所处的L2/L2区间&#xff0c;在技术上仍然属于驾驶辅助领域&#xff0c;但在传统L2级ADAS功能的基础上增强了部分场景的功能ODD。在部分政策允许的国家和地区&#xff0c;可以实现有条件的「解放双手」。 高工智…
阅读更多...
centos搭建vue3运行环境

centos搭建vue3运行环境

一、安装 nodejs 1.下载&解压 Node.js官网&#xff1a;Download | Node.js cd /usr/local/src/wget -c https://nodejs.org/dist/v16.18.1/node-v16.18.1-linux-x64.tar.xz xz -d node-v16.18.1-linux-x64.tar.xz tar -xf node-v16.18.1-linux-x64.tarmv node-v…
阅读更多...
threejs学习随笔（入门篇）

threejs学习随笔（入门篇）

前言&#xff1a;three.js和webgl Three.js经常会和WebGL混淆&#xff0c; 但也并不总是&#xff0c;three.js其实是使用WebGL来绘制三维效果的。 WebGL是一个只能画点、线和三角形的非常底层的系统. 想要用WebGL来做一些实用的东西通常需要大量的代码&#xff0c; 这就是Thre…
阅读更多...
C语言函数大全-- p 开头的函数

C语言函数大全-- p 开头的函数

C语言函数大全 本篇介绍C语言函数大全-- p 开头的函数 1. perror 1.1 函数说明 函数声明函数功能void perror(const char *s);用于将当前错误码对应的错误信息打印到标准输出设备&#xff08;通常是终端&#xff09;。 参数&#xff1a; s &#xff1a; 用于描述错误类型或…
阅读更多...
班级页面设计——【3-相关活动页面】内容使用HTML以及css和Javascripts技术

班级页面设计——【3-相关活动页面】内容使用HTML以及css和Javascripts技术

系列文章目录 班级页面设计——【1-登陆注册页面】_网页制作实现登录注册 班级页面设计——【2-主界面部分】_班级首页展示 文章目录 系列文章目录 前言 一、页面效果介绍 1.1、页面展示 1.2、简单介绍 二、代码展示部分 2.1、html代码部分 2.2、css代码部分 前言 …
阅读更多...
C++（继承中）

C++（继承中）

目录&#xff1a; 1.基类和派生类对象赋值转换 2.派生类当中的6个默认成员函数 --------------------------------------------------------------------------------------------------------------------------- 派生类对象可以赋值给 基类的对象/基类的指针/基类的引用&am…
阅读更多...
“量子计算+个性化医疗”！富士通和BSC利用张量网络推进新研究

“量子计算+个性化医疗”！富士通和BSC利用张量网络推进新研究

​ &#xff08;图片来源&#xff1a;网络&#xff09; 富士通和巴塞罗那超级计算中心(BSC)正在签署一项合作协议&#xff0c;通过利用临床数据促进个性化医疗&#xff0c;并使用张量网络推进量子模拟技术。 双方将于2023年5月开始联合研究&#xff0c;第一个合作项目旨在利用不…
阅读更多...
CSGO搬砖，每天1-2小时，23年最强副业非它莫属（内附操作流程）

CSGO搬砖，每天1-2小时，23年最强副业非它莫属（内附操作流程）

自从我学会了CSGO搬运&#xff0c;我发现生活也有了不小的改变&#xff0c;多了一份收入&#xff0c;生活质量也就提高了一份。 其实刚接触CSGO&#xff0c;我压根就不相信这么能挣钱&#xff0c;因为在印象中&#xff0c;游戏供玩家娱乐竞技的&#xff0c;作为我这种技术渣渣…
阅读更多...
VUE3如何定义less全局变量

VUE3如何定义less全局变量

默认已经安装好了less&#xff0c;这里不过多讲。 &#xff08;1&#xff09;首先我们需要下载一个插件依赖&#xff1a; npm i style-resources-loader --save-dev &#xff08;2&#xff09;VUE3里配置vue.config.js文件内容 代码&#xff1a; const path require("p…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023