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

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

ztj100 2024-10-27 18:36 16 浏览 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支持自定义布局以及自定义主题，并且可以使用很多插件以及自定义插件。

相关推荐

如何将数据仓库迁移到阿里云 AnalyticDB for PostgreSQL

阿里云AnalyticDBforPostgreSQL（以下简称ADBPG，即原HybridDBforPostgreSQL）为基于PostgreSQL内核的MPP架构的实时数据仓库服务，可以...

Python数据分析:探索性分析

写在前面如果你忘记了前面的文章，可以看看加深印象：Python数据处理...

CSP-J/S冲奖第21天:插入排序

...

C++基础语法梳理:算法丨十大排序算法(二)

本期是C++基础语法分享的第十六节，今天给大家来梳理一下十大排序算法后五个！归并排序...

C 语言的标准库有哪些

C语言的标准库并不是一个单一的实体，而是由一系列头文件(headerfiles)组成的集合。每个头文件声明了一组相关的函数、宏、类型和常量。程序员通过在代码中使用#include<...

[深度学习] ncnn安装和调用基础教程

1介绍ncnn是腾讯开发的一个为手机端极致优化的高性能神经网络前向计算框架，无第三方依赖，跨平台，但是通常都需要protobuf和opencv。ncnn目前已在腾讯多款应用中使用，如QQ，Qzon...

用rust实现经典的冒泡排序和快速排序

1.假设待排序数组如下letmutarr=[5,3,8,4,2,7,1];...

ncnn+PPYOLOv2首次结合!全网最详细代码解读来了

编辑：好困LRS【新智元导读】今天给大家安利一个宝藏仓库miemiedetection，该仓库集合了PPYOLO、PPYOLOv2、PPYOLOE三个算法pytorch实现三合一，其中的PPYOL...

C++特性使用建议

1.引用参数使用引用替代指针且所有不变的引用参数必须加上const。在C语言中，如果函数需要修改变量的值，参数必须为指针，如...

Qt4/5升级到Qt6吐血经验总结V202308

00：直观总结增加了很多轮子，同时原有模块拆分的也更细致，估计为了方便拓展个管理。把一些过度封装的东西移除了（比如同样的功能有多个函数），保证了只有一个函数执行该功能。把一些Qt5中兼容Qt4的方法废...

到底什么是C++11新特性，请看下文

C++11是一个比较大的更新，引入了很多新特性，以下是对这些特性的详细解释，帮助您快速理解C++11的内容1.自动类型推导（auto和decltype）...

掌握C++11这些特性，代码简洁性、安全性和性能轻松跃升!

C++11（又称C++0x）是C++编程语言的一次重大更新，引入了许多新特性，显著提升了代码简洁性、安全性和性能。以下是主要特性的分类介绍及示例：一、核心语言特性1.自动类型推导（auto）编译器自...

经典算法——凸包算法

凸包算法（ConvexHull）一、概念与问题描述凸包是指在平面上给定一组点，找到包含这些点的最小面积或最小周长的凸多边形。这个多边形没有任何内凹部分，即从一个多边形内的任意一点画一条线到多边形边界...

一起学习c++11——c++11中的新增的容器

c++11新增的容器1:array当时的初衷是希望提供一个在栈上分配的，定长数组，而且可以使用stl中的模板算法。array的用法如下:#include<string>#includ...

C++ 编程中的一些最佳实践

1.遵循代码简洁原则尽量避免冗余代码，通过模块化设计、清晰的命名和良好的结构，让代码更易于阅读和维护...

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

一周热门
最近发表
标签列表
Copyright Your WebSite.Some Rights Reserved.