テスト用だとCDNでの導入が推奨されていましたが、今回はNPMでのインストールを実施します。

Vue.jsの公式を参考にインストールを実施してみます。

参考：https://v2.ja.vuejs.org/v2/guide/installation

npm install vue

出力結果
up to date, audited 135 packages in 752ms

22 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

コマンド自体は成功しているのですが、foundが０となっており、インストールされていなさそうに見えます。

インストールされているか確認してみます。

vue --version
bash: vue: command not found

インストールされているか確認してみましたが、やはりvueコマンドがインストールされていませんでした。

改めて記事を探してみるとこんな記事を発見しました。

「-g」を忘れるとエラーが発生するので注意してください。

https://www.sejuku.net/blog/126036

-gオプションが何を指しているのかを確認します。

npmでvue/cliとvue/cli-servie-global　をグローバルにインストールします。

　-g = globalグローバル　の略です。

vue本体は、各プロジェクトフォルダ（ローカル）ではなく、グローバル（ /Users/ユーザー名/.nodebrew/v16.13.0/lib/node_modules/ ）にインストールします。

https://cbc-study.com/training/performance/vue1


どうやらインストールするパスがグローバルに変わるだけのもののようでした。

何か根本から勘違いしていそうなので、改めて調べてみます。

するとこんな記事をみつけました。

■ Vue.js

・Webアプリケーション開発に便利なJavaScriptフレームワーク

・CDNでサクッと使える

■ VueCLI

・VueCliはVue.jsで開発するための便利ツール群

・npm使ってインストールする必要がある

・単一ファイルコンポーネント（.vue）を使って開発できる

参考：https://note.com/wxt/n/nc619e1b2d6a3


なるほど、npm install vueでインストールされるものはフレームワーク本体であり、vuecliではVueファイルのテンプレートなどをCLI上から生成したりできるコマンド群がインストールされるようでした。

であれば、npm install vueでvueコマンドがインストールされないのにも納得ですが、じゃあ参考記事のvue –versionは初めからnot foundになるはずなので、OSや環境でも差があるのでしょうか。

環境構築はできたので、続いてプロジェクトの作成をこちらのハンズオンを参考に実施していきます。

https://handson.vuejs-jp.org/create.html


まずはcreate-vueでプロジェクトを作成していきます。

npm create vue@latest vue3-lab

Need to install the following packages:
create-vue@3.8.0
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes

Scaffolding project in /var/www/vue3-lab...

Done. Now run:

  cd vue3-lab
  npm install
  npm run dev

今回はハンズオンに沿ってミニマムなものを作成するため、Vue Routerは入れませんでした。

そのほかのパッケージに関しても不要なため、基本的にはすべてNoを選択しています。

作成したプロジェクトを起動してみます。

プロジェクトの起動には外部パッケージをインストールしてから起動コマンドを実行します。


作成したプロジェクトのディレクトリに移動しnpm install で外部パッケージをインストールします。

cd vue3-lab
npm install

npm install の処理が完了したら npm run dev でプロジェクトを起動します。

npm run dev

npm run dev の実行が完了したら、ブラウザで http://localhost:5173/ にアクセスします。

ブラウザに「You did it!」等と表示されていれば、無事にプロジェクトの作成が成功しています。

まず構成されているファイルがどうなっているのかを確認します。

今回はVueRouterは使用していないため、デフォルトのルーティングになるので、まずはindex.htmlを見に行っているのだと仮定します。


ハンズオンのindex.htmlの中身を見ると、body内に<script type="module" src="/src/main.js"></script>の記述があるため、恐らくここでmain.jsを見に行き、main.jsからimport App from './App.vue'　createApp(App).mount('#app')を経由してApp.vueを見に行っているのだと思われます。


ですので、まずは深く考えず、scriptを編集します。

ハンズオンに従い、scriptに商品情報を登録します。

,code><script setup>
  import { ref } from 'vue'
  const item = ref({
      id: 1,
      name: 'アボカドディップバケット',
      description:
        '刻んだ野菜をアボカドと混ぜてディップに。こんがり焼いたバゲットとお召し上がりください。',
      price: 480,
      image: '/item1.jpg'
  })
  </script>

内容としては商品の情報と写真を登録しています。

ここからさらにTemplateを編集します。

,code><template>
  <header class="header">
    <img
      src="/logo.svg"
      alt="">
    <h1>Vue.js ハンズオン</h1>
  </header>
  <main class="main">
    <div class="item">
      <div class="thumbnail">
        <img
          :src="item.image"
          alt="">
      </div>
      <div class="description">
        <h2>{{ item.name }}</h2>
        <p>{{ item.description }}</p>
        <span>¥<span class="price">{{ item.price }}</span></span>
      </div>