Nuxt.js 提供了强大的功能来构建和优化现代 Web 应用。nuxi generate 命令是 Nuxt 的一部分，用于预渲染你的应用程序，并将结果存储为静态 HTML 文件。这使得你可以将应用程序部署到任何静态托管服务上。什么是 nuxi generate？nuxi generate 命令用于预渲染你的 Nuxt 应用程序的每个路由，并将这些页面保存为静态的 HTML 文件。这种静态生成方法可以提高页面加载速度，并允许你将应用程序部署到静态托管服务，如 GitHub Pages、Netlify 或 Vercel。安装 Nuxt 和准备项目确保你已经在机器上安装了 Node.js 和 Nuxt。如果还没有，你可以通过以下步骤进行安装：安装 Node.js：访问 Node.js 官方网站 下载并安装 Node.js。创建 Nuxt 项目：使用以下命令创建一个新的 Nuxt 应用：npx nuxi@latest init my-nuxt-app按照提示选择适合你的选项，完成项目创建后，进入项目目录：cd my-nuxt-app使用 nuxi generatenuxi generate 命令用于生成静态 HTML 文件。默认情况下，它会渲染你的应用程序中的所有路由并将其保存为 HTML 文件。这些文件可以被部署到任何静态托管服务上。运行命令在你的 Nuxt 项目目录中，运行以下命令来生成静态文件：npx nuxi generate这会执行预渲染并将生成的 HTML 文件保存在 ./dist 目录中。nuxi generate 实际上会调用 nuxi build 并将 prerender 参数设置为 true。使用其他选项指定根目录：如果你的应用程序不在当前目录中，你可以指定根目录。例如：npx nuxi generate /path/to/your/app加载自定义环境文件：使用 --dotenv 选项来指定另一个 .env 文件：npx nuxi generate --dotenv .env.production部署静态文件生成的静态 HTML 文件将保存在 ./dist 目录中。你可以将这些文件部署到静态托管服务上。以下是一些常见的静态托管服务及其部署步骤：部署到 GitHub Pages安装 gh-pages 工具：npm install --save-dev gh-pages添加部署脚本：在 package.json 中添加部署脚本："scripts": { "deploy": "gh-pages -d dist" }运行部署命令：npm run deploy部署到 Netlify登录 Netlify，并点击 “New site from Git”。选择你的 Git 仓库，并按照提示完成部署设置。设置发布目录 为 dist。部署到 Vercel登录 Vercel，并点击 “New Project”。选择你的 Git 仓库，并按照提示完成部署设置。设置输出目录 为 dist。总结通过 nuxi generate 命令，你可以轻松地将 Nuxt 应用程序预渲染为静态 HTML 文件，并将其部署到任何静态托管服务。这种方法可以提高应用程序的性能和安全性，特别适用于那些需要快速加载的应用。转载自https://www.cnblogs.com/Amd794/p/18396203

