VitePress 是 VuePress 的下一代框架

VuePress应该有人用过，而 VitePress 是 VuePress 的下一代框架 ，是反对vue 3.0 的web网站框架。

在它的文档中被称为 Vuepress 的兄弟,比照有一些劣势,我觉的次要是启动速度快！

  • 基于 Vite 而不是 Webpack 所以更快的启动工夫，热重载等
  • 应用 Vue3 来缩小 JS 的无效负载

创立

  1. 首先，咱们要做的第一件事就是创立目录。
mkdir blog-vitepresscd blog-vitepress
  1. 初始化 package.json ，并装置 viteppress
npm initnpm i --save-dev vitepress
  1. 将 VitePress 脚本增加到 package.json 文件中。
"scripts": {  "dev": "vitepress dev docs --open",  "build": "vitepress build docs",  "serve": "vitepress serve docs"},
  1. 根目录下创立 docs 文件夹，并创立第一个md文件(这个是网站首页的配置和内容)，能够用命令行或在文件夹手动创立。
mkdir docsecho '# Hello World' > docs/index.md
  1. 启动我的项目
npm run dev

到这里，最根本的我的项目搭建好了

简略配置

增加一些导航到咱们的网站侧边栏和导航栏。创立一个配置文件，在docs中新建一个.vitepress文件夹，外面创立一个config.js文件

// vitepress/config.jsmodule.exports = {    title: "GuangJus's Blog",// 网站题目    description: '我的vitepress博客.', //网站形容    base: '/', //  部署时的门路 默认 /  能够应用二级地址 /base/    // lang: 'en-US', //语言    repo: 'vuejs/vitepress',    head: [        // 扭转title的图标        [            'link',            {                rel: 'icon',                href: '/img/linktolink.png',//图片放在public文件夹下            },        ],    ],    // 主题配置    themeConfig: {        //   头部导航        nav: [            { text: '首页', link: '/' },            { text: '对于', link: '/about/' },        ],        //   侧边导航        sidebar: [            { text: '我的', link: '/mine/' }        ]    }}

这时的我的项目构造:

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

我的项目根本创立好了，能够依据本人的须要，自定义其余目录。

vitepress 刚进去没多久，性能还正在欠缺，也就是说还有好多不反对的货色，正式版公布后，我也会更新。

文章链接