# VuePress 基础

• 官网：https://vuepress.vuejs.orgopen in new window
• VuePress 是 Vue 驱动的静态网站生成器

# 一、介绍

• 简洁至上
  • 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
• Vue 驱动
  • 享受 Vue + webpack 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。
• 高性能
  • VuePress 会为每个页面预渲染生成静态的 HTML，同时，每个页面被加载的时候，将作为 SPA 运行。

# 二、安装 Node.js

# 1、打开官网：https://nodejs.orgopen in new window

# 2、安装

# 3、同意

# 4、更改安装路径

# 5、下一步

# 6、安装成功，检查版本

# 7、更改 nmp 本地仓库

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
npm list -global

# 8、更改镜像站

npm config set registry=http://registry.npm.taobao.org

# 9、查看配置

npm config list

# 10、系统环境变量

• 新增环境变量 NODE_PATH（D:\nodejs\node_global\node_modules）

• 备：重新打开 cmd 才生效

# 三、安装 VuePress

# 1、创建并进入一个新目录

mkdir ouyangke && cd ouyangke

# 2、包管理器进行初始化

• Yarn 是 facebook 发布的一款取代 npm 的包管理工具
• 安装命令：npm install -g yarn

yarn init # npm init

# 项目名称
question name (vuepress):
# 项目版本
question version (1.0.0):
# 项目描述
question description:
# 项目入口
question entry point (index.js):
# 项目存储库，如：git
question repository url:
# 项目作者
question author:
# 项目许可证
question license (MIT):
# 项目私有属性
question private:

• 根目录会新建一个文件：package.json

# 3、将 VuePress 安装为本地依赖

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

# 4、新建目录和文件

mkdir docs && echo '# Hello VuePress' > docs/README.md

# 5、package.json 添加配置

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

# 6、本地启动服务器

yarn docs:dev # npm run docs:dev

# 四、安装 Visual Studio Code

• https://code.visualstudio.comopen in new window