百度360必应搜狗淘宝本站头条
vue dispatchspring gatewayorder by ascidea eval resetupdate canceled
当前位置：网站首页 > 技术分类 > 正文

Vue进阶(九十六):VuePress（vue @keypress）

ztj100 2024-10-27 18:36 30 浏览 0 评论

佛语：“赠人玫瑰，手留余香。” 若您感觉博文内容与您有益，请点赞并收藏！

敬请关注作者，海量博文持续更新中。望与各位码友同学习，共进步！

1.介绍

VuePress ,一个全新的基于 vue 的静态网站生成器，实际上就是一个 vue 的 spa 应用，内置 webpack，可以用来写文档。

VuePress 由两部分组成：一个以 Vue 驱动的主题系统简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。

由 VuePress 生成的每个页面，都具有相应的预渲染静态 HTML，它能提供出色的加载性能，并且对 SEO 友好。页面加载之后，Vue 就会将这些静态内容接管为完整的单页面应用程序(SPA)。当用户在浏览站点时，可以按需加载其他页面。

2.VuePress 优点

  • 界面简洁优雅；
  • 容易上手；
  • 更好的兼容、扩展 Markdown 语法；
  • 响应式布局，PC端、手机端；
  • Google Analytics 集成；
  • 支持 PWA

3.运行原理

VuePress 网站实际上是由 Vue, Vue Router 和 webpack 驱动的单页面应用程序。如果你以前使用过 Vue，那么在编写或开发自定义主题时（甚至可以使用 Vue DevTools 来调试你的自定义主题！），你会快速融入到熟悉的开发体验中！

在构建过程中，我们会创建应用程序的服务器渲染版本，并且实际上是通过访问每个路由，来渲染相应的 HTML。这种方式受到 Nuxt 的 nuxt generate 命令以及 Gatsby 等其他项目的启发。

4.项目搭建

4.1 项目结构

首先说明一下官方推荐的目录结构：

4.2 创建项目文件夹

可以右键手动新建，也可以使用 mkdir 命令新建：

mkdir vuepressBlogDemo

全局安装 VuePress

npm install -g vuepress

进入 vuepressBlogDemo 文件夹，初始化项目

使用 npm init 或 npm init -y（默认yes）

npm init -y

4.3 创建文件夹和文件

在 vuepressBlogDemo 文件夹中创建 docs 文件夹，在 docs 中创建 .vuepress 文件夹，在.vuepress中创建 public 文件夹和 config.js 文件，最终项目结构如下所示：

vuepressBlogDemo

├─── docs

│ ├── README.md

│ └── .vuepress

│ ├── public

│ └── config.js

└── package.json

在 config.js 文件中配置网站标题、描述、主题等信息

module.exports = {
    themeConfig: {
        nav: [{
            text: '唐',
            link: '/tang/'
        }, {
            text: '宋',
            link: '/song/'
        }, {
            text: '更多',
            link: '/more/'
        }],
        sidebar: {
           '/tang/': [
               ['', '简介'], {
                   title: '代表人物',
                   collapsable: false,
                   children: [
                       'libai/'
                   ]
               }
           ],
           '/song/': [
               ['', '简介'], {
                   title: '代表人物',
                   collapsable: false,
                   children: [
                       'liqingzhao/'
                   ]
               }
           ]
       }
    }
}

其中，/tang/、/song/、’'和libai/等表示当前导航栏或侧边栏点击所跳转的路由地址（即相应的.md文件），按照路由创建对应的文件。

''会显示为当前目录下的README.md文件。

[’’, ‘简介’]当前侧边栏的title为简介。

/tang/表示为tang文件夹下的README.md，/tang表示为tang.md文件。

可以使用sidebar: auto自动生成侧边栏，采用自定义侧边栏。

在 package.json 文件里添加两个启动命令

"scripts": {
  "dev": "vuepress dev docs",
  "build": "vuepress build docs"
}

4.4国际化

在config.js中添加locales字段，配置国际化。

locales: {
    '/': { // 中文
        lang: 'zh-CN',
        title: '诗词鉴赏',
        description: '静态站点 诗词鉴赏'
    },
    '/en/': { // 英文
        lang: 'en-US', // 将会被设置为 <html> 的 lang 属性
        title: 'Appreciation of poetry',
        description: 'Static Site Appreciation of poetry'
    }
}

配置默认主题的导航栏和侧边栏支持国际化，在上述themeConfig中增加locales字段：

