Vue3 路由
Vue3 的路由系统 vue-router 是构建单页面应用（SPA）的核心工具，支持 hash 和 history 两种工作模式，提供无刷新的 URL 变化。它允许通过字符串路径或路径对象两种方式定义路由链接，并且支持嵌套路由来创建分层视图结构。vue-router 提供了灵活的路由传参机制，包括 query 参数和 params 参数，以及通过 props 配置直接将路由参数传递给组件的能力。replace 方法和属性使得在不添加新历史记录条目的情况下进行导航成为可能，而编程式路由导航则允许开发者通过 JavaScript 代码控制页面跳转，结合导航守卫实现复杂的导航逻辑。 综上，vue-router 不仅功能丰富，灵活高效，而且通过组合式 API 和简洁的设计，简化了路由管理和导航控制，适用于从简单到复杂的各种 Web 应用程序开发需求。 概述在 Vue 框架中，路由（route）是指一组键值对（key-value）的关系，它将 URL 路径与特定的组件关联起来。多个路由规则通常由一个称为路由器（router）的管理器来处理，这个管理器负责根据当前的 URL...
Vue3 学习笔记
记录一下 Vue3 的学习笔记。 Vue3 核心语法点击跳转 至 Vue3 核心语法 Vue3 路由点击跳转 至 Vue3 路由
Vue3 核心语法
Vue3 核心语法围绕响应式系统、组件化开发和组合式 API 创建，通过 <script setup> 简化模板编写，利用 ref 和 reactive 实现数据的响应式绑定，借助 computed 和 watch 处理派生数据和副作用。此外，Vue3 引入了更强大的生命周期钩子，大幅提升了开发效率和应用性能。 OptionsAPI 与 CompositionAPI Vue2 的 API 设计是 Options （配置）风格的 Vue3 的 API 设计师 Composition （组合）风格的 Options API 用于 Vue2 及之前的版本，通常用于组织 Vue 组件的代码。Options API 将一个组件分割成了几个部分，如data、computed、methods、watch等，使得组件的逻辑可以分而治之，易于理解和维护。但随着项目的复杂度增加，Options API 逐渐显示出一些不足之处，如代码重复、逻辑难以复用等。 Composition API 是 Vue3 引入的全新特性，它使用一种全新的方式来组织 Vue 组件的代码。与 Options...
Hexo 添加看板娘
在 Butterfly 主题下，使用 live2d 插件在右下角添加白猫。 首先安装模块，输入以下命令安装必要插件： 1npm install --save hexo-helper-live2d 安装白猫模型： 1npm install live2d-widget-model-tororo 打开站点配置文件 config.yml，搜索 live2d，按照如下注释内容指示进行操作： 1234567891011121314151617181920212223242526# Live2D## https://github.com/EYHN/hexo-helper-live2dlive2d: enable: true scriptFrom: local # 默认 pluginModelPath: assets/ # 模型文件相对与插件根目录路径 model: use: live2d-widget-model-tororo # 模型名字 scale: 1 hHeadPos: 0.5 vHeadPos: 0.618 display: ...
Hexo 侧边栏添加文章合集
教程链接：Hexo侧边栏添加文章合集 侧边栏添加文章合集模块，可以提供一个系列文章的整体展示，便于导航到一个具体的内容 首先，在 \themes\butterfly\layout\includees\widget 目录下新建 card_collections.pug 文件，并写入： 12345678if theme.aside.card_collections.enable .card-widget .item-headline i(class=theme.aside.card_collections.icon) span=theme.aside.card_collections.title each item in site.data.collections.collections .collections-item-content a(href=item.url)=item.name 在 \themes\butterfly\layout\includees\widget\index.pug 文件中 page...
Hexo 小标题旋转风车设置
教程链接：Hexo小标题旋转风车设置 找到主题配置文件 _config.butterfly.yml 把 beautify 的 title-prefix-icon 处修改为 \f863 123beautify: enable: true title-prefix-icon: '\f863' 在 inject 的 head 处引入以下文件： 123inject: head: - "<style>#article-container.post-content h1:before, h2:before, h3:before, h4:before, h5:before, h6:before { -webkit-animation: avatar_turn_around 1s linear infinite; -moz-animation: avatar_turn_around 1s linear infinite; -o-animation: avatar_turn_around 1s linear infinite;...
Hexo 添加雪花动态效果背景
教程链接：Hexo添加雪花动态效果背景 首先在 source/styles/js 目录下新建一个 snowflake.js 文件，然后将以下内容写入该文件，然后将以下内容写入该文件： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { //...
Hexo 魔改记录
记录一下 Hexo 魔改过程，方便版本升级时快速修复 Hexo 添加看板娘点击跳转 至 Hexo 添加看板娘 Hexo 侧边栏添加文章合集点击跳转 至 Hexo 侧边栏添加文章合集 Hexo 小标题旋转风车设置点击跳转 至 Hexo 小标题旋转风车设置 Hexo 添加雪花动态效果背景点击跳转 至 Hexo 添加雪花动态效果背景 Hexo 修改字体点击跳转 至 Hexo 修改字体 Hexo 修改鼠标样式点击跳转 至 Hexo 修改鼠标样式
docker 容器备份与迁移
有时在 docker 中产生的数据，我们需要进行相应的备份和迁移到另一台服务器上，并在另一台服务器上进行数据恢复，docker 容器备份与迁移是在 docker 的镜像层级操作，我们介绍了三种容器备份与迁移的方法： 离线迁移 DockerHub 私有镜像仓库 首先我们需要将需要备份的容器打包成镜像。假设我们有一个容器，名为 nvidia/cuda:11.6.0-cudnn8-devel-ubuntu18.04，首先停止容器： 1docker stop nvidia_cuda 使用 docker commit 命令将该容器打包成镜像 1docker commit -m "nvidia_cuda" nvidia_cuda my_container:1.0 可以看到我们生成的镜像信息，已成功制作镜像 my_container:1.0 离线迁移镜像文件经常有在服务器之间传输的需求，为此 docker 提供了镜像打包和镜像加载的命令，docker save 命令可将镜像打包成 tar 压缩文件，使用示例 1docker save -o...
docker 基础
docker 是一个基于 Go 语言开发的开源容器化平台，旨在通过轻量级、可移植的容器技术加速应用程序的交付并提高资源利用率。它秉承“构建一次，运行任何地方”的理念，利用 Linux 内核特性如命名空间（Namespaces）和控制组（Control Groups, cgroups）实现高效的资源隔离与限制，确保每个容器拥有独立的运行环境。docker 提供了一系列工具来简化应用的打包、分发和部署过程。例如，Dockerfile 定义了应用及其依赖的构建指令，而 Docker Compose 则允许用户定义和管理多容器应用的服务。这种设计使得开发者可以轻松创建出轻量、便携且自包含的容器，极大提升了开发效率和应用的一致性。 应用容器（Application Container） 是 docker 的专业术语，指的是一种轻量级、自包含的软件包，它包含了应用程序及其所有依赖项，可以在任何环境中一致地运行。docker 容器的设计初衷就是为了让开发者能够“构建一次，运行任何地方”，即无论是在开发者的笔记本电脑、测试服务器还是生产环境，容器化应用的行为都是一致的。 总结来说，docker...