Nuxt Devtools 是一个强大的开发工具，可以帮助你深入了解和调试 Nuxt 应用。自动安装您只需转到您的文件并设置为 ：nuxt.config``devtools``truenuxt.config.tsexport default defineNuxtConfig({ devtools: { enabled: true }, })Nuxt 将自动为您安装 DevTools 模块。使用 Nuxi 安装您可以通过转到项目根目录并运行以下内容来选择每个项目的 Nuxt DevToolsnpx nuxi@latest devtools enable重新启动您的 Nuxt 服务器并在浏览器中打开您的应用程序。单击底部的 Nuxt 图标（或按 + / + + ）以切换 DevTools。Shift``Alt``⇧ Shift``⌥ Option``D如果你使用或其他 Node 版本管理器，我们建议在切换 Node 版本后再次执行 enable 命令。nvm同样，您可以通过运行以下命令来按项目禁用它：npx nuxi@latest devtools disable手动安装Nuxt DevTools 目前作为一个模块提供（将来可能会更改）。如果您愿意，您也可以将其安装在本地，它将为您的所有团队成员激活。npm i -D @nuxt/devtoolsnuxt.config.tsexport default defineNuxtConfig({ modules: [ '@nuxt/devtools', ], })Nuxt Devtools 主要功能1. 概述概述选项卡提供应用程序的快速视图。你可以看到 Nuxt 和 Vue 的版本，页面、组件、导入、模块及插件等信息，以及应用的加载时间。如果你使用的 Nuxt 版本不是最新的，概述页面会提示你更新。2. 页面（Pages）Pages 选项卡展示了当前的路由、布局和中间件信息。你可以快速导航到不同页面，并使用文本框查看每个路由的匹配方式。3. 组件（Components）Components 选项卡显示应用中使用的所有组件及其来源。你可以搜索组件并查看其源代码。此外，还有一个 Graph 视图，显示组件间的关系及其依赖关系。通过检查 DOM 树，你还可以轻松找到渲染某个 DOM 元素的组件。4. 导入（Imports）Imports 选项卡展示了所有自动导入的文件。你可以查看哪些文件导入了这些模块，并访问相关文档。5. 模块（Modules）Modules 选项卡列出了所有已安装的模块，包括模块的 GitHub 仓库、文档和版本信息。你还可以一键安装或删除模块。6. 资产（Assets）Assets 选项卡显示 Public 目录中的文件。你可以查看文件信息并进行拖放上传。7. 终端（Terminals）Terminals 选项卡展示了所有活动的终端进程，方便你管理和监控后台任务。8. 运行时配置（Runtime Config）Runtime Config 选项卡显示项目的运行时配置，并允许你进行编辑。9. 数据负载（Payload）Payloads 选项卡展示项目的状态和数据负载，帮助你检查应用的数据流。10. 构建分析（Build Analyze）Build Analyze 选项卡允许你运行构建分析，查看项目的捆绑包大小，并保存报告以便比较不同构建的大小。11. Open GraphOpen Graph 选项卡帮助你进行 SEO 优化。它展示了社交媒体预览卡，并提供缺失的 SEO 标签和代码片段。12. 插件（Plugins）Plugins 选项卡显示项目中使用的插件及其初始化时间等信息。13. 服务器路由（Server Routes）Server Routes 选项卡显示所有 Nitro 路由，并提供一个测试端点的工具。14. 存储（Storage）Storage 选项卡展示了项目中的 Nitro 存储，你可以创建、编辑和删除文件。15. VS Code 服务器（VS Code Server）VS Code Server 集成使你可以在浏览器中使用 VS Code 编辑和调试 Nuxt 项目。请遵循 Code Server 安装指南 来进行设置。16. 钩子（Hooks）Hooks 选项卡帮助你监控每个钩子的执行时间，找到性能瓶颈。17. 虚拟文件（Virtual Files）Virtual Files 选项卡显示 Nuxt 为支持约定生成的虚拟文件。18. 检查（Inspect）Inspect 选项卡允许你检查 Vite 的转换步骤。19. 设置（Settings）Settings 选项卡让你根据需要配置 DevTools，例如隐藏选项卡、调整顺序、选择主题等。20. Nuxt 图标（Nuxt Icon）Nuxt 图标位于 DevTools 左上角，点击它可以快速访问一些常用功能，如主题切换、数据刷新等。21. 命令面板（Command Palette）命令面板提供了快速访问 DevTools 功能的方法。你可以使用 Ctrl+K 或 Cmd+K 快捷键打开它。22. 分屏（Split Screen）分屏功能允许你同时使用多个选项卡。点击 DevTools 左上角的图标来启用。23. 弹出窗口（Popup）弹出窗口功能适用于双屏显示的用户，可以通过点击 DevTools 左上角的图标来打开它。示例：如何使用 Nuxt Devtools启动 Devtools启动你的 Nuxt 应用，然后在浏览器中打开 Devtools。例如，你可以在 http://localhost:3000 的 Nuxt 应用中打开 Devtools。查看页面点击 “Pages” 选项卡，你会看到所有的路由列表。选择一个路由，查看它的布局和中间件信息，并使用文本框检查路由匹配情况。检查组件在 “Components” 选项卡中，你可以看到应用中的所有组件及其来源。点击 Graph 视图，了解组件间的关系和依赖。分析构建转到 “Build Analyze” 选项卡，点击 “Run Analyze” 来查看构建的捆绑包大小，并比较不同构建的报告。优化 SEO在 “Open Graph” 选项卡中，查看页面的社交媒体预览卡，并添加缺失的 SEO 标签。通过利用 Nuxt Devtools 的这些功能，你可以更高效地开发、调试和优化你的 Nuxt 应用。转载自https://www.cnblogs.com/Amd794/p/18395041

在 Nuxt 项目的开发过程中，可能会遇到由于缓存或生成文件导致的各种问题。nuxi clean 命令是一个有用的工具，它可以帮助你快速清理项目中的生成文件和缓存，确保你的开发环境干净整洁。什么是 nuxi clean？nuxi clean 命令用于删除 Nuxt 项目中的常见生成文件和缓存。这些文件和缓存可能会在开发过程中累积，导致不必要的占用磁盘空间或者潜在的构建问题。使用 nuxi clean 可以帮助你恢复到一个干净的状态，从而避免一些常见的问题。基本用法npx nuxi clean|cleanup [rootDir]参数说明rootDir：要清理的项目根目录，默认为当前目录 (.)。如果你的项目位于不同的目录，可以指定其他路径。如何使用 nuxi clean 命令1. 了解需要清理的文件nuxi clean 命令会删除以下文件和目录：.nuxt：Nuxt 的生成文件目录，包含 Nuxt 构建的输出和临时文件。.output：用于存储构建输出的目录。node_modules/.vite：Vite 的缓存目录（如果你使用 Vite 作为构建工具）。node_modules/.cache：其他工具生成的缓存目录。这些文件和目录在开发过程中会不断生成，并且可能会导致一些问题，比如缓存导致的构建错误或文件不一致。2. 运行 nuxi clean 命令在项目的根目录中运行以下命令来清理项目：npx nuxi clean如果你的项目位于其他目录，你可以指定该目录：npx nuxi clean path/to/your/project运行这个命令后，nuxi clean 将删除上述列出的所有文件和目录，确保你的项目环境是干净的。示例假设你正在开发一个名为 my-nuxt-app 的 Nuxt 项目，并且遇到了构建问题。你可以使用 nuxi clean 命令来清理项目，确保环境干净无误。基本清理：首先，进入你的项目目录：cd my-nuxt-app然后，运行 nuxi clean 命令：npx nuxi clean这个命令将会删除 .nuxt、.output、node_modules/.vite 和 node_modules/.cache 目录，帮助你清理项目中的所有生成文件和缓存。指定项目目录：如果你的项目不在当前目录，你可以指定项目的根目录进行清理。例如，如果你的项目位于 /home/user/projects/my-nuxt-app，你可以运行：npx nuxi clean /home/user/projects/my-nuxt-app这将会清理指定目录中的所有生成文件和缓存。总结nuxi clean 命令是管理和维护 Nuxt 项目的重要工具，它帮助你快速清理生成的文件和缓存，确保开发环境的干净。通过定期使用这个命令，你可以避免由于缓存或生成文件导致的构建问题，从而提升开发效率和项目稳定性。转载自https://www.cnblogs.com/Amd794/p/18391134

