天行健,君子以自强不息;地势坤,君子以厚德载物。
每个人都有惰性,但不断学习是好好生活的根本,共勉!
文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。
金陵子弟来相送,欲行不行各尽觞。
请君试问东流水,别意与之谁短长?
——《金陵酒肆留别》
文章目录
- 一、环境
- 1. Node环境
- 2. 包管理器
- 二、手动安装
- 1. 创建项目文件夹
- 2. 初始化项目
- 2.1 git初始化
- 2.2 npm初始化
- 3. 安装VuePress
- 3.1 安装vuepress
- 3.2 安装打包工具和主题
- 4. 创建docs和docs/.vuepress文件夹
- 4.1 docs
- 4.2 docs/.vuepress
- 4.3 .gitignore
- 5. 创建VuePress配置文件config.js
- 6. 创建文档
- 7. 项目目录结构
- 三、启动项目
- 1. scripts命令配置
- 2. 运行项目
- 3. 访问项目
- 四、站点配置
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-manual
2. 初始化项目
打开项目文件夹,在当前路径下打开cmd窗口
2.1 git初始化
如果需要使用git远程仓库的可以执行该命令,不需要则跳过,我这里执行
git init
2.2 npm初始化
初始化包管理器
npm init
执行命令后会弹出一些选项,多数情况下回车即可
package name: (vuepress-manual)
包名,可自定义,这里默认当前文件夹,回车
version: (1.0.0)
版本号,可自定义,这里默认,回车
description: this is a manual vuepress demo
描述,可自定义,这里随便输入一句话,回车
entry point: (index.js)
入口,默认index.js,回车
test command: test
测试命令,默认空,这里直接输入了test,回车
git repository:
远程仓库地址,默认空,这里先不输入,回车
keywords:
关键字,默认空,这里不输入,回车
author: libai
作者,默认空,这里输入libai,回车
license: (ISC)
证书协议,默认是ISC,回车
以上内容均可在package.json文件中修改
截图如下
最后会展示一下所配置的内容,然后输入y即可完成项目的初始化
3. 安装VuePress
3.1 安装vuepress
安装vuepress
npm install -D vuepress@next
3.2 安装打包工具和主题
安装打包工具和主题
npm install -D @vuepress/bundler-vite@next @vuepress/theme-default@next
4. 创建docs和docs/.vuepress文件夹
创建docs和docs/.vuepress文件目录
4.1 docs
在项目文件夹vuepress-manual下创建docs文件夹
docs 目录是你放置 Markdown 文件的地方,它同时也会作为 VuePress 的源文件目录。
4.2 docs/.vuepress
在docs文件夹下创建.vuepress文件夹
docs/.vuepress 目录,即源文件目录下的 .vuepress 目录,是放置所有和 VuePress 相关的文件的地方。
当前这里只有一个配置文件。默认还会在该目录下生成临时文件、缓存文件和构建输出文件。建议你把它们添加到 .gitignore 文件中。
4.3 .gitignore
后续远程仓库创建后会有该文件,不过也可以自己在本地先创建,为的就是忽略本地的一些不必要提交的文件类型
.gitignore文件内容如下,该文件位置与docs目录同级
# VuePress 默认临时文件目录
.vuepress/.temp
# VuePress 默认缓存目录
.vuepress/.cache
# VuePress 默认构建生成的静态文件目录
.vuepress/dist
5. 创建VuePress配置文件config.js
在docs/.vuepress目录下创建config.js
docs/.vuepress/config.js内容如下
import { viteBundler } from '@vuepress/bundler-vite'
import { defaultTheme } from '@vuepress/theme-default'
import { defineUserConfig } from 'vuepress'export default defineUserConfig({bundler: viteBundler(),theme: defaultTheme(),
})
6. 创建文档
在docs文件夹下创建第一个文档README.md
内容如下
# Hello World
7. 项目目录结构
最终的项目目录结构如下
├─ docs
│ ├─ .vuepress
│ │ └─ config.js
│ └─ README.md
└─ package.json
三、启动项目
在配置之前,使用启动命令npm run docs:dev会报错
1. scripts命令配置
在项目的package.json文件中的scripts部分添加以下内容
"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"
配置后
用npm run docs:dev
启动服务
用npm run docs:build
构建项目,然后可使用dist目录部署项目
在 docs/.vuepress/dist 目录中可以找到构建生成的静态文件
package.json完整内容如下
{"name": "vuepress-manual","version": "1.0.0","description": "this is a manual vuepress demo","main": "index.js","scripts": {"test": "test","docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"},"author": "libai","license": "ISC","devDependencies": {"@vuepress/bundler-vite": "^2.0.0-rc.15","@vuepress/theme-default": "^2.0.0-rc.42","vuepress": "^2.0.0-rc.15"}
}
2. 运行项目
执行命令运行项目
npm run docs:dev
运行后输出如下
3. 访问项目
可根据输出的访问地址访问项目
四、站点配置
关于站点的一些配置项,可参考文章进行定制化配置,如主题、导航栏等
VuePress搭建个人博客(配置)
感谢阅读,祝君暴富!