共计 2160 个字符，预计需要花费 6 分钟才能阅读完成。
VuePress
VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。
由 VuePress 生成的每个页面，都具有相应的预渲染静态 HTML，它们能提供出色的加载性能，并且对 SEO 友好。然而，页面加载之后，Vue 就会将这些静态内容，接管为完整的单页面应用程序 (SPA)。当用户在浏览站点时，可以按需加载其他页面。
VuePress 中文网
环境搭建
安装
Node.js 版本需要 >= 8 才可以。
npm install -g vuepress 或者在已有项目中安装
npm install vuepress -D安装完成检测是否安装成功
vuepress -v
//vuepress v1.0.3其他信息：
vuepress v1.0.3
Usage:
$ vuepress <command> [options]
Commands:
dev [targetDir] start development server
build [targetDir] build dir as static site
eject [targetDir] copy the default theme into .vuepress/theme for customization.
info Shows debugging information about the local environment
For more info, run any command with the `--help` flag:
$ vuepress dev --help
$ vuepress build --help
$ vuepress eject --help
$ vuepress info --help
Options:
-v, --version Display version number
-h, --help Display this message 创建项目
mkdir VuePress
cd VuePress初始化项目
通过 npm init 快速创建项目的 pageage.json 文件
npm init -y{
"name": "VuePress",
"version": "1.0.0",
"description": "","main":"index.js","scripts": {"test":"echo \"Error: no test specified\" && exit 1"},"keywords": [],"author":"",
"license": "ISC"
}新建 docs 文件夹
docs 文件夹作为项目文档根目录，主要放置 Markdown 类型的文章和.vuepress 文件夹。
mkdir docs设置 package.json
在 script 中添加 dev 启动和 build 打包脚本命令
"scripts": {
"test": "echo \"Error: no test specified\"&& exit 1",
"dev": "vuepress dev docs",
"build": "vuepress build docs"
},创建 README.md
在 docs 里面创建 README.md
cd docs
echo "## Hello VuePress" > README.md创建.vuepress 目录
npm run build可直接打包构建 README.md 文件 并生成.vuepress
.vuepress 目录这是放置所有 VuePress 特有 (VuePress-specific) 文件的地方。
创建 config.js
不做任何配置的话，页面会显得过于简单，用户也无法方便地浏览网站；
配置 VuePress 站点的基本文件是 .vuepress/config.js，其中导出一个 JavaScript 对象：
touch config.js目录结构
├── docs # 文档目录
│ ├── .vuepress // 存放所有资源和打包结果
│ │ ├── dist // 打包结果
│ │ ├── public // 公共资源文件
│ │ ├── ...
│ │ └── config.js // 配置文件
│ ├── demo // 分类文档存储
│ │ ├── demo1.md
│ │ ├── ...
│ │ └── demon.md
│ └── README.md
└── package.json// 项目启动配置 基本配置
module.exports = {
title: '文档管理',
description: '呵呵博客',
head: [['link', { rel: 'icon', href: '/logo.ico'}]
]
}title
- Type:
string - Default:
undefined
网站的标题。这将是所有页面标题的前缀，并显示在默认主题的导航栏中。
description
- Type:
string - Default:
undefined
网站描述。这将在页面 HTML 中表现为一个 <meta> 标签。
head
- Type:
Array - Default:
[]
被注入页面 HTML <head> 额外的标签。每个标签可以用 [tagName, { attrName: attrValue}, innerHTML?] 的形式指定。例如，要添加自定义图标：
port
- Type:
number - Default:
8080
指定用于 dev 服务器的端口。
dest
- Type:
string - Default:
.vuepress/dist
指定 vuepress build 的输出目录。
效果
导航配置
