vuepress2.0使用教程(1) - 搭建项目

431 阅读1分钟

介绍

VuePress 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown在新窗口打开 来书写内容(如文档、博客等),然后 VuePress 会帮助你生成一个静态网站来展示它们。

VuePress 诞生的初衷是为了支持 Vue.js 及其子项目的文档需求,但是现在它已经在帮助大量用户构建他们的文档、博客和其他静态网站。

依赖环境(优先检查,否则后续会报错)

手动安装

步骤 1: 创建并进入一个新目录

mkdir blog
cd blog
  • 步骤 2: 初始化项目
git init
npm init //这个时候会出现一堆选项,没有特殊要求直接回车默认就行
  • 步骤 3: 将 VuePress 安装为本地依赖
npm install -D vuepress@next @vuepress/client@next vue
  • 步骤 4: 在 package.json 中添加一些 script
{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }
}

Untitled

  • 步骤 5: 将默认的临时目录和缓存目录添加到 .gitignore 文件中
echo 'node_modules' >> .gitignore
echo '.temp' >> .gitignore
echo '.cache' >> .gitignore
  • 步骤 6: 创建你的第一篇文档
mkdir docs
echo '# Hello VuePress' > docs/README.md

稍微解释一下:为什么是README.md文件?vuepress默认认为一个目录的默认文档是index.md或者README.md,既然这是网站首页,那就是要去寻找当前目录下的index.md或者README.md,你可以尝试把README.md改成index.md是一样的效果,但是改成doc1.md就会报404

步骤 7: 在本地启动服务器来开发你的文档网站

npm run dev