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如何添加评论功能
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/13538.html