- サイト制作のノウハウと最適化を目指して-

2018.10.7VueCLI 3.0の機能が魅力的で使ってみたくなった

VueCLI 3.0の機能が魅力的で使ってみたくなった

Vue.jsが2.xから3.xへアップデートされました。これに伴いVue CLIも新しく更新されたようですので導入〜新機能まで紹介していきます。

インストール

Vue CLI3をインストールするには次のコマンドを使用します

install
npm install -g @vue/cli

Vueインストール後、コマンドラインでvueが使用できることを確認します。

version
$ vue --version 3.0.4

インスタントプロトタイピング

コマンドと*.vueファイルを使用して単純なプロトタイプを作成できます。

プロトタイプではプロジェクトを作成することなくvueを使用できるので非常に便利です。

追加でインストール
npm install -g @vue/cli-service-global

次にApp.vueファイルを作成

App.vue
<template> <h1>Hello!</h1> </template>

vue serveコマンドを使用してみましょう。http://localhost:8080にローカルサーバーの立ち上げとHTMLの表示が確認できるでしょう!

vue serve App.vue
vue.js hellow world

Vueプロジェクトマネージャー(vue ui)

Vueプロジェクトマネージャーvue cliに含まれる機能です。GUIベースでVueプロジェクトを管理できる非常に優れたツールでブラウザでプロジェクトを作成、プラグインをインストール、サーバーの立ち上げ操作が使用できます。

Vueプロジェクトマネージャーは次のコマンドを使用することで立ち上がります。

vue ui
vue.js

プロジェクト作成

「ここに新しいプロジェクトを作成する」を選択してVueプロジェクトを作成してみましょう。

基本的にデフォルトの設定のまま作業を進めていきます。

vue.js
vue.js
vue.js

以上でプロジェクトの作成は完了です。コマンドラインで実行するよりも非常に簡単ですね。

プロジェクトプラグイン

プロジェクト作成後はプロジェクトプラグインからVuexなどのプラグインもインストールできます。

vue.js
vue.js
vue.js
vue.js
vue.js

プロジェクトタスク

今までnpm run devとしていたコマンドもプロジェクトタスクから立ち上げが出来ます。

vue.js
vue.js
vue.js

各モバイルの通信帯域から読み込み速度を出してくれるのも非常にわかりやすくポイント高いです。実際にLTEが1.38sもかかるのかは謎ですが・・・

vue.js

環境変数

env変数をプロジェクトルートに次のファイルを配置することで指定できるようになりました。

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

いかがでしょうか、細かい部分ではありますがvue.jsの2系を使っているとバージョンアップしたくなる内容が多いですね。導入は簡単ですので是非2系から3系へアップデートしてみてください。