✅Vimで PdfViewer.vue を編集する手順

🧑‍💻 Vimで PdfViewer.vue を編集する手順

🧭 1. フォルダに移動

まず、プロジェクトの中の components フォルダに移動します。

cd my-vue-app/src/components

---

🆕 2. ファイルを作成しながら vim を開く

PdfViewer.vue がまだ存在しない場合でも、vim は新しく作ってくれます。

vim PdfViewer.vue

これで Vim の編集画面が開きます。

---

✍️ 3. 編集モードに入る

Vim が開いた直後は コマンドモード です。
文字を入力するためには 挿入モード（insert mode） に入る必要があります。

キーボードで：

i

と押すと、左下に -- INSERT -- と表示され、文字が打てるようになります。

---

📄 4. コードを入力

以下を入力してみましょう：

<template>
  <div>
    <h1>PDF Viewer</h1>
    <p>ここにPDFを表示する予定です。</p>
  </div>
</template>

<script>
export default {
  name: 'PdfViewer'
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

---

💾 5. 保存して終了

入力が終わったら次の手順で保存して終了します。

1. Escキー を押して挿入モードを抜ける（-- INSERT -- が消える）
2. 以下をタイプ：

   :wq
   

   → w は “write”（保存）、q は “quit”（終了）の意味です。

---

🔁 6. 保存せずに終了したい場合

もし間違えて開いて、何も保存せずに閉じたいときは：

:q!

と入力します。

---

✅ 7. 編集内容を確認

ターミナルに戻ってファイル内容を確認するには：

cat PdfViewer.vue

と入力すると、中身を確認できます。

---

💡豆知識

操作	コマンド
挿入モードに入る	i
コマンドモードに戻る	Esc
保存だけ	:w
終了だけ	:q
保存して終了	:wq
保存せず終了	:q!