官方文档小白看不懂 还容易报错 我来记录一个通俗易懂的。

创建一个 VuePress 项目，以下是详细步骤：

1. 安装 Node.js

确保你已经安装了 Node.js。可以通过以下命令检查是否已安装：

node -v
npm -v

2. 创建项目目录

在终端中创建一个新的目录并进入该目录：

mkdir vuepress
cd vuepress

3. 初始化 npm 项目

在项目目录中初始化 npm 项目：

npm init -y

这将创建一个默认的 package.json 文件。

4. 安装 VuePress

接下来，安装 VuePress 作为开发依赖：

npm install -D vuepress

5. 创建文档目录

创建一个用于存放文档的 docs 文件夹：

mkdir docs

6. 添加 Markdown 文件

在 docs 文件夹中创建一个 README.md 文件：

# 我的 VuePress 网站

欢迎来到我的 VuePress 网站！

7. 更新 package.json

在 package.json 文件中添加脚本，以便于运行 VuePress：

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

8. 启动开发服务器

使用以下命令启动 VuePress 开发服务器：

npm run docs:dev

这将在浏览器中打开一个本地开发服务器，通常是 http://localhost:8080。

9. 构建静态文件

当你准备好发布网站时，可以使用以下命令构建静态文件：

npm run docs:build

构建完成后，生成的静态文件会位于 docs/.vuepress/dist 目录中。

10. 部署网站

可以将 docs/.vuepress/dist 目录中的文件部署到任何静态文件托管服务（如 GitHub Pages、Netlify、Vercel 等）。

11. EJSONPARSE报错

您遇到的 EJSONPARSE 错误表明 package.json 文件的格式有问题，可能是由于缺少逗号、错误的引号或其他语法错误。请按照以下步骤检查和修复您的 package.json 文件：

1. 打开 package.json

使用文本编辑器打开 package.json 文件。

2. 检查 JSON 格式

确保文件的格式是有效的 JSON。以下是一个正确的 package.json 示例：

{
  "name": "my-vuepress-site",
  "version": "1.0.0",
  "description": "My VuePress site",
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  },
  "devDependencies": {
    "vuepress": "^1.9.10"
  },
  "author": "Your Name",
  "license": "MIT"
}

3. 常见错误检查

• 确保所有字符串都用双引号 " 包围。
• 确保每个键值对之间用逗号 , 分隔，但最后一个键值对后面不需要逗号。
• 确保没有多余的或缺失的括号 {} 和方括号 []。

4. 修复错误

根据上面的示例，检查并修复 package.json 文件中的任何错误。

5. 保存并重新运行

保存对 package.json 的更改，然后在终端中再次运行：

npm run

如果一切正常，您应该不会再看到 JSON 解析错误。

6. 其他检查

如果问题仍然存在，可以尝试将 package.json 的内容复制到一个新的文件中，然后保存，确保没有隐藏的格式错误。

如果您仍然需要帮助，请分享您当前的 package.json 内容，以便我能更具体地帮助您。

12. package.json各个字段的解释

以下是您提供的 package.json 文件中各个字段的解释：

{
  "name": "my-vuepress-site",        // 项目名称
  "version": "1.0.0",                 // 项目的版本号
  "description": "My VuePress site",  // 项目的描述
  "scripts": {                        // 自定义脚本，可以通过 npm run <script-name> 执行
    "docs:dev": "vuepress dev docs",  // 启动开发服务器的命令
    "docs:build": "vuepress build docs" // 构建静态文件的命令
  },
  "devDependencies": {                // 开发依赖，只有在开发中需要的依赖
    "vuepress": "^1.9.10"             // VuePress 的版本，^ 符号表示可以安装 1.9.x 的最新版本
  },
  "author": "Your Name",              // 项目的作者信息
  "license": "MIT"                    // 项目的许可证类型
}

13. 各个字段详细说明

1. name: 项目的名称，通常是小写字母和连字符组成，必须唯一。
2. version: 项目的版本号，遵循 语义化版本控制 的规则，版本号格式为 主版本号.次版本号.修订号。
3. description: 对项目的简短描述，通常用于说明项目的功能或目的。

4. scripts: 自定义脚本部分，您可以在这里定义常用的命令，例如启动开发服务器或构建项目。可以通过 npm run <script-name> 来执行。

   • docs:dev: 启动 VuePress 的开发服务器，通常在 http://localhost:8080 上运行。
   • docs:build: 构建静态文件，将生成的文件放在 docs/.vuepress/dist 目录中，准备发布。
5. devDependencies: 列出项目中的开发依赖项，这些依赖项仅在开发过程中需要。例如，vuepress 是用于生成静态网站的工具。使用 ^ 符号表示可以安装指定版本的最新小版本更新。
6. author: 项目的作者信息，可以是个人或组织的名称。
7. license: 项目的许可证类型，通常使用开源许可证，如 MIT、Apache、GPL 等，以便说明项目的使用和分发权限。