Posted at

vue-cli 3.x の使い方


はじめに

vue-cliが3.xになりましたがそれにより仕様が2.xに比べてかなり変化しています。この記事ではそんなvue-cli 3.xの使い方について解説していきます。


vue-cliのインストール

2.xではパッケージ名がvue-cliでしたが、3.x@vue/cliに変更されました。


2.x3.xは共存できないため、2.xをインストールしていた方はnpm uninstall vue-cli -g2.xをアンインストールしてください。



npm

npm install -g @vue/cli


インストールできたか確認します。


vue

vue --version

3.5.3 // インストールしたバージョンが表示されます。


アドオンを追加

@vue/cli-service-globalを追加することによって一つの*.vueファイルを用いてテストすることができます。


npm

npm install -g @vue/cli-service-global



テストしてみる

以下のファイルを作成してください。


App.vue

<template>

<h1>Hello!</h1>
</template>

vueを実行します。


vue

vue serve App.js


http://localhost:8080/にアクセスして、Hello!が表示されたら成功です。


プロジェクトの新規作成


vue

vue create <プロジェクト名>

Vue CLI v3.5.3
// プリセットを選ぶように指示されます。よくわからない方はdefaultを選んでください。
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
Manually select features


このコマンドを用いると開発に必要なファイルがいろいろとインストールされます。また、gitリポジトリを自動で作成してくれるようです。(.gitignoreまで作成されていました。中にはログファイルやIDEが自動作成するファイルを除外するように書かれています。かなり親切ですね。)

プロジェクトができたら、早速実行してみましょう。

cd <プロジェクト名>

npm run serve

http://localhost:8080/にアクセスして、vueのロゴが見えたら成功です!


vue-routerのインストール

vue-routerをインストールすると画面遷移が簡単に行えます(シングルページアプリケーションの作成に有効です)。以下のコマンドを実行してください。


vue

vue add router


実行するとsrc/にいろいろなファイルが追加されたりファイルが書き換わったりするので注意してください。


最後に

いかがだったでしょうか。私自身まだvue.jsは勉強中なので間違っている部分があればコメントでお知らせください。