themeConfig: {
	locales: {
		'/': { // 默认语言，这里为中文
			nav: [{
                text: '唐',
                link: '/tang/'
            }],
			sidebar: {
				// ...
			}
		},
		'/en/': { // 英文
			nav: [{
                text: 'Tang',
                link: '/en/tang/'
            }],
			sidebar: {
				// ...
			}
		}
	}
}

nav和sidebar和前文字段含义相同。

相应的也要增加国际化相应的文件夹及文件，整体结构跟原结构一致，如图：

4.5 项目启动

一切就绪，启动项目

npm run dev

5.部署上线

项目开发完毕后，便可像部署其他前端Vue项目一样进行项目部署上线，依赖系统只需要通过链接形式，访问该系统上的相关支持文档。从而实现小助手功能。

6.一些小亮点

完成了基础搭建后，就可以在docs目录下新建 .md 文件写文章了（.md 是 Markdown 语法文件，需要掌握Markdown 的一些基本写法。）

而且，vuepress支持自定义布局以及自定义主题，并且可以使用很多插件以及自定义插件。

相关推荐

离谱!写了5年Vue，还不会自动化测试?

前言大家好，我是倔强青铜三。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。Playwright是一个功能强大的端到...

package.json 与 package-lock.json 的关系

模块化开发在前端越来越流行，使用node和npm可以很方便的下载管理项目所需的依赖模块。package.json用来描述项目及项目所依赖的模块信息。那package-lock.json和...

Github 标星35k 的 SpringBoot整合acvtiviti开源分享，看完献上膝盖

前言activiti是目前比较流行的工作流框架，但是activiti学起来还是费劲，还是有点难度的，如何整合在线编辑器，如何和业务表单绑定，如何和系统权限绑定，这些问题都是要考虑到的，不是说纯粹的把a...

Vue3 + TypeScript 前端研发模板仓库

我们把这个Vue3+TypeScript前端研发模板仓库的初始化脚本一次性补全到可直接运行的状态，包括：完整的目录结构所有配置文件研发规范文档示例功能模块（ExampleFeature）...

Vue 2迁移Vue 3:从响应式到性能优化

小伙伴们注意啦！Vue2已经在2023年底正式停止维护，再不升级就要面临安全漏洞没人管的风险啦！而且Vue3带来的性能提升可不是一点点——渲染速度快40%，内存占用少一半，更新速度直接翻倍！还在...

VUE学习笔记:声明式渲染详解，对比WEB与VUE

声明式渲染是指使用简洁的模板语法，声明式的方式将数据渲染进DOM系统。声明式是相对于编程式而言，声明式是面向对象的，告诉框架做什么，具体操作由框架完成。编程式是面向过程思想，需要手动编写代码完成具...

苏州web前端培训班， 苏州哪里有web前端工程师培训

前端+HTML5德学习内容：第一阶段：前端页面重构：PC端网站布局、HTML5+CSS3基础项目、WebAPP页面布局；第二阶段：高级程序设计：原生交互功能开发、面向对象开发与ES5/ES6、工具库...

跟我一起开发微信小程序——扩展组件的代码提示补全

用户自定义代码块步骤：1.HBuilderX中工具栏：工具-代码块设置-vue代码块2.通过“1”步骤打开设置文件...

JimuReport 积木报表 v1.9.3发布，免费可视化报表

项目介绍积木报表JimuReport，是一款免费的数据可视化报表，含报表、大屏和仪表盘，像搭建积木一样完全在线设计！功能涵盖：数据报表、打印设计、图表报表、门户设计、大屏设计等！...

软开企服开源的无忧企业文档(V2.1.3)产品说明书

目录1....

一款面向 AI 的下一代富文本编辑器，已开源

简介AiEditor是一个面向AI的下一代富文本编辑器。开箱即用、支持所有前端框架、支持Markdown书写模式什么是AiEditor？AiEditor是一个面向AI的下一代富文本编辑...

玩转Markdown(2)——抽象语法树的提取与操纵

上一篇玩转Markdown——数据的分离存储与组件的原生渲染发布，转眼已经鸽了大半年了。最近在操纵mdast生成md文件的时候，心血来潮，把玩转Markdown(2)给补上了。...

DeepseekR1+ollama+dify1.0.0搭建企业/个人知识库(入门避坑版)

找了网上的视频和相关文档看了之后，可能由于版本不对或文档格式不对，很容易走弯路，看完这一章，可以让你少踩三天的坑。步骤和注意事项我一一列出来：1，前提条件是在你的电脑上已配置好ollama，dify1...

升级JDK17的理由，核心是降低GC时间

升级前后对比升级方法...

一个vsCode格式化插件_vscode格式化插件缩进量

ESlint...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
赣ICP备2023011147号-29