2024年最全Vue进阶（九十六）：VuePress 详解，前端多线程断点续传

最新推荐文章于 2024-06-29 18:01:49 发布

2301_82244330

最新推荐文章于 2024-06-29 18:01:49 发布

阅读量663

点赞数 8

分类专栏：程序员文章标签：前端 vue.js 状态模式

本文链接：https://blog.csdn.net/2301_82244330/article/details/138520077

版权

程序员专栏收录该内容

92 篇文章 0 订阅

订阅专栏

自学几个月前端，为什么感觉什么都没学到？？

这种现象在很多的初学者和自学前端的同学中是比较的常见的。

因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。

最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。

很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。

这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。

但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。

所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。

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

三、运行原理

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

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

四、项目搭建

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: {
				// ...


### 最后

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

>![](https://img-blog.csdnimg.cn/img_convert/ed9ca1cb03c5b351064e912b9b07c2ee.webp?x-oss-process=image/format,png)

: '唐',
                link: '/tang/'
            }],
			sidebar: {
				// ...


### 最后

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

>[外链图片转存中...(img-D0pB1FOR-1715045566578)]

2301_82244330

关注

8
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
2024年最全Vue进阶（九十六）：VuePress 详解，前端多线程断点续传

还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。来调试你的自定义主题！
复制链接

扫一扫