VuePress入门 Demo

最新推荐文章于 2023-11-20 12:41:33 发布

@tangguo123

最新推荐文章于 2023-11-20 12:41:33 发布

阅读量1.6k

点赞数 3

本文链接：https://blog.csdn.net/hj17629030978/article/details/106467559

版权

请确保 Node.js 版本 >= 8

全局安装

npm install -g vuepress

创建项目目录

mkdir vuepress-demo && cd vuepress-demo

初始化项目，建立并编辑 package.json

npm init -y

接着，在 package.json 里加一些脚本:

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
}

建立基本目录

vuepress-start
|—package.json
|—docs
|	|—README.md
|	|—.vuepress
|	|	|—config.js
|	|	|—public
|	|	|	|—favicon.ico

修改配置文件 - config.js

module.exports = {
    title: '文档管理',
    head: [
        ['link', { rel: 'icon', href: '/favicons/favicon-16x16.png', type: 'image/png', sizes: '16x16'}]
    ],
    port: 9090,
    locales: { // 站点多语言配置
        '/': {
            lang: 'zh-CN', // 将会被设置为 <html> 的 lang 属性
            title: '文档管理',
            description: 'Vue 驱动的静态网站生成器'
          },
        '/en/': {
            lang: 'en-US',
            title: 'VuePress',
            description: 'Vue-powered Static Site Generator'
        }
    },
    extraWatchFiles: [],
    // theme: '@vuepress-theme-default', // 主题
    themeConfig: { 
        search: false, // 警用默认的搜索框
        nextLinks: true, // 上/先一篇链接
        prevLinks: true,
        // sidebar: 'auto', // 自动显示
        // sidebar: [ // 全部显示
        //     '/guide/',
        //     '/config/base/',
        //     'config/high/'
        // ],
        sidebar: [ // 分组显示
            {
                title: '组1',
                collapsable: false,
                sidebarDepth: 1, 
                children: ['/guide/']
            },
            {
                title: '组2',
                collapsable: false,
                sidebarDepth: 1, 
                children: ['/config/base/', '/config/high/']
            }
        ],
        sidebarDepth: 2, // 最大的深度为 2
        navbar: true, // 禁用导航栏
        displayAllHeaders: true, // 显示所有页面的标题链接 默认值：false 
        locales: { // 默认主题多语言配置
            '/': {
                selectText: '选择语言',
                label: '简体中文',
                nav: [
                    { text: '首页', link: '/' },
                    { text: '指南', link: '/guide/'  },
                    { 
                        text: '配置', 
                        items: [
                            { text: '基本配置', link: '/config/base/', 
                            // target: '_blank' 
                            },
                            { text: '高级配置', link: '/config/high/'}
                        ]
                    }
                ],
                lastUpdated: '上次更新', // string | boolean
            },
            '/en/': {
                selectText: 'Languages',
                label: 'English',
                nav: [
                    { text: 'home', link: '/en/' },
                    { text: 'guide', link: '/en/guide/' },
                    { 
                        text: 'config', 
                        items: [
                            { text: 'base', link: '/config/base/' },
                            { text: 'high', link: '/config/high/' }
                        ]
                    }
                ],
                lastUpdated: 'Last Updated', // string | boolean
            }
        }
    }
}

修改README.md

VuePress 提供了对 YAML front matter 开箱即用的支持，我们可以模仿vuepress首页进行如下优化：

---
home: true
heroImage: /images/logo.png
heroText: 文档管理
tagline: 使用手册
actionText: 快速上手 →
actionLink: /guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present xxxxxx
---

运行项目

yarn dev

运行上述代码，打开网页
在这里插入图片描述

生成静态的HTML文件

yarn build

默认情况下，文件将会被生成在.vuepress/dist，也可以通过 .vuepress/config.js 中的 dest 字段来修改，生成的文件可以部署到任意的静态文件服务器上。

附：
demo：vuepress-start

@tangguo123

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VuePress入门 Demo

::: warn 注意请确保 Node.js 版本 >= 8:::全局安装#安装npm install -g vuepress#创建项目目录mkdir vuepress-demo && cd vuepress-demo
复制链接

扫一扫