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文件夹作为项目文档根目录,主要放置Markdown类型的文章和.vuepress文件夹。
mkdir docs
在script中添加dev启动和build打包脚本命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "vuepress dev docs",
"build": "vuepress build docs"
},
在docs里面创建README.md
cd docs
echo "## Hello VuePress" > README.md
npm run build
可直接打包构建README.md文件 并生成.vuepress
.vuepress 目录这是放置所有 VuePress 特有(VuePress-specific) 文件的地方。
不做任何配置的话,页面会显得过于简单,用户也无法方便地浏览网站;
配置 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' }]
]
}
网站的标题。这将是所有页面标题的前缀,并显示在默认主题的导航栏中。
网站描述。这将在页面 HTML 中表现为一个 <meta> 标签。
被注入页面 HTML <head> 额外的标签。每个标签可以用 [tagName, { attrName: attrValue }, innerHTML?] 的形式指定。例如,要添加自定义图标:
指定用于 dev 服务器的端口。
指定 vuepress build 的输出目录。
博客作为一个记录与分享工具是十分必要的,当前各大博客网站CSDN、简书、掘金等每天都有大量的分享文章出来,当然我们可以把文章分享到这些平台,不过我认为拥有一个可控的、定制的个人博客网站才是一个更酷的事情
全局安装;新建一个文件夹 (例如 my-vuepress-test);打开自动生成的package.json文件,默认创建的文件如下;然后在scripts属性中输入一下指令;然后在my-vuepress-test夹中创建docs文件夹,然后在创建README.md文件
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!