Vue CLI 3から付属しているGUIを使ってみる

更新日：2019-01-30

Vue CLI 3からはGUIが付属しており、それを使用してプロジェクトの作成やプラグイン管理などが出来るようになりました。
Beta版なので多少おかしな挙動があるらしいのですが、とりあえず試していきます。

新規プロジェクト作成

GUIの起動

Vue CLI(ver.3)がすでに導入されている状態であれば、簡単に起動することができます。
以下のコマンドをターミナル等で実行しましょう。

vue ui

新規プロジェクト作成

GUIが起動したのでプロジェクトを作成していきます。
「＋作成」タブに切り替えて、フォルダを選択、「ここに新しいプロジェクトを作成する」で作成します。

プロジェクト作成のGUIが立ち上がります。

まずはフォルダ名などの設定をします。
設定項目としては以下です。

プロジェクトフォルダ
パッケージマネージャの選択
フォルダが存在する場合の上書き設定
Git リポジトリの初期化(初期コミット含む)

次にプリセット(babel,eslint,TypeScriptなど)の設定です。
「デフォルトプリセット」、「手動」、「リモートプリセット(gitリポジトリからフェッチ)」の中から選びます。
今回は、手動で設定してみます。

手動の場合、使用するプラグインの設定をGUIから行うことができます。

以下の機能のON/OFFが設定できます。

Babel
TypeScript
Progressive Web App Support
Router
Vuex
CSS Pre-processors
Linter/Formatter
Unit Testing
E2E Testing
設定ファイルを使用する(Package.json以外の設定ファイルを使用する場合)

今回は、「Babel」、「TypeScript」、「Router」、「Vuex」、「CSS Pre-processors」、「Linter/Formatter」をONにしてみます。

次へで進むと選択した機能の設定をしていきます。
例えばCSS pre-processorは何にするか(SassやStylus)を選択することができます。
わかりやすいですね。

プロジェクト作成をするとプリセットの設定を保存するか聞かれます。
今回は保存しないですが、保存をしておけば次回のプロジェクト作成時に呼び出すことができます。

プロジェクト作成が始まります。

エラーでうまくいかない。。

Error: Cannot find module '@vue/cli-ui-addon-widgets/dist'