VuePress、VuePress-theme-hope 搭建个人博客 1【快速上手】 —— 防止踩坑篇

vuePress官网地址 👉 首页 | VuePress

手动安装

这一章节会帮助你从头搭建一个简单的 VuePress 文档网站。如果你想在一个现有项目中使用 VuePress 管理文档,从步骤 3 开始。

  • 步骤 1: 创建并进入一个新目录

mkdir vuepress-starter

cd vuepress-starter

  • 步骤 2: 初始化项目

git init

npm init

  • 步骤 3: 将 VuePress 安装为本地依赖

npm install -D vuepress@next

  • 步骤 4 : 在 package.json 中添加一些 scripts
javascript 复制代码
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
  • 步骤 5 : 将默认的临时目录和缓存目录添加到 .gitignore 文件中

Tips:若本地没有.gitignore 文件,手动添加一个.gitignore即可。

echo 'node_modules' >> .gitignore

echo '.temp' >> .gitignore

echo '.cache' >> .gitignore

  • 步骤 6: 创建你的第一篇文档

mkdir docs

echo '# Hello VuePress' > docs/README.md

  • 步骤 7: 在本地启动服务器来开发你的文档网站

npm run docs:dev

VuePress 会在 http://localhost:8080在新窗口打开 启动一个热重载的开发服务器。当你修改你的 Markdown 文件时,浏览器中的内容也会自动更新。

现在,你应该已经有了一个简单可用的 VuePress 文档网站。

VuePress 有一个开箱即用的默认主题,如果你不指定要使用的主题,那么会自动使用默认主题。

Vuepress-Theme-Hope搭建个人博客示例👇

安装

[dir] 文件夹内新建 vuepress-theme-hope 项目:

npm init vuepress-theme-hope [dir]

要将 vuepress-theme-hope 作为文档构建器添加到现有项目中,请在项目根目录中运行以下命令:

npm init vuepress-theme-hope add [dir]

TIps:这里的 [dir] 是一个参数,你需要使用真实的文件夹名称替换它,例如 docsblog 或其他你喜欢的名称。

创建项目

在创建项目的过程中,会有一些选项让你选择:

创建项目的类型:文档docs类型

如果你在模板初始化成功后选择立即启动开发服务器,稍等片刻,你就可以在浏览器地址栏输入 localhost:8080/ 访问开发服务器了。

将会看到👇界面:

创建项目的类型:博客blog类型

如果你在模板初始化成功后选择立即启动开发服务器,稍等片刻,你就可以在浏览器地址栏输入 localhost:8080/ 访问开发服务器了。

将会看到👇界面:

可参考自定义主题👇

主页 | VuePress-theme-hope

主页 | vuepress-theme-rceo

相关推荐
快起来别睡了1 分钟前
Vue 中组件的生命周期与 v-if、v-show 的区别详解
前端·vue.js
扶我起来还能学_38 分钟前
uniapp Android&iOS 定位权限检查
android·javascript·ios·前端框架·uni-app
张旭超1 小时前
vue3 + element-plus el-table表格二次封装,支持复选框,排序,分页。
前端·vue.js
亿坊电商1 小时前
VUE混合开发,选哪个PHP框架最顺手?
前端·vue.js·php
程序猿小D1 小时前
[附源码+数据库+毕业论]基于Spring Boot+mysql+vue结合内容推荐算法的学生咨询系统
数据库·vue.js·spring boot·mysql·毕业设计·推荐算法·学生咨询系统
我爱加班、、2 小时前
element-plus表单校验失败问题
前端·javascript·vue.js·elementui·ecmascript
香香甜甜的辣椒炒肉2 小时前
vue快速上手
前端·javascript·vue.js
大菠萝学姐2 小时前
基于Spring Boot和Vue的高校图书馆座位预约系统的设计与实现
java·vue.js·spring boot·后端·python·mysql·vue
掘金012 小时前
吊炸天!Vue 3组件生命周期全掌控 —— 可复用Composable黑科技封装指南
vue.js
咔咔咔索菲斯3 小时前
Vue 中mounted 生命周期钩子的执行时机和 v-for 的渲染顺序
前端·javascript·vue.js