UUUM攻殻機動隊(エンジニアブログ)

UUUMのエンジニアによる技術ブログです

Vue CLI 3.0について社内勉強会で発表しました

こんにちは!エンジニア(仮)のめる(@c5meru)です。
最近はもっぱらバックエンドエンジニアとしてお仕事しているのですが、一方でVue.js 日本ユーザー会のスタッフとしてVue Fes JapanVue.js Meetupのお手伝いに参加しているので、もうちょっとVueのキャッチアップをやったほうがいいかも😨...と思い、今回は表題のテーマで発表しました。

Vue CLI とは

Vue.jsプロジェクトのひな形を作成するための、コマンドラインツールです。
Node.js をインストールした状態で、以下のコマンドを実行すると動かせるようになります。

$ npm install -g @vue/cli

爆速でプロジェクトを作る

vue create <プロジェクト名> でプロジェクトを作成できます。
presetで、 default (babel, eslint) を選択すると爆速です。

$ vue create uuum-app

Vue CLI v3.0.5
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features 

手動でいろいろ設定してプロジェクトを作る

先ほどのpreset選択で、 Manually select features を選択すると、いろいろカスタマイズできます。

$ vue create uuum-app

Vue CLI v3.0.5
? Please pick a preset: (Use arrow keys)
  default (babel, eslint) 
❯ Manually select features 

Manually select features を選択し、enterキーで先に進みます。

Vue CLI v3.0.5
? 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

追加したいものをspaceキーで選択し、enterキーで先に進みます。
続いて、選択したそれぞれの項目について、詳細なライブラリ等の選択をしていきます。
最終的には下記のような感じになります。

Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processor
s, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production
) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
SCSS/SASS
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Jest
? Pick a E2E testing solution: Nightwatch
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) 

ここでenterキーを押すと各種ツールがインストールされ、プロジェクトが作成されます。

Vue CLI 3.0 の特徴

ここまでは既存の Vue CLI の機能のおさらいでした。
今回は8月にリリースされた Vue CLI 3.0 について取り上げていきたいと思います!

Vue CLI 3.0 の大きな特徴は、

  • プラグインシステム
  • Vue CLI UI

の2点です。
以降で、詳しく見ていきます。

プラグインシステム

Vue CLI に対応したプラグインであれば、

$ vue add <プラグイン名>

のコマンドを実行することで、機能拡張をすることができます。
OSSとして、このプラグインを開発したら楽しそうです✨

詳しくはこちら cli.vuejs.org

Vue CLI UI

こちらは、Vue CLI を GUI で動かすことができるツールです。
以下のコマンドを実行するとローカルサーバーが立ち上がり、その中でメニュー画面を見ることができます。

$ vue ui

画面はだいたい以下のような感じです。
一部、きちんと日本語翻訳もされていてすごいですね!

プロジェクト作成画面

f:id:c5meg1012:20181023170536p:plain

有効にする機能を選択する画面

f:id:c5meg1012:20181023170545p:plain

有効にした機能の詳細について選択する画面

f:id:c5meg1012:20181023170556p:plain

プラグイン一覧画面

f:id:c5meg1012:20181023170608p:plain

プラグイン追加画面

f:id:c5meg1012:20181023170617p:plain

package.jsonの表示

f:id:c5meg1012:20181023170633p:plain

npm scripts一覧画面

f:id:c5meg1012:20181023170642p:plain f:id:c5meg1012:20181023170655p:plain

まとめ

この発表をきっかけに、Nuxtとどう使い分ける?という議論にもなりましたが、まずはVueをしっかり使いこなすという意味で、Vue CLIでの構築はとても良さそうな感じがしました。
Vue CLI UI 上で公開されているプラグインの一覧を見たとき、まるでVSCodaやAtomのプラグインを入れるかのような感覚で、個人的にすごく感動しました!

参考にさせていただいた記事など

jp.vuejs.org

qiita.com

qiita.com

qiita.com

speakerdeck.com