Slidev使用（一）安裝

文章目錄

- - 1. **安裝位置**
  - 2. **使用方式**
  - 3. **適用場景**
  - 4. **管理和維護**
全局安裝
- - 1. **檢查 Node.js 和 npm 是否已安裝**
  - 2. **全局安裝 Slidev CLI**
  - 3. **驗證安裝是否成功**
  - 4. **創建幻燈片文件**
  - 5. **啟動 Slidev**
  - 6. **實時編輯和預覽**
  - 7. **構建和導出（可選）**
  - - 構建為靜態網站：
    - 導出為 PDF：
  - 8. **安裝主題或插件（可選）**
  - 9. **清理緩存（可選）**
  - 總結
  - 注意事項
本地安裝
- - 1. **初始化項目文件夾**
  - 2. **初始化 npm 項目**
  - 3. **本地安裝 Slidev CLI**
  - 4. **創建幻燈片文件**
  - 5. **運行 Slidev**
  - - 方法 1：使用 `npx`
    - 方法 2：配置 `package.json` 腳本
  - 6. **安裝其他依賴（可選）**
  - 7. **構建和導出（可選）**
  - 8. **提交代碼到版本控制（可選）**
  - 總結

本地安裝和全局安裝 Slidev（或任何其他 npm 包）主要區別在于它們的安裝位置、使用方式以及適用場景。以下是兩者的詳細對比：

1. 安裝位置

全局安裝：當您全局安裝一個包時，它會被安裝到系統的特定目錄中（例如，在 Windows 上可能是 C:\Users\<YourUsername>\AppData\Roaming\npm），并且可以從命令行在任何地方直接訪問該命令。這意味著，無論你在哪個項目文件夾下，都可以直接運行 slidev 命令。
本地安裝：本地安裝則是將包安裝到項目的 node_modules 文件夾內。這意味著每個項目可以擁有自己的依賴版本，并且這些依賴僅限于該項目內部使用。對于 Slidev 來說，你需要通過 npx slidev 或者配置 npm 腳本來啟動幻燈片。

2. 使用方式

全局安裝：一旦全局安裝了 Slidev，你可以在任何終端會話中直接輸入 slidev 來啟動幻燈片。
本地安裝：如果是在本地安裝，則需要通過 npx slidev 或者在項目的 package.json 中定義腳本（如 "dev": "slidev slides.md"），然后使用 npm run dev 來執行。

3. 適用場景

全局安裝：適合個人開發者，特別是當你需要頻繁地創建和展示多個獨立的 Slidev 幻燈片項目，并希望簡化命令的使用時。不過，這要求你的環境中沒有版本沖突的問題。
本地安裝：更推薦用于團隊開發環境或需要確保項目依賴穩定性的場景。通過本地安裝，可以確保所有團隊成員使用相同版本的 Slidev 和其依賴項，避免因版本差異導致的問題。此外，本地安裝便于項目遷移和部署，因為所有必要的依賴都在項目內部。

4. 管理和維護

全局安裝：管理起來相對簡單，但容易受到版本更新的影響。如果你更新了全局安裝的 Slidev 版本，可能會影響到所有使用該全局包的項目。
本地安裝：雖然稍微復雜一點，因為它涉及到每個項目的單獨設置，但它提供了更高的靈活性和控制力。你可以為不同的項目指定不同版本的 Slidev 及其依賴，而不會互相影響。

綜上所述，選擇哪種安裝方式取決于你的具體需求和使用場景。如果你希望快速開始并且不擔心版本問題，可以選擇全局安裝；如果你注重項目間的隔離性和依賴版本的穩定性，則應選擇本地安裝。

全局安裝

全局安裝 Slidev 的步驟相對簡單，適合希望快速開始并直接使用 slidev 命令的用戶。以下是詳細的步驟：

1. 檢查 Node.js 和 npm 是否已安裝

Slidev 是基于 Node.js 構建的工具，因此需要確保你的系統中已經安裝了 Node.js 和 npm（Node.js 包管理器）。

運行以下命令檢查版本：

node -v
npm -v

如果未安裝，請先下載并安裝 Node.js（推薦 LTS 版本）。

2. 全局安裝 Slidev CLI

使用 npm 全局安裝 Slidev CLI：

npm install -g @slidev/cli

如果你使用的是 pnpm 或 yarn，可以分別運行以下命令：

pnpm add -g @slidev/cli
# 或
yarn global add @slidev/cli

安裝完成后，slidev 命令將被添加到系統的全局路徑中。

3. 驗證安裝是否成功

運行以下命令檢查 slidev 是否可用：

slidev --version

如果輸出版本號，則說明安裝成功。

4. 創建幻燈片文件

在任意目錄下創建一個 Markdown 文件作為幻燈片內容，例如 slides.md：

# 我的第一個幻燈片這是一個簡單的示例。

