vuepress开发文档

Posted 2021-05-14 初见叶藏

vuepress文档

首先确定node 和 npm 版本是否正常

1,进入CMD管理员终端

• 自行选择盘符的方法:

C:\\Users\\Niuzetong> E:
E:\\>dir #查询目录
E:\\>cd vue #切换到vue文件夹

安装初始化

• 全局安装

$ npm install -g vuepress

• 创建个文件夹作为目录

$ mkdir Docs
# 该目录作为整本书的项目目录 可以根据上述方法换盘

• 初始化

npm init -y #初始化完成后会生成一个package.json文件

• 在当前目录中创建一个docs目录

$ mkdir docs

• README.md文件(官网提供)

---
home: true
heroImage: /logo.jpg
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 © 2018-present Evan You
---

在 package.json 中加入这些脚本，并运行。

// package.json
"scripts": {
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs"
}

# 运行 package.json
$ package.json

# 本地运行文档
$ npm run docs:dev

# 编译打包生产静态 HTML 文件
$ npm run docs:build

#会得到一个端口,浏览器打开即可

配置