はじめに

Vue.jsを学習するにあたり、以下の本を順番に進めています。

技術評論社　「Vue.js入門基礎から実践アプリケーション開発まで」(ISBN978-4-297-10091-9)

古いツールなので動かない

第6章からおそらく、Vueを使う最大の利点である単一コンポーネントに触れていくのですが、VueCLIツールがその通り動いてくれないのです。

VueCLIは、基本的にVue2.0時代のツールで、メンテナンスモードになっています。つまり、これからは使わないでねということですね。

今時はVue3.0で、Viteというツールを使うようです。

このツールは、Vue3以降の対応のため、使えません。

本書では、さらにVueCLIのバージョン指定が古くなっています。この通りのバージョンを入れておきます。

@vue/cli@3.0.1 @vue/cli-service-global@3.0.1

問題となった個所

P.206のサンプルVueファイルを起動するコマンド

vue serve hello.vue --open

これをそのまま実行するとcompilerがないので止まってしまいます。

。。。困った。

解決策

しかし、プロジェクトから作っていくのが普通らしいです。
そこで、

sudo vue create <project name>

選択肢が出るので、今回は２番目のVue 2を選択

Vue CLI v3.0.1
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
  Manually select features

プロジェクトのひな型を作ってくれます。

✨  Creating project in /プロジェクトフォルダ名.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

(######⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠋ idealTree:esrecurse: timing idealTree:node_modules/esrecurse Completed in 1ms

作成されるプロジェクトフォルダのツリー

./hello
├── README.md
├── babel.config.js
├── jsconfig.json
├── node_modules
│   ├── (any package folder)
│   │
│
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js
└── vue.config.js

1297 directories, 3373 files

ここで、src内のApp.vueを編集します。
編集したらビルドする必要があります。

cd ./hello
sudo npm run build

起動

sudo npm run serve

これで進めていくことができます。

不思議なことに...

プロジェクトファイルが生成された後からは、以下のコマンドで起動します。

sudo vue serve ./src/App.vue --open

なお、@vue/cliのバージョンが違うと、また別の挙動になるので、素直に本の通りのバージョンで進めます。