快速生成静态网站----VuePress

我们通常在编写组件库之后需要部署一些使用文档的网站，来帮助大家来熟悉你的组件库，那么这时我们就需要一个能快速生成静态网站的工具。由此VuePress就诞生了，您可以直接进入官方文档查看教程VuePress 中文文档 | VuePress 中文网

快速上手

前提条件

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

创建并进入一个新目录

mkdir vuepress-starter && cd vuepress-starter

使用你喜欢的包管理器进行初始化
```
yarn init # npm init
```
将 VuePress 安装为本地依赖

我们已经不再推荐全局安装 VuePress
```
yarn add -D vuepress # npm install -D vuepress
```
注意

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

创建你的第一篇文档

mkdir docs && echo '# Hello VuePress' > docs/README.md

在 package.json 中添加一些 scripts(opens new window)

这一步骤是可选的，但我们推荐你完成它。在下文中，我们会默认这些 scripts 已经被添加。
```
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
```

在本地启动服务器

yarn docs:dev # npm run docs:dev

如需要热加载则需将dev配置如下

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

基本配置

.
├─ docs
│  ├─ index.md
   ├─ components
   |  ├─ button
   |  |  └─ index.md
   |  └─ index.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

一个 VuePress 网站必要的配置文件是 .vuepress/config.js，它应该导出一个 JavaScript 对象：


module.exports = {
    // 如需在GitHub部署就将base地址改为自己的地址
    base: '/Vue2-FengLing-UI/',
    // 项目插件
    plugins: ['demo-container-v2'],
    // 语言设置
    locales: {
        '/': {
            lang: 'zh-CN',
            title: 'FengLingUI',
            description: '基于Vue2的UI组件库'
        }
    },
    themeConfig: {
        lastUpdated: '最后一次更新',
        // 配置自己项目地址的
        repo: 'TIX007/fengling-ui',
        repoLabel: '查看源码',
        search: true,
        sidebar: {
            '/components/': [
                {
                    title: '开始',
                    collapsable: true,
                    children: [
                        ''
                    ],
                },
                {
                    title: '组件',
                    collapsable: true,
                    children: [
                        { title: "Button 按钮", path: '/components/button/' }
                    ],
                }
            ],
            '/': [
                {
                    title: '组件',
                    path: '/components/',
                }
            ],
        },
        nav: [
            { text: "首页", link: "/" },
            { text: "组件", link: "/components/" },
            {
                text: "外链",
                items: [
                    { text: "文档地址", link: "https://github.com/TIX007/Vue2-FengLing-UI" },
                    { text: "组件库", link: "https://tix007.github.io/vue3-liuying-ui/" }
                ]
            }
        ],
        smoothScroll: true,
    },
};

当然项目中用到了插件也需要npm一下

npm i vue-template-compiler

这样我们在indx.md中就可以使用主题了

---
home: true
# heroImage: /hero.png
heroText: FengLingUI
tagline: 基于Vue2的UI组件库
actionText: 快速上手 →
actionLink: /components/
features:
- title: 简洁易上手
  details: 基于element-ui二次开发，简洁易上手。
- title: Vue框架
  details: 基于Vue2的组件库供大家参考学习及使用。
- title: 高复用
  details: 提供多种常用的组件并不断更新。
footer: FengLingUI 0.1.1
---

部署

部署 | VuePress 中文文档 | VuePress 中文网

直接运行打包命令将生成文件放入GitHub即可访问了

三分钟快速生成静态网站

快速生成静态网站----VuePress

快速上手

基本配置

部署