VuePress搭建文档网站/个人博客(一键安装)


天行健,君子以自强不息;地势坤,君子以厚德载物。


每个人都有惰性,但不断学习是好好生活的根本,共勉!


文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。


一枝红艳露凝香,云雨巫山枉断肠。
借问汉宫谁得似,可怜飞燕倚新妆。
——《清平调三首·其二》



VuePress个人博客专栏


VuePress 是一个以 Markdown 为中心的静态网站生成器。
相关介绍可参考官网:https://vuepress.vuejs.org/zh/guide/introduction.html

一、环境

1. Node环境

Node.js版本不低于18.19.0

2. 包管理器

需要使用包管理器(如pnpm、yarn、npm等),一般安装ndoe后都会包含npm
注意:
使用pnpm需要安装vue作为peer-dependencies
使用yarn 2+需要在.yarnrc.yml文件中设置nodeLinker: ‘node-modeules’

这里我们使用npm包管理器,即npm命令

二、自动安装

官网教程:https://vuepress.vuejs.org/zh/guide/getting-started.html

1. 创建项目文件夹

在本地创建项目文件夹vuepress-test
在这里插入图片描述

2. 初始化项目

打开项目文件夹,在当前路径下打开cmd窗口
在这里插入图片描述
执行命令,自动安装vuepress

npm init vuepress vuepress-test

执行命令后会弹出一些选项,上下键切换选项,多数情况下回车即可
Select a language to display / 选择显示语言 english (US) 选择显示语言,可选中文或英文,这里选了英文,然后回车
Choose package manager npm 选择包管理器,这里选npm
Which bundler do you wang to use? vite 基于什么构建项目,这里选vite
What type of project do you want to create? docs 你想创建什么类型的项目,这里选择docs
Your project name vuepress-test 你的项目名称,这里会显示之前命令中输入的vuepress-test
Your project version 0.0.1 项目版本,默认0.0.1
Your project description A VuePress project 项目描述,这里默认是A VuePres project
Your project license MIT 项目的证书协议,默认MIT
Do you need a GitHub workflow to deploy docs on GitHub pages? No 是否需要GitHub工作流来在GitHub页面上部署文档,暂时不需要

回车后会开始构建项目
构建完成后会提示是否需要访问模版,这里先不访问
Would you like to preview template now? No
回车后会提示执行命令npm run docs:dev启动服务

以上内容均可在package.json文件中修改
截图如下
在这里插入图片描述

最后会展示一下所配置的内容,然后输入y即可完成项目的初始化

三、启动项目

1. 运行项目

执行命令运行项目

npm run docs:dev

运行后输出如下
在这里插入图片描述

2. 访问项目

可根据输出的访问地址访问项目
在这里插入图片描述

四、站点配置

关于站点的一些配置项,可参考文章进行定制化配置,如主题、导航栏等
VuePress搭建个人博客(配置)


感谢阅读,祝君暴富!


猜你喜欢

转载自blog.csdn.net/mo_sss/article/details/141933245