こんにちは！エンジニア（仮）のめる（@c5meru）です。
最近はもっぱらバックエンドエンジニアとしてお仕事しているのですが、一方でVue.js 日本ユーザー会のスタッフとしてVue Fes JapanやVue.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
画面はだいたい以下のような感じです。
一部、きちんと日本語翻訳もされていてすごいですね！
プロジェクト作成画面
有効にする機能を選択する画面
有効にした機能の詳細について選択する画面
プラグイン一覧画面
プラグイン追加画面
package.jsonの表示
npm scripts一覧画面
まとめ
この発表をきっかけに、Nuxtとどう使い分ける？という議論にもなりましたが、まずはVueをしっかり使いこなすという意味で、Vue CLIでの構築はとても良さそうな感じがしました。
Vue CLI UI 上で公開されているプラグインの一覧を見たとき、まるでVSCodaやAtomのプラグインを入れるかのような感覚で、個人的にすごく感動しました！