什麼是vitepress？怎麼將vuepress升為vitepress？-Vue.js-PHP中文網

什麼是vitepress？怎麼將vuepress升為vitepress？

青灯夜游

發布： 2021-11-15 18:54:34

轉載

5331 人瀏覽過

什麼是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: &#39;&#39;, // 项目的基础路径
    title: &#39;文档&#39;, // 文档的标题，会显示在
    description: &#39;前端技术文档&#39;, // 文档描述
    lastUpdated: &#39;上次更新时间&#39;, // string | boolean
}

登入後複製

4、如果想要新增頂部的右側導航，可以在themeConfig中加入

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

登入後複製

注意：nav中的導航連結需要跟連結的檔案名稱一致，區分大小寫

5、新增左側導航,也是在themeConfig中加入

需要注意

vuepress的連結children中是具體的鏈接，而顯示的導航名稱是每個.md檔案中的title

而vitepress的children中是一個物件數組，text表示導航名稱，link才是真正的連結

如果有多個路由的話，一定要把預設的路由寫在最後

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

登入後複製

6、新增腳本到package.json中

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

登入後複製

7、卸載vuepress

npm uninstall vuepress

登入後複製

升級中遇到的問題

多個路由切換的時候不生效

最初的時候把預設路由寫在了最前面，發現切換路由的時候路由沒有更新，還是預設的路由，後來發現需要把預設路由寫在最後

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

登入後複製