vitepress教程 - 持续更新中~~
认识vitepress
什么是vitepress
是新技术? 是文档? 还是类似于html的网页?
不要猜了,俺也不明白。哈哈哈哈哈哈
常言道:不要问为什么,你要知道能干什么 —— big_BIN
能力
可以写文档 - 类似于markdown
可以写网站 - 类似于html
可以写博客 - 类似于blog等
到这里我们应该就明白了,哦~。大佬牛哄哄,我们苦哈哈
::: info 该说不说的,习惯了markdown的快捷键,在vscode里面不能用就很难受。有没有这方面了解较多的,给俺推荐下好用的插件 :::
准备
要使用vitepress,首先你要先了解几个步骤。就例如你想开飞机,首先你要先建一个机场那样。
这里介绍一些我所认识的抛开底层的步骤。 不要问为什么,问就是不知道。
安装
配置 - 看着高大上,其实就是ctrl C+V
写页面
感慨一下,尤大大太厉害了
安装
官方提供了几种安装方式,我们就按官方的来吧。
安装环境
::: code-group
#安装npm
npm i -D vitepress
#安装pnpm
pnpm add -D vitepress
#安装yarn
yarn add -D vitepress
:::
code-group - 代码组 是vitepress的语法,依赖于vitepress环境,所以没有出来
初始化环境 - 看好对应的安装方式
::: code-group
#初始化npm
npx vitepress init
#初始化pnpm
pnpm vitepress init
#初始化yarn
yarn vitepress init
:::
初始化配置
T Welcome to VitePress!
|
o Where should VitePress initialize the config?
| ./docs
|
o Site title:
| My Awesome Project
|
o Site description:
| A VitePress Site
|
o Theme:
| Default Theme
|
o Use TypeScript for config and theme files?
| Yes
|
o Add VitePress npm scripts to package.json?
| Yes
|
— Done! Now run npm run docs:dev and start writing.
如果你在初始化配置项的时候,你没有添加./docs
路径,那么你就需要在安装成功之后去修改配置了。那么我将欢迎你,为自己新增麻烦一次。
启动 - 看好对应的安装方式
::: code-group
#运行npm
npm run docs:dev
#运行pnpm
pnpm run docs:dev
#运行yarn
yarn docs:dev
:::
生成了一个本地 5173 端口的链接,可以对网站进行预览
此时,VitePress已经搭建好了一个基础的网站
http://localhost:5173/
到这里我们的准备工作都已经完成了。
还有一些详细的配置,需要参考官方文档vitepress快速上手
搭建完成之后,根据代码运行npm run dev:docs差不多就能看到下面的界面了
当然,文本当然是自己改的啦
转载自:https://juejin.cn/post/7352739150242840591