GithubHelp home page GithubHelp logo

create-vuepress-app's Introduction

利用VuePress构建自己的知识体系

这是一个vuePress脚手架,去除了繁琐的安装,开箱即用。

Table of Contents

Introduction

本脚手架能够快速生成一个VuePress网站,免除了较为繁琐的安装(踩坑)过程。接下来会详细而有快速介绍常用的API,满足大部分的需求(如果需要更加多的个性自定义,请结合脚手架,参考VuePress的官方文档

⬆ Back to Top

Feature

  • 支持部署到 Github pages

⬆ Back to Top

Install

1、 将项目clone到本地

git clone https://github.com/Barretem/create-vuepress-app.git

2、 进入项目目录,安装对应的依赖

cd create-vuepress-app
yarn install

3、 启动项目

yarn run docs:dev
// 然后在浏览器中打开http://localhost:8080即可看到项目

4、 构建项目(当文件需要部署到服务器的时候使用)

yarn run docs:build

Documentation

基本配置在项目代码里面都有说明,这里主要说明一下比较经常修改的配置项

头部导航栏

如果你需要修改头部导航栏,你需要在.vuepress/config.js文件中修改themeConfig.nav对象

// .vuepress/config.js
module.exports = {
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' }, // text 为导航栏项显示的文字,link为跳转的路由
      {
        text: 'Languages',
        items: [ // 下拉项列表
          { text: 'Chinese', link: '/language/chinese' },
          { text: 'Japanese', link: '/language/japanese' }
        ]
      }, // 它将显示为一个 下拉列表
      {
        text: 'Languages',
        items: [
          { text: 'Group1', items: [/* 分组项列表 */] },
          { text: 'Group2', items: [/* 分组项列表 */] }
        ]
      }// 它将在 下拉列表 中设置分组
    ]
  }
}

侧边栏

侧边栏的配置需要跟docs下的文件路径相匹配

如以下文件路径:

-- vue // 文件夹名称
    -- README.md
    -- one.md
    -- two.md
-- css // 文件夹名称
    -- README.md
    -- three.md
    -- four.md

则对应的配置应该为:(children可多层进行嵌套)

// 为以下路由添加侧边栏
themeConfig: {
    sidebar: {
      '/vue/': [
          {
              title: 'vue', // 显示的节点名称
              children: [
                  ['/vue/one', '我是子节点名称,如果不设置的话,将会从MD文件中读出标题'], // 子节点,不设置的话,将会从MD文件中读出标题
                  '/vue/two'
              ]
          }
      ],
      '/css/': [
          {
              title: 'css',
              children: [
                  '/css/three',
                  '/css/four'
              ]
          }
      ]
    }
}

⬆ Back to Top

Reference

⬆ Back to Top

License

MIT

⬆ Back to Top

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.