Nuxt.js 是一个流行的 Vue.js 框架，让我们能够快速开发现代化的 Web 应用。nuxi dev 命令是 Nuxt 的开发服务器，用于在本地环境中启动应用，使我们能够快速迭代和调试代码。安装 Nuxt.js首先，你需要确保已经在你的机器上安装了 Node.js。你可以在终端中运行以下命令来检查 Node.js 是否已安装：node -v如果你还没有安装 Node.js，建议去 Node.js 官方网站 下载并安装。接下来，使用 npm 或 yarn 安装 Nuxt.js。我们可以使用以下命令创建一个新的 Nuxt 应用：npx nuxi@latest init my-nuxt-app在这个过程中，系统会提示你选择一些选项，比如选择 CSS 框架、Linting 工具等。根据你的需求选择即可。启动开发服务器安装完 Nuxt 应用后，进入到你的项目目录：cd my-nuxt-app现在，你可以使用 nuxi dev 命令来启动开发服务器。基础命令如下：npx nuxi dev这将启动一个开发服务器，默认监听在 http://localhost:3000。命令选项nuxi dev 命令有多个可选参数，以下是一些常用选项：rootDir：要提供的应用程序的根目录。默认值为当前目录 .。--dotenv：指向要加载的另一个 .env 文件。--open, -o：启动后自动在浏览器中打开 URL。--port, -p：指定监听的端口，默认 3000。--host, -h：指定服务器的主机名，默认 localhost。--https：使用 https 协议监听。示例：启动开发服务器假设我们想要将开发服务器设置为在 4000 端口上运行，并在启动后自动打开浏览器。我们可以这样运行命令：npx nuxi dev -p 4000 -o自签名 HTTPS 证书如果你想用 HTTPS 启动开发服务器，可以使用 --https 选项。但请注意，浏览器会对此进行警告，因为这是自签名证书。为了在开发中使用自签名证书，你需要设置环境变量：export NODE_TLS_REJECT_UNAUTHORIZED=0然后可以运行以下命令来启动：npx nuxi dev --https访问你的应用无论使用什么配置，启动服务器后你都可以在浏览器中访问 http://localhost:3000 或指定的端口（如 http://localhost:4000）。你应该能看到 Nuxt 应用的欢迎页面。结论通过上述步骤，你可以轻松启动和配置一个 Nuxt.js 的开发服务器。nuxi dev 命令提供了灵活的选项来满足不同的开发需求。实验并熟悉这些选项后，你将能更有效地开发和调试你的应用。转载自https://www.cnblogs.com/Amd794/p/18392871

安装nodejs首先，打开终端node --version npm --version可以发现云主机已经默认帮我们安装好了nodejs的环境了，版本是 18.20.3如果没有预装nodejs，可以去官网下载并安装：cid:link_1安装cnpmcnpm 是 npm 的一个替代工具，用来更快速地安装 Node.js 包。它是由淘宝团队提供并维护的一个工具，主要用于解决 npm 在使用时可能遇到的一些问题，比如网络问题。如果直接使用命令 npm install -g cnpm 可能很久都安装不上你可以使用下面的命令：npm install -g cnpm --registry=https://registry.npm.taobao.org这条命令会全局安装 cnpm，并且设置淘宝的 npm 镜像仓库作为默认仓库，以便加速 npm 包的下载。这里安装 cnpm 的时候报错了，使用 cnpm --version 才发现，原来 cnpm 默认已经给你装好了安装Vue3VUE的官网地址为：cid:link_0使用如下命令创建vue项目cnpm create vue@latest根据上面末尾的提示执行命令（把 npm 替换为 cnpm，其他不变）cd vue3-demo cnpm install cnpm run format cnpm run devcnpm run dev 表示运行程序，按住ctrl，鼠标点击对应链接即可调用firefox浏览器打开网页至此Vue3的开发环境就搭建完毕了

问题描述刚开始下载别人的代码，安装依赖运行起来后，样式引用没有问题，发现样式代码报红如下图这样显示：虽然说运行没问题，但是这样的爆红还是影响阅读体验嘞，所以这个问题还是需要解决一下在网上看了很多方法发现是需要修改一下设置文件。解决方案1.打开设置点开右上角文件->首选项->设置2.进入setting.json文件修改打开设置以后如下图所示我们只需要点击右上角的这个小图标就可以进入setting.json文件3.修改setting.json文件把文件中的"files.associations"中的"*.vue"的值改成"vue"保存即可解决结果如图所示，可以看到样式代码不会爆红了，问题解决。转载自https://www.jb51.net/javascript/323550nmf.htm

在使用Element ui里NavMenu折叠菜单的时候 会遇到侧边导航栏收缩后，右侧内容不能一起收缩的问题和侧边栏折叠的卡顿一下的问题1.解决侧边导航栏收缩后右侧内容不能一起收缩的问题？在点击收缩以后，右侧不会跟着一起收缩解决办法(修改width值)2.解决ElementUi Nav侧边栏折叠的卡顿一下的问题使用ElementUi Nav侧边栏自带的折叠动画，文字会卡顿一下再消失，非常难受解决方案使用官方的折叠动画没有，所以我的方案是开启折叠动画后解决滚动条的问题，自己写个过渡，再把文字消失的速度加快，这样能比较流畅的折叠展开123456789101112/* 加过渡给侧边导航*/.el-aside {  transition: width 0.25s;  -webkit-transition: width 0.25s;  -moz-transition: width 0.25s;  -webkit-transition: width 0.25s;  -o-transition: width 0.25s;}/*加快侧边栏文字消失的速度*/.el-menu {  transition: all 10ms;}Element ui NavMenu导航菜单折叠后template中的内容不显示这个应该是高版本vuecli对elementUI不支持的缘故。解决这个问题的方式再template中加v-slot:title转载自https://www.jb51.net/javascript/323524rbb.htm

