비트프레스란 무엇인가요? vuepress를 vitepress로 업그레이드하는 방법은 무엇입니까?

비트프레스란 무엇인가요? 이 기사에서는 vitepress의 장점을 소개하고 vuepress를 vitepress로 업그레이드하는 방법을 소개합니다. 도움이 되기를 바랍니다.

vue3 이전에는 누구나 vuepress를 사용했거나 들어본 적이 있을 것입니다. 이는 문서 작성에 사용할 수 있는 vue 기반의 정적 웹 사이트 생성기입니다. 구체적인 내용은 VuePress 공식 홈페이지를 참고해주세요.
그런데 지금은 vue3이 있고, vite가 있고, 그 위에 vitepress가 있습니다. (Vitepress가 생성한 동기에 대해서는 공식 웹사이트에서 설명을 확인할 수 있습니다.) [관련 추천: "vue.js 튜토리얼"]

vitepress의 장점

• 웹팩 대신 vite 기반으로 모든 시작 시간 단축, 핫 리로드 등
• vue3을 사용하여 js 페이로드 줄이기

. vitepress/config.js

Vitepress 개선

vue3 사용

• vue3의 향상된 템플릿 정적 분석을 사용하여 정적 콘텐츠를 최대한 문자열화합니다.

• vue 사용

  • 개발 서비스 시작 속도 향상

  • 핫 업데이트가 더 빨라집니다

  • 더 빠르게 구축(롤업 사용)

더 가벼운 페이지

• vue 3 Tree Shake + 롤업 코드 분할
• 은 한 번의 요청으로 모든 페이지 메타데이터를 전송하지 않습니다. 클라이언트가 탐색할 때 새 페이지의 구성 요소와 메타데이터를 함께 가져옵니다
• vue-router를 사용할 필요가 없습니다
• (WIP) 필요에 따라 i18n 현지화 데이터가 요청됩니다

차이점

• vitepress 구성이 덜 필요합니다. vitepress의 목표는 현재 vuepress의 복잡성을 줄이고 미니멀리즘의 뿌리부터 다시 시작하는 것입니다
• 미래 지향적입니다. 대상 브라우저는 기본 ES 모듈 가져오기만 지원하는 브라우저입니다. 주제화를 위해 이스케이프 및 CSS 변수를 사용하는 대신 기본 js를 사용하도록 권장합니다

업그레이드 프로세스

아래에서 사용되는 vitepress 버전은 v0.20.0

1 버전입니다. vuepress를 사용할 때 docs 폴더(그렇지 않은 경우 직접 만들 수 있습니다).

2. 항목 파일을 index.md로 변경합니다docs文件夹（如果没有的话就可以自己创建一个）。

2、更改入口文件为index.md

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

npm install vitepress

3、配置vitepress信息

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

---
home: true
title: 主页
lang: en-US
heroText: BIFE文档库
tagline: 这是你的舞台，期待你的精彩
actionText: Get Started
actionLink: /新人须知/first-day
footer: MIT Licensed | Copyright © 2021-present CoolDream
---

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

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

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

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

需要注意

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

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

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

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

6、添加脚本到package.json中

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

7、卸载vuepress

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

升级中遇到的问题

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

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

npm uninstall vuepress

markdown中table格式（build的时候会报错）

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

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

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

🎜참고: vuepress의 항목 파일은 docs/readme.md이고, vitepress의 항목 파일은 index.md이므로 원본 이름을 변경해야 합니다. 여기에서 읽어보세요🎜index.md에 다른 콘텐츠가 없으면 간단한 콘텐츠를 추가할 수 있습니다🎜

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

🎜3. vitepress 정보 구성🎜🎜🎜.vitepress 폴더를 생성하세요🎜🎜.vitepress config.js🎜🎜config.js🎜🎜rrreee🎜4에 구성 정보를 추가하세요. 상단에 올바른 탐색을 추가하려면. , themeConfigAdd에 추가할 수 있습니다. 🎜rrreee🎜🎜참고: nav의 탐색 링크는 연결된 파일 이름과 동일해야 하며 대소문자를 구분합니다🎜🎜🎜5. 왼쪽 탐색도 추가합니다. 🎜🎜🎜🎜vuepress의 링크 하위는 특정 링크이고 표시되는 탐색 이름은 각 .md 파일의 제목입니다🎜🎜🎜🎜. 반면 vitepress의 하위는 는 객체 배열이고 텍스트는 탐색 이름을 나타냅니다. 링크는 실제 링크입니다🎜🎜🎜🎜경로가 여러 개인 경우 반드시 끝에 기본 경로를 작성하세요🎜🎜rrreee🎜6. package.json🎜rrreee🎜 7. vuepress 제거🎜rrreee

업그레이드 중 발생하는 문제🎜

걸리지 않습니다 여러 경로를 전환할 때의 효과🎜🎜처음에는 기본 경로를 앞쪽에 썼는데 경로를 전환해도 경로가 업데이트되지 않고 여전히 기본 경로인 것을 발견했습니다. 나중에 에서 기본 경로를 써야 한다는 것을 알았습니다. end🎜rrreee

마크다운의 테이블 형식(빌드 시 오류가 보고됩니다.) 🎜🎜 오류에 보고된 줄 수는 데이터 유형 뒤에 공백이 있어서는 안 됩니다. 전혀 일치하지 않아 문제를 검색하는 데 오랜 시간이 걸립니다), 아래와 같이 🎜🎜🎜

파일 내부 링크 경로는 .md 또는 생략 가능해야 하며, 다른 파일 형식일 수 없습니다. (빌드 시 오류가 보고됩니다.) 🎜🎜vitepress는 경로의 마지막 수준을 *.html로 변환합니다(끝에서 /로 시작하는 경우 뒤로 이동 폴더에서 index.md)를 찾아보세요. 다른 파일 형식이면 *.txt 파일을 찾을 수 없습니다.

마크다운 내부의 링크는 중국어를 포함할 수 없습니다(빌드 시 오류가 보고됩니다)

마크다운에 이러한 링크 형식이 있는 경우 [技术分享](/技术分享/WebComponents/),在npm run build的时候是会报错的，报错信息如下图，此时改用<a href=""></a>태그 링크는 괜찮습니다

마크다운의 링크에는 http 프로토콜이 필요합니다(오류는 빌드 시 보고됨)

http 프로토콜이 없으면 오류도 보고됩니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 입문을 방문하세요! !

위 내용은 비트프레스란 무엇인가요? vuepress를 vitepress로 업그레이드하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!