目录
vitepress的优势
vitepress改进的地方
用了vue3
更轻量的页面
不同点
升级过程
升级中遇到的问题
多个路由切换的时候不生效
markdown中table格式(build的时候会报错)
文件内部链接路径一定是.md或者省略,不能是其他文件类型(build的时候会报错)
markdown内部的链接不能包含有中文(build的时候会报错)
markdown中的链接需要http协议(build的时候会报错)
首页 web前端 Vue.js 什么是vitepress?怎么将vuepress升为vitepress?

什么是vitepress?怎么将vuepress升为vitepress?

Nov 15, 2021 pm 06:50 PM
vue.js vuepress

什么是vitepress?本篇文章带大家了解一下vitepress的优势,介绍一下vuepress升级成vitepress的方法,希望对大家有所帮助!

什么是vitepress?怎么将vuepress升为vitepress?

在vue3之前相信大家都用过或者听过vuepress,它是一个基于vue的静态网站生成器,可以用来写文档的。具体内容可以看VuePress官网
但是现在有了vue3,也有了vite,然后就有了一个建立在vite之上的vitepress。(vitepress产生的动机可以去看官网,有说明)。【相关推荐:《vue.js教程》】

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的版本

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: '更新日志'
                }
            ],
            '/': [
                {
                    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':[],
        // 默认路由在最后
        '/': [
            {
                text: '新人须知',
                children: [
                    {
                      text: '入职第一天',
                      children: [
                          {text: '电脑'}
                      ]
                    }
                ]
            }
        ]
     }
}
登录后复制

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

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

1.png

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

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

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

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

2.png

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

如果没有http协议同样会报错

更多编程相关知识,请访问:编程入门!!

以上是什么是vitepress?怎么将vuepress升为vitepress?的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

vue项目中借助vue-cropper做图片裁剪 vue项目中借助vue-cropper做图片裁剪 Oct 31, 2022 pm 07:16 PM

vue项目中借助vue-cropper做图片裁剪

深入聊聊vue3中的reactive() 深入聊聊vue3中的reactive() Jan 06, 2023 pm 09:21 PM

深入聊聊vue3中的reactive()

实战:vscode中开发一个支持vue文件跳转到定义的插件 实战:vscode中开发一个支持vue文件跳转到定义的插件 Nov 16, 2022 pm 08:43 PM

实战:vscode中开发一个支持vue文件跳转到定义的插件

图文详解如何在Vue项目中集成Ace代码编辑器 图文详解如何在Vue项目中集成Ace代码编辑器 Apr 24, 2023 am 10:52 AM

图文详解如何在Vue项目中集成Ace代码编辑器

探讨如何在Vue3中编写单元测试 探讨如何在Vue3中编写单元测试 Apr 25, 2023 pm 07:41 PM

探讨如何在Vue3中编写单元测试

浅析Vue3动态组件怎么进行异常处理 浅析Vue3动态组件怎么进行异常处理 Dec 02, 2022 pm 09:11 PM

浅析Vue3动态组件怎么进行异常处理

vue中组件化和模块化有什么区别 vue中组件化和模块化有什么区别 Dec 15, 2022 pm 12:54 PM

vue中组件化和模块化有什么区别

深入探讨vite是怎么解析.env文件的 深入探讨vite是怎么解析.env文件的 Jan 24, 2023 am 05:30 AM

深入探讨vite是怎么解析.env文件的

See all articles