MD-Blog_Web Creative

前回の記事から諸事情があり、だいぶ時間が空いてしまいました。

その間、開発環境であるVue CLIのv3が2018年8月にv4が2019年10月にリリースされました。

そこで今回はVue CLIの使い方をご紹介します。

Vue CLIの使い方

まずはコマンドプロンプト（Macではターミナル）を立ち上げ、

npm install @vue/cli -g

と入力してインストールします。

続いてプロジェクトを作成します。

vue create <プロジェクト名>

デフォルトの設定を使うか手動で設定するか選択します。
今回は手動で選択していきましょう。

? Please pick a preset: (Use arrow keys)
  default (babel, eslint)
> Manually select features    

必要なものを方向キーで移動しスペースキーで選択します。

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing     

• Babel / TypeScript
  JSにトランスパイルするもの

• Progressive Web App (PWA) Support
  PWAに対応させるか

• Router
  ルーティング機能（Vue Router）を使用するか

• Vuex
  状態を管理するプラグインを使用するか

• CSS Pre-processors
  sassなどのプリプロセッサを使用するか

• Linter / Formatter
  構文チェックや自動整形を使用するか

• Unit Testing / E2E Testing
  テストを導入するか

選択が終わると自動で必要なモジュールがインストールされます。

cd <プロジェクト名>

で移動して

npm run serve

を実行すると開発サーバが起動するので、ブラウザで http://localhost:8080/ にアクセスすると下記のような画面が表示されます。

どうでしょうか？
とても簡単ですね！

・・・
・・・・・・
・・・・・・・・・。

しかし、これだけではありません。
個人的なイチオシは

Vue CLI UI

というもので、プロジェクトをGUIで管理できるというものです。

フロントエンドエンジニアやデザイナーの方は"黒い画面"が苦手な人も多いですよね？
ですが、これなら大丈夫です。

では、早速使ってみましょう！
※nodistが原因でエラーが出る場合があるので、v0.9.x にアップデートしてみてください。

Vue CLI UIを使ってみよう

vue ui

を実行すると、

この様な画面が表示されます。

続いて、

1. 「作成」をクリック
2. プロジェクトを作成する場所を選ぶ
3. 「ここに新しいプロジェクトを作成する」をクリック

プロジェクトの名前などを入力します。

プリセットを選択します。
今回は手動を選択します。

ここで必要な機能を選択します。（後で追加することも出来ます）

設定を選択し、「プロジェクトを作成する」をクリックします。

すると必要なモジュールがインストールされ、この様な画面が表示されます。

ここで、Vue CLI プラグインを追加することができます。

ここで、パッケージを追加することができます。

ここで、パスなどの設定を変更することができます。

ここで、開発や製品ファイルの作成などのタスクを実行することができます。

開発を開始するには、

1. 「serve」をクリック
2. 「タスクの実行」をクリック

コンパイル完了後、「アプリを開く」をクリックします。
これで開発を始めることができます。

最後に、製品ファイルの作成です。

1. 「build」をクリック
2. 「タスクの実行」をクリック

どうでしょうか？
すごい簡単で便利ですよね！

これなら黒い画面が苦手な方でも怖がらず使えるのではないでしょうか。

それでは良い Vue ライフをお楽しみください！