这里使用的是水平菜单，用icon作为title直接套用官网的模版会在icon的右边有一个小箭头，但现在需要隐藏它直接使用下面的css代码即可1234567.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{    display: none; }.el-submenu>.el-submenu__title .el-submenu__icon-arrow{    display: none;}注意：在<style>标签里需要把scope删掉更改element ui中下拉菜单的小箭头的样式添加样式【注意添加样式style中不能添加scoped】1234.drop.el-popper[x-placement^=bottom] .popper__arrow {       border-bottom-color: #1EBEF4 !important;       left: 50% !important;   }更改下方箭头位置转载自https://www.jb51.net/javascript/323528e3w.htm

TinyVue的VNode和h函数实现是否存在已知的局限性或问题？ 

 在建设博客的初期，我采用GitBook构建了编码专家的专栏系统。GitBook是基于Node.js的静态页构建组件，可以将Markdown文档渲染为静态页，支持插件扩展，使用非常简单。由于它不支持深度的定制，使用了一段时间后，无法满足我的要求了。  有一天我看到某博客采用VuePress，简洁美观、功能强大。VuePress的帮助文档非常详实，是Vue团队的诚意之作。正好我有一些Vue开发的功底，犹如出狱的色狼碰上了洗澡的刘亦菲。如果时间可以倒流，我绝对不会用WordPress来构建我的博客。WordPress固然成熟，设计的太“重”了。  VuePress 是一个 Vue 驱动的静态网站生成器，使用Markdown编写文档，提供成熟的主题、侧边栏、搜索功能等，轻松创建如何结构清晰、易于导航和搜索的文档网站。VuePress集成了自动化部署工具，可以将生成的静态网站部署到各种托管平台上，如GitHub Pages、Netlify等。VuePress还支持自动化的更新和发布，使得您可以轻松地更新网站内容，并保持与代码仓库的同步。(来自VuePress官网)  1 安装Nodejs 根据Vuepress官网的部署指南，Vuepress v2.0依赖Node.js版本是v16.19.0+。推荐采用 yum 方式安装首先确认镜像地址是否可用，文件路径是：/etc/yum.repos.d/CentOS-Base.repo，参考内容如下所示：  # CentOS-Base.repo # # The mirror system uses the connecting IP address of the client and the # update status of each mirror to pick mirrors that are updated to and # geographically close to the client.  You should use this for CentOS updates # unless you are manually picking other mirrors. # # If the mirrorlist= does not work for you, as a fall back you can try the  # remarked out baseurl= line instead. # #   [base] name=CentOS-$releasever - Base - mirrors.aliyun.com failovermethod=priority baseurl=http://mirrors.aliyun.com/centos/$releasever/os/$basearch/         http://mirrors.aliyuncs.com/centos/$releasever/os/$basearch/         http://mirrors.cloud.aliyuncs.com/centos/$releasever/os/$basearch/ gpgcheck=1 gpgkey=http://mirrors.aliyun.com/centos/RPM-GPG-KEY-CentOS-7   #released updates  [updates] name=CentOS-$releasever - Updates - mirrors.aliyun.com failovermethod=priority baseurl=http://mirrors.aliyun.com/centos/$releasever/updates/$basearch/         http://mirrors.aliyuncs.com/centos/$releasever/updates/$basearch/         http://mirrors.cloud.aliyuncs.com/centos/$releasever/updates/$basearch/ gpgcheck=1 gpgkey=http://mirrors.aliyun.com/centos/RPM-GPG-KEY-CentOS-7   #additional packages that may be useful [extras] name=CentOS-$releasever - Extras - mirrors.aliyun.com failovermethod=priority baseurl=http://mirrors.aliyun.com/centos/$releasever/extras/$basearch/         http://mirrors.aliyuncs.com/centos/$releasever/extras/$basearch/         http://mirrors.cloud.aliyuncs.com/centos/$releasever/extras/$basearch/ gpgcheck=1 gpgkey=http://mirrors.aliyun.com/centos/RPM-GPG-KEY-CentOS-7   #additional packages that extend functionality of existing packages [centosplus] name=CentOS-$releasever - Plus - mirrors.aliyun.com failovermethod=priority baseurl=http://mirrors.aliyun.com/centos/$releasever/centosplus/$basearch/         http://mirrors.aliyuncs.com/centos/$releasever/centosplus/$basearch/         http://mirrors.cloud.aliyuncs.com/centos/$releasever/centosplus/$basearch/ gpgcheck=1 enabled=0 gpgkey=http://mirrors.aliyun.com/centos/RPM-GPG-KEY-CentOS-7   #contrib - packages by Centos Users [contrib] name=CentOS-$releasever - Contrib - mirrors.aliyun.com failovermethod=priority baseurl=http://mirrors.aliyun.com/centos/$releasever/contrib/$basearch/         http://mirrors.aliyuncs.com/centos/$releasever/contrib/$basearch/         http://mirrors.cloud.aliyuncs.com/centos/$releasever/contrib/$basearch/ gpgcheck=1 enabled=0 gpgkey=http://mirrors.aliyun.com/centos/RPM-GPG-KEY-CentOS-7 yum 方式安装的默认版本是16.18.1，达不到VuePress 2.0需要的最小版本16.19.0，必须指定版本号，命令如下：  # 检查可用版本 yum list available nodejs # 安装指定版本 yum install nodejs-16.20.0 有时候 yum 源里面没有相应的Node.js版本，可以采用n模块安装指定版本，命令如下：  # 首先安装npm模块 yum install npm # 利用npm安装n模块 npm install -g n # 安装最新版 n latest # 或者指定版本 n 16.20.0 # 显示版本号，证明安装成功 node -v 2 初始化项目 VuePress的默认主题比较简陋，缺乏SEO、Markdown 语法扩展等功能，推荐直接使用vuepress-theme-hope。这个版本提供了更加美观的主题，默认集成许多实用的插件，大大增强了原有的功能。  首先初始化项目，命令如下：  npm init vuepress-theme-hope 这个命令会下载所有的依赖包，根据提示依次设置项目名称、版本号等信息，最终会生成带有空页面的初始工程。  采用如下命令启动调试：  npm run docs:dev 开发完毕后，可以构建静态页部署到服务器上，静态页默认输出路径是 .vuepress/dist/，构建命令如下：  npm run docs:build 3 迁移项目 如果重新部署项目，需要再次安装依赖包，下载项目源码后，在根目录执行命令：  npm install vuepress@next npm install vuepress-theme-hope 4 开发经验 4.1 配置插件 VuePress支持很多插件，以安装搜索插件为例，命令如下：  # 安装搜索插件 npm i -D vuepress-plugin-search-pro 在 config.ts 文件里面找到 defineUserConfig，在配置项里增加代码：    plugins: [     searchProPlugin({       // 索引全部内容       indexContent: true,       hotReload: true,       // 为分类和标签添加索引       customFields: [         {           getter: (page) => page.frontmatter.category,           formatter: "分类：$content",         },         {           getter: (page) => page.frontmatter.tag,           formatter: "标签：$content",         }       ]     })   ] 4.2 百度统计 在 config.ts文件里面找到 defineUserConfig，在这个配置项的 header 里插入百度统计的脚本，如下所示：    head: [     // 百度统计     [       "script",       {},       `       var _hmt = _hmt || [];       (function() {         var hm = document.createElement("script");         hm.src = "https://hm.baidu.com/hm.js?去百度统计网站获取相应代码";         var s = document.getElementsByTagName("script")[0];         s.parentNode.insertBefore(hm, s);       })();         `     ]   ] 新建文件 enhanceApp.ts ，加入如下内容：  export default ({ router }) => {     /**      * vuepress 是基于 vue 的单页面应用，页面切换过程中不会重新加载页面，不会触发百度统计。      * 以下代码用于监听路由切换事件，当切换页面时,手动上报百度统计       */     router.beforeEach((to, from, next) => {       console.log("切换路由", to.fullPath, from.fullPath);          //触发百度的pv统计       if (typeof _hmt != "undefined") {         if (to.path) {           _hmt.push(["_trackPageview", to.fullPath]);           console.log("上报百度统计", to.fullPath);         }       }       // continue       next();     });   };    4.3 辅助脚本 懒得去记忆npm原始命令，编写一个Shell脚本用来构建站点，代码如下：  #!/bin/sh  echo "please choose your option(1、2):" echo "1: hot deploy for developing" echo "2: build static page(default path: .vuepress/dist/)"  read item if [ $item == 1 ] then   git pull   npm run docs:dev elif [ $item == 2 ] then   git pull   npm run docs:build else     choose fi 5 参考文档 https://v2.vuepress.vuejs.org/zh/guide/ https://theme-hope.vuejs.press/zh/guide/  本文为原创文章，著作权归作者[编码砖家]所有，商业转载请联系作者获得授权，非商业转载请注明出处。 来源地址：https://www.cnblogs.com/xiaoyangjia/p/17800255.html 转载自https://www.cnblogs.com/xiaoyangjia/p/17800255.html

mini版TinyVue组件大家有用过吗？跟antd比咋样？

中奖结果公示感谢各位小伙伴参与本次活动，欢迎关注华为云DTSE Tech Talk 技术直播更多活动~本次活动获奖名单如下：请于4月23日下班前在此问卷中反馈您的中奖邮寄信息~直播简介【直播主题】手把手教你实现 mini版TinyVue组件库【直播时间】2024年4月17日 16:30-18:00【直播专家】阿健 华为云开源 DTSE 技术布道师【直播简介】在前端 Web 开发过程中，跨版本兼容性问题是一个普遍存在的挑战。为了解决这些痛点，OpenTiny 推出跨端、跨框架、跨版本组件库 TinyVue。本期直播聚焦于华为云的前端开源组件库 TinyVue，通过 Mini版 TinyVue 的代码实践与大家共同深入解读 Vue2/Vue3 不同版本间的差异。这对于提升用户体验，减低维护成本，提升开发者技术洞察有重要意义。活动介绍【互动方式】直播前您可以在本帖留下您疑惑的问题，专家会在直播时为您解答。直播后您可以继续在本帖留言，与专家互动交流。我们会在全部活动结束后对参与互动的用户进行评选。【活动时间】即日起—2024年4月18日【奖励说明】评奖规则：活动1：直播期间在直播间提出与直播内容相关的问题，对专家评选为优质问题的开发者进行奖励。奖品：华为云定制长袖卫衣活动2：在本帖提出与直播内容相关的问题，由专家在所有互动贴中选出最优问题贴的开发者进行奖励。奖品：华为云定制U型按摩枕更多直播活动直 播互动有礼：官网直播间发口令“华为云 DTSE”抽华为云定制雨伞、填写问卷抽华为云定制保温杯等好礼。有奖实操 ：4月17日-4月18日，完成课后动手实验即送华为云定制T恤。【注意事项】1、活动期间同类子活动每个ID（同一姓名/电话/收货地址）提问数≤20个；所有参与活动的问题，如发现为复用他人内容或直播间中重复内容，则取消获奖资格。2、为保证您顺利领取活动奖品，请您在活动公示奖项后2个工作日内私信提前填写奖品收货信息，如您没有填写，视为自动放弃奖励。3、活动奖项公示时间截止2024年4月19日，如未反馈邮寄信息视为弃奖。本次活动奖品将于奖项公示后30个工作日内统一发出，请您耐心等待。4、活动期间同类子活动每个ID（同一姓名/电话/收货地址）只能获奖一次，若重复则中奖资格顺延至下一位合格开发者，仅一次顺延。5、如活动奖品出现没有库存的情况，华为云工作人员将会替换等价值的奖品，获奖者不同意此规则视为放弃奖品。6、其他事宜请参考【华为云社区常规活动规则】。

nuxtNuxt是一个免费且开源的框架，提供直观且可扩展的方式来创建基于Vue.js的类型安全、高性能和生产级别的全栈网站和应用程序。它提供了许多功能，使得构建快速、SEO友好和可扩展的Web应用程序变得轻松，包括：服务器端渲染、静态站点生成、混合渲染和边缘渲染带有代码分割和预取的自动路由数据获取和状态管理SEO优化和元标签定义组件、组合和实用工具的自动导入无需配置的TypeScript使用我们的server/目录进行全栈开发通过200多个模块进行扩展部署到各种托管平台…等等 🚀🚀 入门指南使用以下命令创建一个新的入门项目。这将创建一个带有所有必要文件和依赖项的入门项目：  [bash]npx nuxi@latest init <my-project>还可以发现 nuxt.new：在 CodeSandbox、StackBlitz 或本地打开一个 Nuxt 入门项目，几秒钟内即可开始运行。💻 Vue 开发简单、直观且强大，Nuxt 让您以合理的方式编写 Vue 组件。每个重复的任务都是自动化的，因此您可以放心地专注于编写全栈 Vue 应用程序。app.vue 示例：  [vue]<script setup lang="ts"> useSeoMeta({ title: '遇见 Nuxt', description: '直观的 Vue 框架。' }) </script> <template> <div id="app"> <AppHeader /> <NuxtPage /> <AppFooter /> </div> </template> <style scoped> #app { background-color: #020420; color: #00DC82; } </style>📖 文档我们强烈建议您查看 Nuxt 文档 来提升技能。这是一个了解框架更多信息的好资源。它涵盖了从入门到高级主题的所有内容。🧩 模块探索我们的 模块列表 来加速您的 Nuxt 项目，这些模块是由windows 实际测试初始化创建文件夹：  [bat]d: mkdir D:\blogs\nuxt cd D:\blogs\nuxt初始化：  [sh]npx nuxi@latest init test报错：  [plaintext][19:02:41] ERROR Error: Failed to download template from registry: Failed to download https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json: TypeError: fetch failed网络不同，暂时不看了。参考资料https://github.com/nuxt/nuxt?tab=readme-ov-file转载自https://houbb.github.io/2016/04/13/blog-engine-09-nuxt-01-intro

vuepressVuePress 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown 来书写内容（如文档、博客等），然后 VuePress 会帮助你生成一个静态网站来展示它们。VuePress 诞生的初衷是为了支持 Vue.js 及其子项目的文档需求，但是现在它已经在帮助大量用户构建他们的文档、博客和其他静态网站。它是如何工作的？一个 VuePress 站点本质上是一个由 Vue 和 Vue Router 驱动的单页面应用 (SPA)。路由会根据你的 Markdown 文件的相对路径来自动生成。每个 Markdown 文件都通过 markdown-it 编译为 HTML ，然后将其作为 Vue 组件的模板。因此，你可以在 Markdown 文件中直接使用 Vue 语法，便于你嵌入一些动态内容。在开发过程中，我们启动一个常规的开发服务器 (dev-server) ，并将 VuePress 站点作为一个常规的 SPA。如果你以前使用过 Vue 的话，你在使用时会感受到非常熟悉的开发体验。在构建过程中，我们会为 VuePress 站点创建一个服务端渲染 (SSR) 的版本，然后通过虚拟访问每一条路径来渲染对应的 HTML 。这种做法的灵感来源于 Nuxt 的 nuxt generate 命令，以及其他的一些项目，比如 Gatsby。为什么不是 …?NuxtNuxt 是一套出色的 Vue SSR 框架， VuePress 能做的事情，Nuxt 实际上也同样能够胜任。但 Nuxt 是为构建应用程序而生的，而 VuePress 则更为轻量化并且专注在以内容为中心的静态网站上。VitePressVitePress 是 VuePress 的孪生兄弟，它同样由 Vue.js 团队创建和维护。VitePress 甚至比 VuePress 要更轻更快，但它在灵活性和可配置性上作出了一些让步，比如它不支持插件系统。当然，如果你没有进阶的定制化需求， VitePress 已经足够支持你将你的内容部署到线上。这个比喻可能不是很恰当，但是你可以把 VuePress 和 VitePress 的关系看作 Laravel 和 Lumen 。Docsify / Docute这两个项目同样都是基于 Vue，然而它们都是完全的运行时驱动，因此对 SEO 不够友好。如果你并不关注 SEO，同时也不想安装大量依赖，它们仍然是非常好的选择！HexoHexo 一直驱动着 Vue 2.x 的文档。Hexo 最大的问题在于他的主题系统太过于静态以及过度地依赖纯字符串，而我们十分希望能够好好地利用 Vue 来处理我们的布局和交互。同时，Hexo 在配置 Markdown 渲染方面的灵活性也不是最佳的。GitBook过去我们的子项目文档一直都在使用 GitBook 。GitBook 最大的问题在于当文件很多时，每次编辑后的重新加载时间长得令人无法忍受。它的默认主题导航结构也比较有限制性，并且，主题系统也不是 Vue 驱动的。GitBook 背后的团队如今也更专注于将其打造为一个商业产品而不是开源工具。在线体验可以直接使用 cid:link_0 在线体验。安装依赖环境Node.js v18.16.0+包管理器，如 pnpm、yarn、npm 等。本机测试  [plaintext]>node -v v20.10.0 >npm -v 10.2.3创建项目通过命令行创建你可以通过 create-vuepress 直接创建项目模板。创建文件夹：  [bat]d: mkdir D:\blogs\vuepress cd D:\blogs\vuepress执行创建命令：  [plaintext]npm init vuepress vuepress-starter配置项根据个人需要选择：  [plaintext]D:\>cd D:\blogs\vuepress D:\blogs\vuepress>npm init vuepress vuepress-starter Need to install the following packages: create-vuepress@2.0.0-rc.12 Ok to proceed? (y) y ? Select a language to display / 选择显示语言 简体中文 ? 选择包管理器 npm ? 你想要使用哪个打包器？ vite ? 你想要创建什么类型的项目？ blog 生成 package.json... ? 设置应用名称 my-vuepress-site ? 设置应用版本号 0.0.1 ? 设置应用描述 A VuePress project ? 设置协议 MIT ? 是否需要一个自动部署文档到 GitHub Pages 的工作流？ No 生成模板... ? 选择你想使用的源 国内镜像源 安装依赖... 这可能需要数分钟，请耐心等待. 我们无法正确输出子进程的进度条，所以进程可能会看似未响应使用 demo 模式查看：  [plaintext]added 210 packages in 34s 模板已成功生成! ? 是否想要现在启动 Demo 查看? Yes 启动开发服务器... 启动成功后，请在浏览器输入给出的开发服务器地址(默认为 'localhost:8080') > my-vuepress-site@0.0.1 docs:dev > vuepress dev docs vite v5.1.6 dev server running at: ➜ Local: cid:link_1 ➜ Network: http://192.168.1.6:8080/访问浏览器访问：cid:link_1启动后就是非常简洁的页面，类似 vuepress 的官方风格。目录结构创建完成后，你项目的目录结构应该是这样的：  [plaintext]├─ docs │ ├─ .vuepress │ │ └─ config.js │ └─ README.md └─ package.jsondocs 目录是你放置 Markdown 文件的地方，它同时也会作为 VuePress 的源文件目录。docs/.vuepress 目录，即源文件目录下的 .vuepress 目录，是放置所有和 VuePress 相关的文件的地方。当前这里只有一个配置文件。默认还会在该目录下生成临时文件、缓存文件和构建输出文件。建议你把它们添加到 .gitignore 文件中。.gitignore  [plaintext]# VuePress 默认临时文件目录 .vuepress/.temp # VuePress 默认缓存目录 .vuepress/.cache # VuePress 默认构建生成的静态文件目录 .vuepress/dist开始使用 VuePress启动开发服务器你可以在 package.json 中添加一些 scripts ：  [js]{ "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } }运行 docs:dev 脚本可以启动开发服务器:  [sh]npm run docs:devVuePress 会在 http://localhost:8080 启动一个热重载的开发服务器。当你修改你的 Markdown 文件时，浏览器中的内容也会自动更新。构建你的网站运行 docs:build 脚本可以构建你的网站：  [sh]npm run docs:build在 docs/.vuepress/dist 目录中可以找到构建生成的静态文件。你可以查看 部署 来了解如何部署你的网站。小结不得不说，感觉 vuepress 设计的非常友好，使用起来很简单，国内文档写的也很不错。参考资料https://v2.vuepress.vuejs.org/zh/guide/getting-started.html转载自https://houbb.github.io/2016/04/13/blog-engine-08-vuepress-01-intro

jekyll 搭建教程jekyll 搭建教程https://segmentfault.com/a/1190000002539546?_ea=304992Gem安装 Ruby，请访问 下载地址。http://rubyinstaller.org/downloadsJekyllJekyll 是一个简单且具备博客特性的静态网站生成器。https://jekyllrb.com/docs/home/使用以下命令安装 Jekyll。  [plaintext]$ gem install jekyll在中国可能需要使用代理软件。然后，请等待并学习如何使用它。或者，您可以使用 rails 替代 Jekyll。如果您使用的是 Mac，请使用以下命令。  [plaintext]$ sudo gem install jekyllGit您需要了解如何使用 Git。Git 文档http://www.runoob.com/git/git-tutorial.html在 Windows 下安装 Jekyll有时候工作需要，在 Windows 系统下编辑博客，想要看到效果却十分麻烦。因此尝试在 Windows 下安装 Jekyll。安装 Ruby下载下载 适合你计算机的合适版本的安装程序；http://rubyinstaller.org/downloads/安装安装时勾选上 Add Ruby executables to your PATH;查看版本在命令行中输入如下命令：  [plaintext]$ ruby -v ruby 2.3.3p222 (2016-11-21 revision 56859) [x64-mingw32]安装 DevKit下载下载 适合你计算机的合适版本的安装程序；选择匹配的软件。本次选择 DevKit-mingw64-64-4.7.2-20130224-1432-sfx.exe, For use with Ruby 2.0 to 2.3 (x64 - 64bits only)解压下载并解压文件至路径如D:\Devkit下：运行  [plaintext]$ cd d:\Devkit [D:\Devkit]$ ruby dk.rb init [INFO] found RubyInstaller v2.3.3 at D:/Ruby23-x64 Initialization complete! Please review and modify the auto-generated 'config.yml' file to ensure it contains the root directories to all of the installed Rubies you want enhanced by the DevKit.查看 config.yml 应该有如下内容  [yml]# This configuration file contains the absolute path locations of all # installed Rubies to be enhanced to work with the DevKit. This config # file is generated by the 'ruby dk.rb init' step and may be modified # before running the 'ruby dk.rb install' step. To include any installed # Rubies that were not automagically discovered, simply add a line below # the triple hyphens with the absolute path to the Ruby root directory. # # Example: # # --- # - C:/ruby19trunk # - C:/ruby192dev # --- - D:/Ruby23-x64查看和安装  [plaintext][D:\Devkit]$ ruby dk.rb review Based upon the settings in the 'config.yml' file generated from running 'ruby dk.rb init' and any of your customizations, DevKit functionality will be injected into the following Rubies when you run 'ruby dk.rb install'. D:/Ruby23-x64 [D:\Devkit]$ ruby dk.rb install [INFO] Updating convenience notice gem override for 'D:/Ruby23-x64' [INFO] Installing 'D:/Ruby23-x64/lib/ruby/site_ruby/devkit.rb'安装 Jekyll确保 gem 已安装  [plaintext][D:\Devkit]$ gem -v 2.5.2安装 Jekyll  [plaintext]$ gem install jekyll问题错误：Permission denied - bind(2) for 127.0.0.1:4000bind localhost:4000 failed使用如下命令：  [plaintext]$ netstat -ano $ tasklist /svc /FI "PID eq ${pid}"pid 是占用 localhost:4000 的线程的结果；使用任务管理器结束该线程；请在 Gemfile 中添加以下内容以避免轮询更改：  [plaintext]gem 'wdm', '>= 0.1.0' if Gem.win_platform?gem ‘wdm’, ‘>= 0.1.0’ if Gem.win_platform?我尝试了很多次，但仍然失败。幸运的是，Jekyll 仍然可以正常工作jekyll-paginate  [plaintext]配置文件: /Users/houbinbin/blog/houbb.github.io/_config.yml 依赖错误: 哎呀！看起来你没有安装 jekyll-paginate 或者它的某个依赖项。为了按照当前配置使用 Jekyll，你需要安装这个 gem。来自 Ruby 的完整错误信息是: 'cannot load such file -- jekyll-paginate' 如果遇到问题，你可以在 http://jekyllrb.com/help/ 找到有用的资源！ jekyll 3.1.3 | 错误: jekyll-paginate解决方法：  [plaintext]$ sudo gem install jekyll-paginate谷歌文件加载慢fonts.googleapis.com加载慢解决办法我是直接将semantic引用此文件的地方注释掉了。TOC 目录TOC把这个添加到文件中，就可以生成目录。  [plaintext]* any list {:toc}分页base page zh_CN最多页数限制分页功能插件使得 paginator liquid 对象具有下列属性：属性说明page当前页码per_page每页文章数量posts当前页的文章列表total_posts总文章数total_pages总页数previous_page上一页页码 或 nil（如果上一页不存在）previous_page_path上一页路径 或 nil（如果上一页不存在）next_page下一页页码 或 nil（如果下一页不存在）next_page_path下一页路径 或 nil（如果下一页不存在）Searchnice querySEO掌心 SEORang SEO优化 jekyll 站点的 SEO 技巧博客写好之后，直接搜索基本搜索不到。双边括号特殊符号，比如使用 vue 学习的时候，就会用到双边花括号，但是这个是 jekyll 的内置符号。解决方案如下：  [plaintext]{% comment %} 这里是各种包含奇怪花括号 {{{0}}} 的地方 {% endcomment %} TODO文章置顶has done!多说sitemap报错  [plaintext]$ gem install jekyll-sitemap ERROR: Could not find a valid gem 'Jekyll-sitemap' (>= 0), here is why: Unable to download data from https://gems.ruby-china.org/ - bad response Not Found 404 (https://gems.ruby-china.org/specs.4.8.gz)解决  [plaintext]gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/日志  [plaintext]https://gems.ruby-china.com/ added to sources source https://rubygems.org/ not present in cache重新执行  [plaintext]sudo gem install jekyll-sitemap日志  [plaintext]Fetching: jekyll-sitemap-1.2.0.gem (100%) Successfully installed jekyll-sitemap-1.2.0 Parsing documentation for jekyll-sitemap-1.2.0 Installing ri documentation for jekyll-sitemap-1.2.0 Done installing documentation for jekyll-sitemap after 0 seconds WARNING: Unable to pull data from 'https://gems.ruby-china.org/': bad response Not Found 404 (https://gems.ruby-china.org/specs.4.8.gz) 1 gem installed参考资料seohttp://vdaubry.github.io/2014/10/21/SEO-for-your-Jekyll-blog/https://crispgm.com/page/48-tips-for-jekyll-you-should-know.htmlJekyll自动生成站点地图如何让谷歌和百度搜索到自己GitHub上的博客Jekyll SEO Taghttps://github.com/jekyll/jekyll-seo-tagsitemaphttp://faso.me/notes/2013/07/27/jekyll-sitemap-without-plugin/index.htmlrubyhttps://www.jianshu.com/p/60f3707cb3ce?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendationGitHub 博客– Jekyll–代码高亮，Liquid 转义字符Jekyll 中文文档极客学院中文文档转载自https://houbb.github.io/2016/04/13/blog-engine-02-jekyll-01-install