Vue.js

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

更新日:

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

新規プロジェクト作成

GUIの起動

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

vue ui

vue-ui-exec
vue-ui-start

新規プロジェクト作成

GUIが起動したのでプロジェクトを作成していきます。
「+作成」タブに切り替えて、フォルダを選択、「ここに新しいプロジェクトを作成する」で作成します。
vue-ui-project-1
vue-ui-project-2
プロジェクト作成のGUIが立ち上がります。
new project
まずはフォルダ名などの設定をします。
設定項目としては以下です。

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

次にプリセット(babel,eslint,TypeScriptなど)の設定です。
「デフォルトプリセット」、「手動」、「リモートプリセット(gitリポジトリからフェッチ)」の中から選びます。
今回は、手動で設定してみます。
new-project-2
手動の場合、使用するプラグインの設定をGUIから行うことができます。
new-project-3
以下の機能の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)を選択することができます。
わかりやすいですね。
new-project-4
プロジェクト作成をするとプリセットの設定を保存するか聞かれます。
今回は保存しないですが、保存をしておけば次回のプロジェクト作成時に呼び出すことができます。
new-project-5
プロジェクト作成が始まります。
new-project-6
エラーでうまくいかない。。
vue-ui-error
Error: Cannot find module '@vue/cli-ui-addon-widgets/dist'

とりあえず、npmで足らないモジュールをインストールします。

npm i -g @vue/cli-ui-addon-widgets

vue-ui-error-2
再び「vue ui」でGUIを起動します。
vue-ui-dashboard
vue-ui-dashboard-2
今度は無事起動しました。

ダッシュボードについて

ダッシュボードでは以下のようなことができます。

プロジェクトプラグイン管理
vue-ui-dashboard-project-plugins
プロジェクト依存の管理
vue-ui-dashboard-project-dependencies
プロジェクトの設定
vue-ui-dashboard-project-setting
プロジェクトのタスク管理
vue-ui-dashboard-project-tasks
これはほとんどGUIだけで完結するのでCUIを必要としない感じですね!
控えめにいって素晴らしいです。

-Vue.js

Copyright© freamap ブログ , 2020 All Rights Reserved.