Vue 进阶(九十六):VuePress 详解
佛语:“赠人玫瑰,手留余香。” 若您感觉博文内容与您有益,请点赞并收藏!
敬请关注作者,海量博文持续更新中。望与各位码友同学习,共进步!
一、介绍
VuePress
,一个全新的基于 vue
实现的静态网站生成器,实际上就是一个 vue
的 spa
应用,内置 webpack
,可以用来写文档。
VuePress
由两部分组成:一个以 Vue
驱动的主题系统简约静态网站生成工具,和一个为编写技术文档而优化的默认主题。它是为了支持 Vue
子项目的文档需求而创建的。
由 VuePress
生成的每个页面,都具有相应的预渲染静态 HTML
,它们能提供出色的加载性能,并且对 SEO
友好。页面加载之后,Vue
就会将这些静态内容,接管为完整的单页面应用程序(SPA
)。当用户在浏览站点时,可以按需加载其他页面。
二、VuePress 优点
界面简洁优雅
容易上手
更好的兼容、扩展
Markdown
语法响应式布局,PC 端、手机端
Google Analytics
集成支持
PWA
三、运行原理
VuePress
搭建的静态网站实际上是由 Vue
, Vue Router
和 webpack
驱动的单页面应用程序。如果你以前使用过 Vue
,那么在编写或开发自定义主题时(甚至可以使用 Vue DevTools
来调试你的自定义主题!),你会融入到熟悉的开发体验中!
在构建过程中,我们会创建应用程序的服务器渲染版本,并且实际上是通过访问每个路由,来渲染相应的 HTML
。这种方式受到 Nuxt
的 nuxt generate
命令以及 Gatsby
等其他项目的启发。
四、项目搭建
4.1 项目结构
首先说明一下官方推荐的目录结构:
4.2 创建项目文件夹
可以右键手动新建,也可以使用 mkdir
命令新建:
全局安装 VuePress
进入 vuepressBlogDemo 文件夹,初始化项目使用 npm init
或 npm init -y
(默认 yes)
4.3 创建文件夹和文件
在 vuepressBlogDemo 文件夹中创建 docs 文件夹,在 docs 中创建 .vuepress
文件夹,在.vuepress
中创建 public
文件夹和 config.js
文件,最终项目结构如下所示:
在 config.js
文件中配置网站标题、描述、主题等信息:
其中,/tang/、/song/
、''和libai/
等表示当前导航栏或侧边栏点击所跳转的路由地址(即相应的.md
文件),按照路由创建对应的文件。
''会显示为当前目录下的
README.md
文件。
['', '简介']
当前侧边栏的 title 为简介。
/tang/
表示为tang
文件夹下的README.md
,/tang
表示为tang.md
文件。可以使用
sidebar: auto
自动生成侧边栏,这里采用自定义侧边栏。
在 package.json
文件里添加两个启动命令
4.4 国际化
在config.js
中添加locales
字段,以配置国际化。
配置默认主题的导航栏和侧边栏支持国际化,在上述themeConfig
中增加locales
字段:
nav
和sidebar
和前文字段含义相同。
相应的也要增加国际化相应的文件夹及文件,整体结构跟原结构一致,如图:
4.5 项目启动
一切就绪,启动项目
五、部署上线
项目开发完毕后,便可像部署其他前端Vue
项目一样进行项目部署上线,依赖系统只需要通过链接形式,访问该系统上的相关支持文档。从而实现小助手功能。
六、示例演示
部署在本地的项目演示效果如下:
国际化部分,还需要再做研究设计。
七、一些小亮点
完成了基础搭建后,就可以在 docs 目录下新建 .md
文件写文章了(.md
是 Markdown
语法文件,你需要掌握 Markdown
的一些基本写法)
vuepress
支持自定义布局以及自定义主题,并且可以使用很多插件以及自定义插件。
八、拓展阅读
版权声明: 本文为 InfoQ 作者【No Silver Bullet】的原创文章。
原文链接:【http://xie.infoq.cn/article/bcad729449b668ff7c2db45ab】。文章转载请联系作者。
评论