VitePress 是 VuePress 的下一代框架

VuePress應(yīng)該有人用過，而 VitePress 是 VuePress 的下一代框架 ，是支持vue 3.0 的web網(wǎng)站框架。

在它的文檔中被稱為 Vuepress 的兄弟,對比有一些優(yōu)勢,我覺的主要是啟動速度快！

• 基于 Vite 而不是 Webpack 所以更快的啟動時間，熱重載等
• 使用 Vue3 來減少 JS 的有效負載

創(chuàng)建

1. 首先，我們要做的第一件事就是創(chuàng)建目錄。

mkdir blog-vitepress
cd blog-vitepress

2. 初始化 package.json ，并安裝 viteppress

npm init
npm i --save-dev vitepress

3. 將 VitePress 腳本添加到 package.json 文件中。

"scripts": {
  "dev": "vitepress dev docs --open",
  "build": "vitepress build docs",
  "serve": "vitepress serve docs"
},

4. 根目錄下創(chuàng)建 docs 文件夾，并創(chuàng)建第一個md文件(這個是網(wǎng)站首頁的配置和內(nèi)容)，可以用命令行或在文件夾手動創(chuàng)建。

mkdir docs
echo '# Hello World' > docs/index.md

5. 啟動項目

npm run dev

到這里，最基本的項目搭建好了

簡單配置

添加一些導航到我們的網(wǎng)站側(cè)邊欄和導航欄。創(chuàng)建一個配置文件，在docs中新建一個.vitepress文件夾，里面創(chuàng)建一個config.js文件

// vitepress/config.js
module.exports = {
    title: "GuangJus's Blog",// 網(wǎng)站標題
    description: '我的vitepress博客.', //網(wǎng)站描述
    base: '/', //  部署時的路徑 默認 /  可以使用二級地址 /base/
    // lang: 'en-US', //語言
    repo: 'vuejs/vitepress',
    head: [
        // 改變title的圖標
        [
            'link',
            {
                rel: 'icon',
                href: '/img/linktolink.png',//圖片放在public文件夾下
            },
        ],
    ],
    // 主題配置
    themeConfig: {
        //   頭部導航
        nav: [
            { text: '首頁', link: '/' },
            { text: '關(guān)于', link: '/about/' },
        ],
        //   側(cè)邊導航
        sidebar: [
            { text: '我的', link: '/mine/' }
        ]
    }
}

這時的項目結(jié)構(gòu):

vitepress
    │
    ├─── docs
    │     │
    │     ├── .vuepress
    │     │     └── config.js
    │     ├── public
    │     ├── about
    │     │     └── index.js
    │     ├── mine
    │     │     └── index.js
    │     └── index.md
    └── package.json

項目基本創(chuàng)建好了，可以根據(jù)自己的需要，自定義其他目錄。

vitepress 剛出來沒多久，功能還正在完善，也就是說還有好多不支持的東西，正式版發(fā)布后，我也會更新。

文章鏈接