VuePress 安装

本文主要介绍 VuePress 的安装和项目创建方法,在本地环境快速搭建起一个简单的 VuePress 静态网站。

准备工作

在开始之前,你需要确保本地环境已经安装了 npm 和 yarn 工具。npm 的安装方法请参考《Node.js 安装》,安装完成后可通过 npm 工具安装 yarn,安装命令如下。

npm install --global yarn

本地搭建

  1. 创建并进入一个新目录(文件名自定义,下面以 vuepress-starter 为例)
    mkdir vuepress-starter && cd vuepress-starter
    
  2. 使用你喜欢的包管理器进行初始化(yarn 或者 npm
    yarn init # npm init
    
  3. 将 VuePress 安装为本地依赖(不推荐全局安装 VuePress)
    yarn add -D vuepress # npm install -D vuepress
    
  4. 创建你的第一篇文档,VuePress 会以 docs 为文档根目录,所以这个 README.md 相当于主页:
    mkdir docs && echo '# Hello VuePress' > docs/README.md
    
  5. 在 package.json 中添加一些 scripts
    {
     "scripts": {
       "docs:dev": "vuepress dev docs",
       "docs:build": "vuepress build docs"
     }
    }
    
  6. 在本地启动服务器
    yarn docs:dev # npm run docs:dev
    

    此时,VuePress 会启动一个热重载的开发服务器。打开浏览器,输入 http://localhost:8080 可以看到如下页面。

VuePress 运行