5. 啟動 Slidev

直接運行以下命令啟動 Slidev：

slidev slides.md

Slidev 會自動啟動一個本地開發服務器，并在瀏覽器中打開幻燈片。

6. 實時編輯和預覽

Slidev 支持熱更新功能。你可以在編輯器中修改 slides.md 文件，保存后，瀏覽器中的幻燈片會自動更新。

7. 構建和導出（可選）

如果你需要將幻燈片導出為靜態網站或 PDF，可以運行以下命令：

構建為靜態網站：

slidev build slides.md

導出為 PDF：

slidev export slides.md

生成的文件會存放在 dist/ 或其他指定目錄中。

8. 安裝主題或插件（可選）

全局安裝的主題或插件也可以直接使用。例如，安裝一個主題：

npm install -g @slidev/theme-seriph

然后在 slides.md 中指定主題：

---
theme: seriph
---

9. 清理緩存（可選）

如果遇到問題，可以嘗試清除 Slidev 緩存：

slidev clear-cache

總結

全局安裝 Slidev 的主要優點是方便快捷，可以直接通過 slidev 命令運行，而無需額外配置。以下是完整的流程總結：

確保 Node.js 和 npm 已安裝。
使用 npm install -g @slidev/cli 全局安裝 Slidev。
驗證安裝：slidev --version。
創建 Markdown 文件（如 slides.md）。
啟動 Slidev：slidev slides.md。
（可選）構建或導出幻燈片。
（可選）安裝主題或插件。

注意事項

版本沖突：全局安裝的 Slidev 可能會影響所有項目，如果不同項目需要不同版本的 Slidev，建議選擇本地安裝。
環境變量問題：如果 slidev 命令無法識別，請檢查 npm 的全局路徑是否已添加到系統的環境變量中（參考之前的解決方案）。

如果有任何問題，請隨時提問！

本地安裝

將 Slidev 安裝在項目文件夾下（即本地安裝）是一個常見的做法，特別是在需要與團隊共享項目或確保依賴版本一致的情況下。以下是具體步驟：

1. 初始化項目文件夾

如果你還沒有一個項目文件夾，可以先創建一個：

mkdir my-slidev-project
cd my-slidev-project

2. 初始化 npm 項目

在項目文件夾中初始化一個新的 package.json 文件：

npm init -y

這會生成一個默認的 package.json 文件。

3. 本地安裝 Slidev CLI

使用以下命令將 Slidev CLI 安裝為項目的開發依賴項：

npm install @slidev/cli --save-dev

如果你使用的是 pnpm 或 yarn，可以分別運行以下命令：

pnpm add @slidev/cli --save-dev
# 或
yarn add @slidev/cli --dev

安裝完成后，Slidev CLI 將被添加到 node_modules/.bin 目錄下。

4. 創建幻燈片文件

在項目文件夾中創建一個 Markdown 文件作為幻燈片內容，例如 slides.md：

# 我的第一個幻燈片這是一個簡單的示例。

5. 運行 Slidev

由于 Slidev 是本地安裝的，不能直接通過 slidev 命令運行。你需要使用 npx 或項目的 npm scripts 來啟動。

方法 1：使用 `npx`

運行以下命令啟動 Slidev：

npx slidev slides.md

方法 2：配置 `package.json` 腳本

在 package.json 中添加一個腳本來簡化啟動命令。編輯 package.json 文件，添加以下內容：

{"scripts": {"dev": "slidev slides.md"}
}

然后運行以下命令啟動：

npm run dev

6. 安裝其他依賴（可選）

如果你需要使用主題、插件或其他功能，可以直接將其安裝為項目的依賴項。例如：

npm install @slidev/theme-seriph --save-dev

然后在 slides.md 中指定主題：

---
theme: seriph
---

7. 構建和導出（可選）

如果需要將幻燈片導出為靜態網站或 PDF，可以運行以下命令：

npx slidev build
npx slidev export

同樣，你也可以將這些命令添加到 package.json 的 scripts 中：

{"scripts": {"dev": "slidev slides.md","build": "slidev build","export": "slidev export"}
}

之后可以通過以下命令執行：

npm run build
npm run export

8. 提交代碼到版本控制（可選）

為了方便團隊協作，建議將項目提交到 Git 倉庫，并忽略 node_modules 文件夾。創建 .gitignore 文件并添加以下內容：

node_modules/

然后初始化 Git 并提交代碼：

git init
git add .
git commit -m "Initial commit with Slidev setup"

總結

通過以上步驟，你可以將 Slidev 安裝在項目文件夾下，并以本地方式管理依賴項。這種方式的優點包括：

確保團隊成員使用的 Slidev 版本一致。
避免全局安裝可能帶來的沖突。
更容易與其他開發者共享項目。

如果還有其他問題，請隨時提問！