vuepress入门详解(二)vuepress 快速搭建

导读:本篇文章讲解 vuepress入门详解(二)vuepress 快速搭建,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

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就可以看到系统主页了,如下图所示。
图示1

总结

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

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/13538.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!