什么是vitepress?本篇文章带大家了解一下vitepress的优势,介绍一下vuepress升级成vitepress的方法,希望对大家有所帮助!
在vue3之前相信大家都用过或者听过vuepress,它是一个基于vue的静态网站生成器,可以用来写文档的。具体内容可以看VuePress官网。
但是现在有了vue3,也有了vite,然后就有了一个建立在vite之上的vitepress。(vitepress产生的动机可以去看官网,有说明)。【相关推荐:《vue.js教程》】
.vitepress/config.js
利用了vue3的改进的模板静态分析来尽可能字符串化静态内容
使用了vite
更快的dev服务启动
热更新更快
构建更快(使用了Rollup)
以下使用的vitepress是v0.20.0的版本
1、安装vitepress
npm install vitepress
原来在使用vuepress的时候肯定会有一个docs
文件夹(如果没有的话就可以自己创建一个)。
2、更改入口文件为index.md
注意:vuepress的入口文件是docs/readme.md,而vitepress的入口文件是index.md,所以这个地方要改一下原来readme的名字如果index.md没有其他内容,可以添加一些简单内容
--- home: true title: 主页 lang: en-US heroText: BIFE文档库 tagline: 这是你的舞台,期待你的精彩 actionText: Get Started actionLink: /新人须知/first-day footer: MIT Licensed | Copyright © 2021-present CoolDream ---
3、配置vitepress信息
.vitepress
文件夹.vitepress
下创建配置文件config.js
config.js
中添加配置信息export default { base: '', // 项目的基础路径 title: '文档', // 文档的标题,会显示在 description: '前端技术文档', // 文档描述 lastUpdated: '上次更新时间', // string | boolean }
4、如果想要添加顶部的右侧导航,可以在themeConfig
中添加
module.exports = { themeConfig: { // 顶部右侧导航 nav: [ { text: 'Home', link: '/first-day' }, { text: 'Components', link: '/test' }, ], } }
注意:nav中的导航链接需要跟链接的文件名字一致,区分大小写
5、添加左侧导航,也是在themeConfig
中添加
需要注意
vuepress的链接children中是具体的链接,而显示的导航名称是每一个.md文件中的title
而vitepress的children中是一个对象数组,text表示导航名称,link才是真正的链接
如果有多个路由的话,一定要把默认的路由写在最后
module.exports = { themeConfig: { // 侧边栏 sidebar: [ '/CHANGLOG':[ { text: '更新日志' } ], '//m.sbmmt.com/m/': [ { text: '新人须知', children: [ { text: '入职第一天', link: '/first-day' }, { text: '入职第一周', link: '/first-week' } ] } ] ], } }
6、添加脚本到package.json
中
"scripts": { "dev": "vitepress dev docs", "build": "vitepress build docs", "notice": "sh scripts/notice.sh" },
7、卸载vuepress
npm uninstall vuepress
最初的时候把默认路由写在了最前面,发现切换路由的时候路由没有更新,还是默认的路由,后来发现需要把默认路由写在最后
themeConfig:{ // 侧边栏 sidebar: { // 其他路由在前 'other-router':[], // 默认路由在最后 '//m.sbmmt.com/m/': [ { text: '新人须知', children: [ { text: '入职第一天', children: [ {text: '电脑'} ] } ] } ] } }
数据类型后不能要空格,报错的行数一点都对不上,导致找问题找了好久),具体如下图
vitepress会把路径的最后一级路径转换为*.html
(如果是以/
结尾的话,回去找文件夹下的index.md
),如果是其他文件类型,如果*.txt
,会导致找不到文件
如果在markdown中有这样的链接格式[技术分享](/技术分享/WebComponents/)
,在npm run build
的时候是会报错的,报错信息如下图,此时改用<a href="">
标签链接就行
如果没有http协议同样会报错
更多编程相关知识,请访问:编程入门!!
以上就是什么是vitepress?怎么将vuepress升为vitepress?的详细内容,更多请关注php中文网其它相关文章!
已抢23139个
抢已抢117540个
抢已抢139114个
抢已抢6186个
抢已抢35128个
抢已抢7788个
抢