文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

如何理解vitepress以及怎么将vuepress升为vitepress

2023-06-25 15:45

关注

如何理解vitepress以及怎么将vuepress升为vitepress,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

在vue3之前相信大家都用过或者听过vuepress,它是一个基于vue的静态网站生成器,可以用来写文档的。具体内容可以看VuePress官网。

但是现在有了vue3,也有了vite,然后就有了一个建立在vite之上的vitepress。(vitepress产生的动机可以去看官网,有说明)。

vitepress的优势

.vitepress/config.js

vitepress改进的地方

用了vue3

更轻量的页面

不同点

升级过程

以下使用的vitepress是v0.20.0的版本

安装vitepress

npm install vitepress

原来在使用vuepress的时候肯定会有一个docs文件夹(如果没有的话就可以自己创建一个)。

更改入口文件为index.md

注意:vuepress的入口文件是docs/readme.md,而vitepress的入口文件是index.md,所以这个地方要改一下原来readme的名字如果index.md没有其他内容,可以添加一些简单内容

---home: truetitle: 主页lang: en-USheroText: BIFE文档库tagline: 这是你的舞台,期待你的精彩actionText: Get StartedactionLink: /新人须知/first-dayfooter: MIT Licensed | Copyright © 2021-present CoolDream---

配置vitepress信息

export default {    base: '', // 项目的基础路径    title: '文档', // 文档的,会显示在    description: '前端技术文档', // 文档描述    lastUpdated: '上次更新时间', // string | boolean}

如果想要添加顶部的右侧导航,可以在themeConfig中添加

module.exports = {    themeConfig: {        // 顶部右侧导航        nav: [            { text: 'Home', link: '/first-day' },            {                text: 'Components',                link: '/test'            },        ],    }}

注意:nav中的导航链接需要跟链接的文件名字一致,区分大小写

添加左侧导航,也是在themeConfig中添加

需要注意

vuepress的链接children中是具体的链接,而显示的导航名称是每一个.md文件中的title

而vitepress的children中是一个对象数组,text表示导航名称,link才是真正的链接

如果有多个路由的话,一定要把默认的路由写在最后

module.exports = {    themeConfig: {        // 侧边栏        sidebar: [            '/CHANGLOG':[                {                    text: '更新日志'                }            ],            '/': [                {                    text: '新人须知',                    children: [                        {                          text: '入职第一天',                          link: '/first-day'                        },                        {                            text: '入职第一周',                            link: '/first-week'                        }                     ]                 }             ]        ],            }}

添加脚本到package.json

"scripts": {    "dev": "vitepress dev docs",    "build": "vitepress build docs",    "notice": "sh scripts/notice.sh" },

卸载vuepress

npm uninstall vuepress

升级中遇到的问题

多个路由切换的时候不生效

最初的时候把默认路由写在了最前面,发现切换路由的时候路由没有更新,还是默认的路由,后来发现需要把默认路由写在最后

themeConfig:{    // 侧边栏    sidebar: {        // 其他路由在前        'other-router':[],        // 默认路由在最后        '/': [            {                text: '新人须知',                children: [                    {                      text: '入职第一天',                      children: [                          {text: '电脑'}                      ]                    }                ]            }        ]     }}

markdown中table格式(build的时候会报错)

数据类型后不能要空格,报错的行数一点都对不上,导致找问题找了好久),具体如下图

如何理解vitepress以及怎么将vuepress升为vitepress

文件内部链接路径一定是.md或者省略,不能是其他文件类型(build的时候会报错)

vitepress会把路径的最后一级路径转换为*.html(如果是以/结尾的话,回去找文件夹下的index.md),如果是其他文件类型,如果*.txt,会导致找不到文件

markdown内部的链接不能包含有中文(build的时候会报错)

如果在markdown中有这样的链接格式[技术分享](/技术分享/WebComponents/),在npm run build的时候是会报错的,报错信息如下图,此时改用<a href="">标签链接就行

如何理解vitepress以及怎么将vuepress升为vitepress

markdown中的链接需要http协议(build的时候会报错)

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注编程网行业资讯频道,感谢您对编程网的支持。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