VitePress笔记一

VitePress介绍​

VitePress: 由Vite和Vue驱动的静态站点生成器 ，将Markdown变成优雅的文档，甚至你不会编程也可以快速使用。

四大优点：

• 专注内容 ： VitePress可以只需要Markdown即可轻松创建美观的文档站点，这正是技术人需要的一种方式。不折腾，少折腾。
• Vite加持 ： 在Vite工具的加持下，服务器即时启动，闪电般实现热更新，还可以使用基于Vite生态插件。
• 可自定义 ：直接在Markdown中使用Vue语法和组件，或者使用Vue组件构建自定义主题。
• 速度超快 ： 生成的网站采用静态HTML实现快速的页面初次加载，使用客户端路由实现快速的页面切换导航。

安装过程

1.安装node.js

2.安装VitePress

这里使用简单npm进行安装

$ npm add -D vitepress

上面的npm执行完成后，还需要执行一下安装向导，可以通过下面的命令启动向导：

$npx vitepress init

之后在命令行回答几个简单的问题

┌  Welcome to VitePress!  //欢迎来到VitePress
│
◇  Where should VitePress initialize the config?  //在哪里初始化项目
│  ./docs
│
◇  Site title: //网站标题
│  My Awesome Project
│
◇  Site description:  // 网站描述
│  A VitePress Site
│
◆  Theme:    // 主题
│  ● Default Theme (Out of the box, good-looking docs)
│  ○ Default Theme + Customization // 默认+自定义
│  ○ Custom Theme   //自定义
└

到这里我们完成了VitePress的安装，接下来就可以在终端中使用命令

$ npm run docs:dev

运行我们的文档了，这里用的是开发模式，运行结果如下。

$ npm run docs:dev 

> docs:dev     
> vitepress dev


  vitepress v1.0.1

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

然后我们在浏览器的地址栏输入http://localhost:5173/就可以打开一个默认样式的VitePress本地开发站点了。