vuepress入门详解（二）vuepress 快速搭建

vuepress 快速搭建

快速搭建的目的是让我们直观的感受下vuepress界面。先不要纠结每个文件和配置的意思，先快速感受一下。
::: warning 注意
请确保你的 Node.js 版本 >= 8
:::

安装nodejs

如何安装nodejs，请参考nodejs安装

安装vuepress

可以全局安装，也可以本地安装。全局安装的好处是电脑只用安装一次，所有的vuepress工程都能用。实际使用中，有些插件必须本地安装了才生效

# 安装
yarn global add vuepress # 或者：npm install -g vuepress

::: tip 提示
注：可以使用yarn安装也可以使用npm安装，安装完node会默认带npm命令，使用yarn的话还需要安装yarn，如果不熟悉nodejs的朋友可以直接用npm install -g vuepress 全局安装。
:::

创建工程文件

一步一步跟着创建文件和文件夹
最简目录结构如下：

    project
    ├─── docs
    │   ├── README.md
    │   └── .vuepress
    │       └── config.js
    └── package.json
    
    project：是工程的根目录名称，例如（D:\vuepress-test01，project就是vuepress-test01）
    docs和.vuepress都是文件夹
    其它都是文件

package.json内容：

    {
      "name": "vuepress-test01",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "dev": "vuepress dev docs",
        "build": "vuepress build docs"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }

README.md

    ---
    home: true
    actionText: 快速上手 →
    actionLink: /zh/guide/
    features:
    - title: 简洁至上
      details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
    - title: Vue驱动
      details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
    - title: 高性能
      details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
    footer: MIT Licensed | Copyright © 2020 （可以根据实际情况写）
    ---

config.js

  module.exports = {
      title: 'java乐园',// 设置网站标题
      description: '牛魔王的博客',
      base: '/',// 设置站点根路径
      dest: './ROOT',  // 设置输出目录
      head: [],
      plugins: [],
      themeConfig: {
          // 添加导航栏
          nav: [
  				{ text: '主页', link: '/' },
  				{ text: '指南', link: '/guide/' },
  				{ text: 'java相关',
  					items: [
  						{ text: 'java基础', link: '/java/java-base/' },
  						{ text: 'java与opc通信', link: '/java/java-opc/' }
  					]
  				}
  			],
          sidebar: [],
          sidebarDepth: 2,
          lastUpdated: 'Last Updated'
      }
  }

运行

在D:\vuepress-test01（根据自己工程的实际路径）目录下执行命令npm run dev运行工程

D:\vuepress-test01>npm run dev

浏览

在浏览器输入localhost:8080就可以看到系统主页了，如下图所示。

总结

我们已经能直观的感受vuepress的页面风格了，这个是默认主题。当然，右侧导航栏点击后是没有内容的，因为我们没有配置。后面我们会一步步完善内容

🍉🍉🍉 欢迎大家来博客了解更多内容：java乐园 🍉🍉🍉

vuepress入门详解（一）vuepress介绍
vuepress入门详解（二）vuepress 快速搭建
vuepress入门详解（三） vuepress 目录结构
vuepress入门详解（四）vuepress 基本配置
vuepress入门详解（五）vuepress Markdown详解
vuepress入门详解（六）vuepress 实用插件
vuepress入门详解（七）vuepress如何添加评论功能