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

2023-06-25 15:06:56 254人浏览安东尼

摘要

如何理解vitepress以及怎么将Vuepress升为vitepress，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。在vue3之前相信大家都用过或者听过vu

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

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

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

vitepress的优势

基于vite而不是webpack，所有更快的启动时间，热重载等
使用vue3来减少js的有效负载

.vitepress/config.js

vitepress改进的地方

用了vue3

利用了vue3的改进的模板静态分析来尽可能字符串化静态内容
使用了vite

更快的dev服务启动
热更新更快
构建更快（使用了Rollup）

更轻量的页面

vue 3 树摇 + Rollup 代码分离
不会把所有页面的元数据都在一个请求中发送出去。客户端导航时再一起获得新页面的组件及元数据
没有用vue-router
（WIP）i18n本地化数据根据需要请求

不同点

vitepress少的配置。vitepress目标是所减掉当前vuepress的复杂性并从极简主义的根源重新开始
是面向未来的：其目标浏览器是只支持原生ES模块导入的浏览器。鼓励使用原生的js而不是用转义以及使用CSS变量来主体化

升级过程

以下使用的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信息

创建.vitepress文件夹
在.vitepress下创建配置文件config.js
在config.js中添加配置信息

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: '电脑'}                      ]                    }                ]            }        ]     }}