👕

Vue3 + Vite + Vuex を VSCode + Docker 動かす

2024/03/18に公開

Docker

⏰背景

本 "Vue.js入門基礎から実践アプリケーション開発まで" を読みながら、Vue.js の基礎の勉強を始めました。しかし、vue-cli あたりがうまく動かず、つまずいてしまいました😓
これを解決しようとしましたが、うまくいかず、いっそのこと Vue3 + Vite 環境にしてやれ！と考えた次第です。この記事では Vue3 + Vite + Vuex を VSCode + Docker (WSL) で立てた node.js 環境に入れて、本のサンプルコード（6.5 単一ファイルコンポーネントの動作を体験する）を動かせるようにするまでのメモを記録します。
ちなみに、例えば以下のようなエラーがでました...

# vue serve App.vue --open
 INFO  Starting development server...
node:internal/modules/cjs/loader:1142
  const err = new Error(message);
              ^

Error: Cannot find module 'vue-template-compiler/package.json'
Require stack:
- /usr/local/lib/node_modules/@vue/cli-service-global/node_modules/@vue/cli-service/lib/config/base.js
- /usr/local/lib/node_modules/@vue/cli-service-global/node_modules/@vue/cli-service/lib/Service.js
- /usr/local/lib/node_modules/@vue/cli-service-global/index.js
- /usr/local/lib/node_modules/@vue/cli/lib/util/loadCommand.js
- /usr/local/lib/node_modules/@vue/cli/bin/vue.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1142:15)
    at Module._load (node:internal/modules/cjs/loader:983:27)
    at Module.require (node:internal/modules/cjs/loader:1230:19)
    at require (node:internal/modules/helpers:179:18)
    at /usr/local/lib/node_modules/@vue/cli-service-global/node_modules/@vue/cli-service/lib/config/base.js:73:32
    at /usr/local/lib/node_modules/@vue/cli-service-global/node_modules/@vue/cli-service/lib/Service.js:242:40
    at Array.forEach (<anonymous>)
    at Service.resolveChainableWebpackConfig (/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/@vue/cli-service/lib/Service.js:242:26)
    at Service.resolveWebpackConfig (/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/@vue/cli-service/lib/Service.js:246:48)
    at PluginAPI.resolveWebpackConfig (/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/@vue/cli-service/lib/PluginAPI.js:138:25) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/@vue/cli-service/lib/config/base.js',
    '/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/@vue/cli-service/lib/Service.js',
    '/usr/local/lib/node_modules/@vue/cli-service-global/index.js',
    '/usr/local/lib/node_modules/@vue/cli/lib/util/loadCommand.js',
    '/usr/local/lib/node_modules/@vue/cli/bin/vue.js'
  ]
}

Node.js v21.7.1

npm install vue-template-compiler で解決するよ！との情報もありましたが、僕の環境ではうまくいかず...

VSCode + Docker を用いて node.js 環境を作る

はじめに VSCode + Docker を用いて node.js 環境を作ります。Docker や VSCode の DevContainer の使い方についてはよその情報をご参照ください🙇
はじめにこの記事を参考に node.js 環境を立てます。docker compose up -d までやりましょう。
そこまでできたら VS Code の Docker 拡張機能を開き、立てたコンテナを右クリックで "Attach Visual Studio Code" を実行します。node.js コンテナ用のウィンドウが立ち上がります。

Vue3 + Vite をインストールする

ここからは node.js コンテナ内での作業です🚢
Vite をインストールし、プロジェクトを立てます。プロジェクトの名前は "07" にしています。

/usr/src/app # npm init vite@latest 07
Need to install the following packages:
create-vite@5.2.2
Ok to proceed? (y) y
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript

Scaffolding project in /usr/src/app/07...

Done. Now run:

  cd 07
  npm install
  npm run dev

Done. Now run: に書いてあるとおりのことをすればデフォルトのアプリが見れるはずです。

Vuex をインストールする

/usr/src/app # cd 07
/usr/src/app/07 # npm install @vitejs/plugin-vue --save-dev
/usr/src/app/07 # npm install vuex

added 3 packages, and audited 31 packages in 3s

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

found 0 vulnerabilities

ここまでのパッケージの情報👓

/usr/src/app/07 # npm list -g
/usr/local/lib
├── corepack@0.25.2
└── npm@10.5.0
/usr/src/app/07 # npm list
/usr/src/app/07
├── @vitejs/plugin-vue@5.0.4
├── vite@5.1.6
├── vue@3.4.21
└── vuex@4.1.0

Vue と Vuex の記述をアップデートする

"6.5 単一ファイルコンポーネントの動作を体験する" では main.js、store.js、App.vue を作成しています。これらのファイルの記述はこの環境で動かせません。ちょびっと変更しましょう😙
現在のディレクトリ構造は以下のようになっています。３つのファイルは 07/src 内に置きます。既に main.js、App.vue があります！これを書き換えるか、削除して新たに書くようにします。

.
└── 07
    ├── README.md
    ├── index.html
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── vite.svg
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── vue.svg
    │   ├── components
    │   │   └── HelloWorld.vue
    │   ├── main.js
    │   └── style.css
    └── vite.config.js

書き換えたファイルの内容は以下のとおりです。

main.js

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store);
app.mount('#app');

store.js

import { createStore } from 'vuex';

const store = createStore({
  state: {
    tasks: [
      {
        id: 1,
        name: '牛乳を買う',
        done: false,
      },
      {
        id: 2,
        name: 'vue.jsの本を買う',
        done: true,
      },
    ],
  },
});

export default store;

App.vue

<template>
  <div>
    <h2>タスク一覧</h2>
    <ul>
      <li v-for="task in tasks" v-bind:key="task.id">
        <input type="checkbox" v-bind:checked="task.done" />
        {{ task.name }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  computed: {
    tasks() {
      return this.$store.state.tasks; // load the store
    },
  },
};
</script>

実行する

３つのファイルが用意できたらアプリを実行します。コマンドも変わります。以下のようにファイル名を指定しない形で実行します（ファイル名を指定する方法はきっとあるはずです😉また今度調べよう。）。

/usr/src/app/07 # npm run dev

> 07@0.0.0 dev
> vite

Re-optimizing dependencies because lockfile has changed

  VITE v5.1.6  ready in 277 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

見事表示されました。

🕊まとめ

ほとんど ChatGPT に教わりました。お世話になりました😍

参考文献

【初心者】Dockerの使い方(Node.jsの開発環境構築)(https://zenn.dev/boarinclover/articles/a839e8d24ff9c0)

⏰背景