初识vuePress

1. 新建项目文件夹，执行npm init -y安装vuepress

mkdir vue-press-demo
npm install vuepress --save-dev
npm install vuepress -D

2. 新建docs文件夹，创建config.js文件，对项目进行配置

// 以下为config.js文件中的配置项
module.exports {
  title: '项目名称',
  description: '项目描述',
  markdown: {
    lineNumbers: true,    // 显示行号
    extractHeader: ['h2', 'h3', 'h4'] // 左侧显示标题，默认为h1和h2
  },
  configureWebpack: {
    resolve: {
      alias: {  // 定义路径的快捷别名
        '@': '/docs',
        '@images': '/docs/.vuepress/public/images'
      }
    }
  },
  head: [
    ['link', { rel: 'icon', href: '/icons/favicon.ico' }],  // 设置站点图标
  ],
  themeConfig: {  // 主题配置
    sidebarDepth: 3,  // 左侧侧边栏展示标题深度
    nav: [    // 导航栏配置
      { text: '首页' , link: '/'},  // 根目录下的README.md
      {
        text: '前端',
        items: [
          { text: '文本1', link: '/components1/' },
          { text: '文本2', link: '/components2/' },
        ]
      }
    ],
    sidebar: {
      "/components1/": [
        "/components1/"
      ],
      "/components2/": [
        "/components/",
        {
          title: '前端',
          children: [
            "/components2/html",  // 自动补齐.md  该文件为/components2/html.md
            "/components2/css",
          ]
        }
      ]
    }
  },
  plugins: [  // 使用插件
    [
      "one-click-copy", // 代码块复制按钮
      {
        copySelector: ['div[class*="language-"] pre', 'div[class*="aside-code"] aside'],
        copyMessage: "复制成功",
        duration: 1000
      }
    ],
    [
      "vuepress-plugin-zooming", // 放大图片
      {
        selector: ".theme-default-content img:not(.no-zoom)",
        options: {
          bgColor: "rgba(0,0,0,0.6)"
        }
      }
    ]
  ]
}

3. 根目录下新建README.md文件，该文件为项目的首页
4. 创立项目架构

code            // 根目录
  docs          // Markdown文件目录
    .vuepress   // 配置文件夹
      dist      // build后的默认文件夹
      public    // 公共文件夹
        images  // 图片
        icons   // 图标
      config.js // 配置文件
  components    // Markdown文件子目录1
  design        // Markdown文件子目录2
  README.md     // 主页
  node_modules  // 依赖
  .gitignore
  package.json

5. 修改package.json，增加以下代码

"scripts": {
  "dev": "vuepress dev docs --temp .temp",
  "build": "vuepress build docs",
  "test": "echo \"Error: no test specified\" && exit 1"
},

6. 接下来，开始记录你的Markdown文件吧