本站初始化

提示

• VuePress 需要 Node.js (opens new window)版本 >= 8.6

初始化项目

• 本地新建目录 vuepress-vdoing-blog，并使用 VScode 打开该目录

• VScode 中 Ctrl + ` 打开终端，使用你喜欢的包管理器进行初始化

yarn init

npm init

// Make sure to add code blocks to your code group

根据提示填写对应信息，可以不写直接回车，后面可以在生成的 package.json 中写上

• 将 VuePress 安装为本地依赖

yarn add -D vuepress

npm install -D vuepress

// Make sure to add code blocks to your code group

注意

• 不再推荐全局安装 VuePress
• 如果你的现有项目依赖了 webpack 3.x，推荐使用 Yarn 而不是 npm 来安装 VuePress。因为在这种情形下，npm 会生成错误的依赖树。

• 在根目录下新建 docs 目录

mkdir docs # 之后源码，配置，博客文档都存放于该目录下

• 进入 docs 目录，创建 index.md 首页配置文档

---
home: true
heroImage: https://vuepress.vuejs.org/hero.png
heroText: VuePress # 标题
tagline: Vue 驱动的静态网站生成器 # 副标题
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue 驱动
  details: 享受 Vue + webpack 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 会为每个页面预渲染生成静态的 HTML，同时，每个页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---

提示

此时我们使用的是默认主题，默认主题提供了一个首页（Homepage）的布局 (用于这个网站的主页)。想要使用它，需要在你的根级 index.md 的 YAML front matter 指定 home: true。
默认主题详细配置 (opens new window)

• 在 package.json 中添加 scripts 指令

{
  ...
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
}

• 启动本地服务器

yarn dev

npm run dev

// Make sure to add code blocks to your code group

VuePress 会在 http://localhost:8080 (opens new window) 启动一个热重载的开发服务器。
点击上面地址，在浏览器中打开，你会发现这跟 VuePress 官网 (opens new window) 首页上半部分一样

你可以在 index.md 的 YAML front matter 下添加以下内容就一样了

### 像数 1, 2, 3 一样容易

​```sh
# 安装
yarn global add vuepress # 或者：npm install -g vuepress

# 新建一个 markdown 文件
echo '# Hello VuePress!' > README.md

# 开始写作
vuepress dev .

# 构建静态文件
vuepress build .
​```

::: warning 注意
请确保你的 Node.js 版本 >= 8.6。
:::

目录结构

官方目录结构

VuePress 遵循 “约定优于配置” 的原则，官方推荐的目录结构如下：

.
├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json

目录结构说明

• docs/.vuepress: 用于存放全局的配置、组件、静态资源等。
• docs/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。
• docs/.vuepress/theme: 用于存放本地主题。
• docs/.vuepress/styles: 用于存放样式相关的文件。
• docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级。
• docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量，或者设置新的 stylus 颜色常量。
• docs/.vuepress/public: 静态资源目录。
• docs/.vuepress/templates: 存储 HTML 模板文件。
• docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。
• docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。
• docs/.vuepress/config.js: 配置文件的入口文件，也可以是 YML 或 toml。
• docs/.vuepress/enhanceApp.js: 客户端应用的增强。

本站目录结构

本站整体目录结构如下，接下来也是基于此目录结构创建相应文件的

. (根目录 vuepress-vdoing-blog)
├── .github (GitHub 相关文件)
│   ├── workflows
│   │   ├── ci.yml (github action 自动部署)
│   │   └── gitee.yml (同步并部署到gitee)
├── docs (必须，不要修改文件夹名称)
│   ├── .vuepress
│   │   ├── config (配置文件)
│   │   │   ├── themeConfig (主题配置文件目录)
│   │   │   ├── plugins.js (插件配置)
│   │   │   ├── secrets.js (私密数据配置)
│   │   │   ├── themeConfig.js (主题配置文件的入口文件)  
│   │   │   ├── webpack.js (webpack配置)
│   │   ├── public (静态资源目录)
│   │   │   ├── img 
│   │   ├── styles (样式相关的文件)
│   │   │   ├── index.styl (将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级)
│   │   │   ├── palette.styl (vdoing主题-样式变量，你可以修改这些变量值以覆盖主题使用的样式变量)
│   │   ├── theme (继承的Vdoing主题)
│   │   │   ├── components (覆盖或新建的组件) 
│   │   │   ├── index.js 
│   │   ├── config.js (配置文件的入口文件)
│   ├── @pages (自动生成的文件夹，存放分类页、标签页、归档页)
│   ├── _posts (专门存放碎片化博客文章的文件夹)
│   ├── <结构化目录> (包含目录页，博客文章)
│   └── index.md (首页)
├── deploy.sh (本地部署命令脚本)
├── .gitignore
├── LICENSE
├── README.md
└── package.json

windows 下使用tree /f > tree.txt命令，就可以把打印出的树状目录结构写入到 tree.txt 文件中。