はじめに
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のバージョンが違うと、また別の挙動になるので、素直に本の通りのバージョンで進めます。