乐趣区

VuePress从零开始

jiezi

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 的输出目录。

效果

导航配置

退出移动版