[呆子^笔记]用vuepress搭建个人Blog[之一]

  • 关于VewPress
  • 环境搭建并创建第一个项目
  • 项目目录结构



近期需要搭建一个个人Blog，之前用wordpress搭建过公司网站，但是此时觉得太重了。正好看项目组其他同事在用Vue，找到一个VuePress项目，把搭建过程记录一下，分享给小小白们。[呆子^笔记]为了避免读者踩坑，过程会比较细，所有步骤尽量会把环境描述清楚，一是为自己记录一个详实笔记，二是适合小小白们阅读，小小的坑也不放过，要填一下，高手可以绕道。

关于VewPress

关于VuePress这里不多做介绍了，可以参考官方文档。
https://vuepress.vuejs.org/zh/ 意外之喜是VuePress大量使用MarkDown，顺便熟悉一下。

环境搭建并创建第一个项目

根据官网 <快速入门> 的提示

vuepress 自动生成目录 vuepress blog_vuepress 自动生成目录


首先安装Node.js 本文安装的版本是node-v16.13.0-x64

为了保持连续性，以下内容引用自VuePress官网 <快速入门>

1、创建并进入一个新目录
mkdir vuepress-starter && cd vuepress-starter

2、使用你喜欢的包管理器进行初始化
yarn init # npm init

3、将 VuePress 安装为本地依赖
我们已经不再推荐全局安装 VuePress
yarn add -D vuepress # npm install -D vuepress

这里如果你是新装的Node.js，便需要先安装一下yarn

npm install -g yarn

在yarn init的过程中可以填写项目相关信息。

d:\xxx\vuepress-starter>yarn init
yarn init v1.22.17
question name (vuepress-starter):
question version (1.0.0):
question description:
question entry point (index.js):
question repository url:
question author:
question license (MIT):
question private:
success Saved package.json
Done in 12.32s.

继续下面的步骤

4、创建你的第一篇文档
mkdir docs && echo ‘# Hello VuePress’ > docs/README.md

5、在 package.json 中添加一些 scripts(opens new window)
这一步骤是可选的，但我们推荐你完成它。在下文中，我们会默认这些 scripts 已经被添加。
{
“scripts”: {
“docs:dev”: “vuepress dev docs”,
“docs:build”: “vuepress build docs”
}
}

6、在本地启动服务器
yarn docs:dev # npm run docs:dev

这里不太熟悉json语法的同学要注意检查一下，否则启动服务器时会失败。这里贴出修改后完整的package.json文件：

{
  "name": "vuepress-starter",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "vuepress": "^1.8.2"
  },
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

OK，如果上面步骤一切顺利，打开浏览器，你将会看到一个简单的网页。

vuepress 自动生成目录 vuepress blog_前端_02

项目目录结构

以下内容摘选自VuePress官网 <目录结构>，略作简化。

.
├── docs
│ ├─ .vuepress (可选的)
│ │ ├── components (可选的)
│ │ ├── theme (可选的)
│ │ │ └── Layout.vue
│ │ ├── public (可选的)
│ │ ├── styles (可选的)
│ │ └── config.js (可选的)
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md
└── package.json

docs/.vuepress: 用于存放全局的配置、组件、静态资源等。
docs/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。
docs/.vuepress/theme: 用于存放本地主题。
docs/.vuepress/styles: 用于存放样式相关的文件。
docs/.vuepress/public: 静态资源目录。
docs/.vuepress/config.js: 配置文件的入口文件，也可以是 YML 或 toml。
docs/.vuepress/enhanceApp.js: 客户端应用的增强。