VuePress 目录配置

Data: 2015-12-18 19:02:14Form: JournalClick: 14

# 目录配置

# 一、目录结构

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: 客户端应用的增强。

# 二、基本配置

# 1、创建目录和文件

创建 .vuepress 目录
创建 config.js 文件

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

# 2、`config.js` 文件

module.exports = {
    title: "欧阳克个人博客",
    description: "学习并分享PHP、Linux、MySQL和前端技术等WEB知识。",
    head: [["link", { rel: "icon", href: "/logo.jpg" }]],
};

官网文档open in new window

配置项	数据类型	默认值	作用
base	string	/	部署站点的基础路径，如果你想让你的网站部署到一个子路径下，你将需要设置它。
title	string	undefined	网站的标题，它将会被用作所有页面标题的前缀，同时，默认主题下，它将显示在导航栏（navbar）上。
description	string	undefined	网站的描述，它将会以 `<meta>` 标签渲染到当前页面的 HTML 中。
head	Array	[]	额外的需要被注入到当前页面的 HTML `<head>` 中的标签。
host	string	'0.0.0.0'	指定用于 dev server 的主机名。
port	number	8080	指定 dev server 的端口。
temp	string	/path/to/@vuepress/core/.temp	指定客户端文件的临时目录。
dest	string	.vuepress/dist	指定 vuepress build 的输出目录。
locales	{[path: string]: Object}	undefined	提供多语言支持的语言配置。
shouldPrefetch	Function	() => true	一个函数，用来控制对于哪些文件，是需要生成 `<link rel="prefetch">` 资源提示的。
cache	boolean	true	VuePress 默认使用了 cache-loader (opens new window)来大大地加快 webpack 的编译速度。
extraWatchFiles	Array	[]	指定额外的需要被监听的文件

# 3、内部链接

每一个文件夹下的 README.md 或者 index.md 文件，对应的链接将被视为 /
新建 html 目录和 README.md 文件

# 这是 html 目录 下的文件

我是 PHP 程序员

VuePress 目录配置

# 目录配置

# 一、目录结构

# 二、基本配置

# 1、创建目录和文件

# 2、config.js 文件

# 3、内部链接

# 2、`config.js` 文件