💡

✅my-vue-appのsrc/components/PdfViewer.vue を新規作成する方法

に公開
Termux
tech

🧑‍💻 Vue.jsでPdfViewer.vueを新規作成する方法

方法①：ターミナル（bash）で作成する

  1. プロジェクトフォルダに移動

    cd my-vue-app

  2. components フォルダに移動

    cd src/components

  3. PdfViewer.vue ファイルを新規作成

    touch PdfViewer.vue

  4. ファイルを編集（例：VS Codeで開く）

    code PdfViewer.vue

    （VS Codeを使っていない場合は、nano PdfViewer.vue や vim PdfViewer.vue でもOKです。）

方法②：VS Code などのエディタで作成する

  1. VS Codeでプロジェクトを開く

    • メニューの「ファイル → フォルダーを開く」から my-vue-app を選択。

  2. 左のエクスプローラーで：

    • src → components を開く
    • 右クリック → 「新しいファイル」
    • 名前を PdfViewer.vue にする

🧩 PdfViewer.vue の最小サンプル

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

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

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

✅ 動作確認

  1. プロジェクトのルートに戻る：

    cd ../..

  2. 開発サーバーを起動：

    npm run dev

  3. ブラウザで http://localhost:5173/（または表示されたURL）にアクセス
    → 「PDF Viewer」と表示されれば成功です 🎉

Discussion