docs: use pnpm as the recommended package manager (#929)

Co-authored-by: meteorlxy <[email protected]>

Author: Mister-Hope

docs/README.md

@@ -19,7 +19,7 @@ features:
   - title: Themes
     details: Providing a default theme out of the box. You can also choose a community theme or create your own one.
   - title: Plugins
-    details: Flexible plugin API, allowing plugins to provide lots of plug-and-play features for your site. 
+    details: Flexible plugin API, allowing plugins to provide lots of plug-and-play features for your site.
   - title: Bundlers
     details: Default bundler is Vite, while Webpack is also supported. Choose the one you like!
 footer: MIT Licensed | Copyright © 2018-present Evan You
@@ -28,7 +28,25 @@ footer: MIT Licensed | Copyright © 2018-present Evan You
 ### As Easy as 1, 2, 3
 
 <CodeGroup>
-  <CodeGroupItem title="YARN" active>
+  <CodeGroupItem title="PNPM" active>
+
+```bash
+# install in your project
+pnpm add -D vuepress@next @vuepress/client@next vue
+
+# create a markdown file
+echo '# Hello VuePress' > README.md
+
+# start writing
+pnpm vuepress dev
+
+# build to static files
+pnpm vuepress build
+```
+
+  </CodeGroupItem>
+
+  <CodeGroupItem title="YARN">
 
 ```bash
 # install in your project

docs/guide/bundler.md

@@ -9,7 +9,16 @@ When using the [vuepress](https://www.npmjs.com/package/vuepress) package, Vite
 If you want to use Webpack bundler instead, you can remove it and install the [vuepress-webpack](https://www.npmjs.com/package/vuepress-webpack) package instead:
 
 <CodeGroup>
-  <CodeGroupItem title="YARN" active>
+  <CodeGroupItem title="PNPM" active>
+
+```bash
+pnpm remove vuepress
+pnpm add -D vuepress-webpack@next
+```
+
+  </CodeGroupItem>
+
+  <CodeGroupItem title="YARN">
 
 ```bash
 yarn remove vuepress

docs/guide/deployment.md

@@ -4,7 +4,7 @@ The following guides are based on some shared assumptions:
 
 - You are placing your Markdown source files inside the `docs` directory of your project;
 - You are using the default build output location (`.vuepress/dist`);
-- You are using [yarn classic](https://classic.yarnpkg.com/en/) as package manager, while npm is also supported;
+- You are using as [pnpm](https://pnpm.io) package manager, while npm and yarn are also supported;
 - VuePress is installed as a local dependency in your project, and you have setup the following script in `package.json`:
 
 ```json
@@ -19,13 +19,13 @@ The following guides are based on some shared assumptions:
 
 1. Set the correct [base](../reference/config.md#base) config.
 
-    If you are deploying to `https://<USERNAME>.github.io/`, you can omit this step as `base` defaults to `"/"`.
+   If you are deploying to `https://<USERNAME>.github.io/`, you can omit this step as `base` defaults to `"/"`.
 
-    If you are deploying to `https://<USERNAME>.github.io/<REPO>/`, for example your repository is at `https://github.com/<USERNAME>/<REPO>`, then set `base` to `"/<REPO>/"`.
+   If you are deploying to `https://<USERNAME>.github.io/<REPO>/`, for example your repository is at `https://github.com/<USERNAME>/<REPO>`, then set `base` to `"/<REPO>/"`.
 
 2. Choose your preferred CI tools. Here we take [GitHub Actions](https://github.com/features/actions) as an example.
 
-    Create `.github/workflows/docs.yml` to set up the workflow.
+   Create `.github/workflows/docs.yml` to set up the workflow.
 
 ::: details Click to expand sample config
 ```yaml
@@ -43,36 +43,30 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           # fetch all commits to get last updated time or other git log info
           fetch-depth: 0
 
-      - name: Setup Node.js
-        uses: actions/setup-node@v1
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
         with:
-          # choose node.js version to use
-          node-version: '14'
+          # choose pnpm version to use
+          version: 7
+          # install deps with pnpm
+          run_install: true
 
-      # cache node_modules
-      - name: Cache dependencies
-        uses: actions/cache@v2
-        id: yarn-cache
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
         with:
-          path: |
-            **/node_modules
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
-      # install dependencies if the cache did not hit
-      - name: Install dependencies
-        if: steps.yarn-cache.outputs.cache-hit != 'true'
-        run: yarn --frozen-lockfile
+          # choose node.js version to use
+          node-version: 18
+          # cache deps for pnpm
+          cache: pnpm
 
       # run build script
       - name: Build VuePress site
-        run: yarn docs:build
+        run: pnpm docs:build
 
       # please check out the docs of the workflow for more details
       # @see https://github.com/crazy-max/ghaction-github-pages
@@ -97,35 +91,43 @@ Please refer to [GitHub Pages official guide](https://pages.github.com/) for mor
 
 1. Set the correct [base](../reference/config.md#base) config.
 
-    If you are deploying to `https://<USERNAME>.gitlab.io/`, you can omit `base` as it defaults to `"/"`.
+   If you are deploying to `https://<USERNAME>.gitlab.io/`, you can omit `base` as it defaults to `"/"`.
 
-    If you are deploying to `https://<USERNAME>.gitlab.io/<REPO>/`, for example your repository is at `https://gitlab.com/<USERNAME>/<REPO>`, then set `base` to `"/<REPO>/"`.
+   If you are deploying to `https://<USERNAME>.gitlab.io/<REPO>/`, for example your repository is at `https://gitlab.com/<USERNAME>/<REPO>`, then set `base` to `"/<REPO>/"`.
 
 2. Create `.gitlab-ci.yml` to set up [GitLab CI](https://about.gitlab.com/stages-devops-lifecycle/continuous-integration/) workflow.
 
 ::: details Click to expand sample config
 ```yaml
 # choose a docker image to use
-image: node:14-buster
+image: node:18-buster
 
 pages:
   # trigger deployment on every push to main branch
   only:
-  - main
+    - main
 
   # cache node_modules
   cache:
+    key:
+      files:
+        - pnpm-lock.yaml
     paths:
-    - node_modules/
+      - .pnpm-store
+
+  # Install pnpm
+  before_script:
+    - curl -f https://get.pnpm.io/v6.16.js | node - add --global pnpm@7
+    - pnpm config set store-dir .pnpm-store
 
   # install dependencies and run build script
   script:
-  - yarn --frozen-lockfile
-  - yarn docs:build --dest public
+    - pnpm i --frozen-lockfile
+    - pnpm docs:build --dest public
 
   artifacts:
     paths:
-    - public
+      - public
 ```
 :::
 
@@ -160,7 +162,7 @@ Please refer to [GitLab Pages official guide](https://docs.gitlab.com/ce/user/pr
 }
 ```
 
-3. After running `yarn docs:build`, deploy using the command `firebase deploy`.
+3. After running `pnpm docs:build`, deploy using the command `firebase deploy`.
 
 ::: tip
 Please refer to [Firebase CLI official guide](https://firebase.google.com/docs/cli) for more details.
@@ -198,21 +200,21 @@ See [Layer0 Documentation > Framework Guides > VuePress](https://docs.layer0.co/
 
 1. On [Netlify](https://netlify.com), set up a new project from GitHub with the following settings:
 
-    - **Build Command:** `yarn docs:build`
-    - **Publish directory:** `docs/.vuepress/dist`
+   - **Build Command:** `pnpm docs:build`
+   - **Publish directory:** `docs/.vuepress/dist`
 
 2. Set [Environment variables](https://docs.netlify.com/configure-builds/environment-variables) to choose node version:
 
-    - `NODE_VERSION`: 14
+   - `NODE_VERSION`: 14
 
 3. Hit the deploy button.
 
 ## Vercel
 
 1. Go to [Vercel](https://vercel.com), set up a new project from GitHub with the following settings:
 
-    - **FRAMEWORK PRESET:** `Other`
-    - **BUILD COMMAND:** `yarn docs:build` 
-    - **OUTPUT DIRECTORY:** `docs/.vuepress/dist`
-   
+   - **FRAMEWORK PRESET:** `Other`
+   - **BUILD COMMAND:** `pnpm docs:build`
+   - **OUTPUT DIRECTORY:** `docs/.vuepress/dist`
+
 2. Hit the deploy button.

docs/guide/getting-started.md

@@ -28,7 +28,16 @@ cd vuepress-starter
 - **Step 2**: Initialize your project
 
 <CodeGroup>
-  <CodeGroupItem title="YARN" active>
+  <CodeGroupItem title="PNPM" active>
+
+```bash
+git init
+pnpm init
+```
+
+  </CodeGroupItem>
+
+  <CodeGroupItem title="YARN">
 
 ```bash
 git init
@@ -50,7 +59,15 @@ npm init
 - **Step 3**: Install VuePress locally
 
 <CodeGroup>
-  <CodeGroupItem title="YARN" active>
+  <CodeGroupItem title="PNPM" active>
+
+```bash
+pnpm add -D vuepress@next @vuepress/client@next vue
+```
+
+  </CodeGroupItem>
+
+  <CodeGroupItem title="YARN">
 
 ```bash
 yarn add -D vuepress@next
@@ -96,7 +113,15 @@ echo '# Hello VuePress' > docs/README.md
 - **Step 7**: Serve the documentation site in the local server
 
 <CodeGroup>
-  <CodeGroupItem title="YARN" active>
+  <CodeGroupItem title="PNPM" active>
+
+```bash
+pnpm docs:dev
+```
+
+  </CodeGroupItem>
+
+  <CodeGroupItem title="YARN">
 
 ```bash
 yarn docs:dev
@@ -113,6 +138,6 @@ npm run docs:dev
   </CodeGroupItem>
 </CodeGroup>
 
-  VuePress will start a hot-reloading development server at [http://localhost:8080](http://localhost:8080). When you modify your markdown files, the content in the browser will be auto updated.
+VuePress will start a hot-reloading development server at [http://localhost:8080](http://localhost:8080). When you modify your markdown files, the content in the browser will be auto updated.
 
 By now, you should have a basic but functional VuePress documentation site. Next, learn about the basics of [configuration](./configuration.md) in VuePress.

docs/reference/default-theme/components.md

@@ -59,10 +59,18 @@
 
 ````md
 <CodeGroup>
+  <CodeGroupItem title="PNPM">
+
+```bash:no-line-numbers
+pnpm install
+```
+
+  </CodeGroupItem>
+
   <CodeGroupItem title="YARN">
 
 ```bash:no-line-numbers
-yarn
+yarn install
 ```
 
   </CodeGroupItem>
@@ -80,10 +88,18 @@ npm install
 **Output**
 
 <CodeGroup>
+  <CodeGroupItem title="PNPM">
+
+```bash:no-line-numbers
+pnpm install
+```
+
+  </CodeGroupItem>
+
   <CodeGroupItem title="YARN">
 
 ```bash:no-line-numbers
-yarn
+yarn install
 ```
 
   </CodeGroupItem>

docs/zh/README.md

@@ -28,7 +28,25 @@ footer: MIT Licensed | Copyright © 2018-present Evan You
 ### 像数 1, 2, 3 一样容易
 
 <CodeGroup>
-  <CodeGroupItem title="YARN" active>
+  <CodeGroupItem title="PNPM" active>
+
+```bash
+# 在你的项目中安装
+pnpm add -D vuepress@next @vuepress/client@next vue
+
+# 新建一个 markdown 文件
+echo '# Hello VuePress' > README.md
+
+# 开始写作
+pnpm vuepress dev
+
+# 构建静态文件
+pnpm vuepress build
+```
+
+  </CodeGroupItem>
+
+  <CodeGroupItem title="YARN">
 
 ```bash
 # 在你的项目中安装

docs/zh/guide/bundler.md

@@ -9,7 +9,16 @@ VuePress 一直以来都在使用 [Webpack](https://webpack.js.org/) 作为打
 如果你想改为使用 Webpack 打包工具，那么你可以移除它，改为安装 [vuepress-webpack](https://www.npmjs.com/package/vuepress-webpack) 包：
 
 <CodeGroup>
-  <CodeGroupItem title="YARN" active>
+  <CodeGroupItem title="PNPM" active>
+
+```bash
+pnpm uninstall vuepress
+pnpm add -D vuepress-webpack@next
+```
+
+  </CodeGroupItem>
+
+  <CodeGroupItem title="YARN">
 
 ```bash
 yarn remove vuepress