モビンギ株式会社でフロントエンドを担当している堀岡です。
去年末から、モビンギのプロダクトを着々とVue.js環境への移行作業を進めています。
そんな中、2018年8月にVue CLI 3がリリースされました。
Vue CLI 2系まではプラグインのインストールやWebpackの設定などの面倒くさい作業をしなければいけませんでしたが、Vue CLI 3のリリースによってアプリケーションの初期構築を一瞬で済ませることができるようになりました。
そこで今回、Vue CLI 3を使って爆速でアプリケーションを立ち上げる流れを書いていきたいと思います。
所要時間は約5分。一瞬です。
Vue CLI をグローバル環境にインストールする
まずはグローバル環境にVueCLI3をインストールしてください。
Node.jsがインストールされていない場合は、事前にインストールしておいてください。
[npm]
npm install -g @vue/cli
[yarn]
yarn global add @vue/cli
プロジェクトを作成
任意のディレクトリに移動し、Vueアプリケーションを作成します。
$ vue create new-app
次にプラグインの設定をします。
babel,eslintのみでよければdefaultを選択してもらって構いません。
vue-routerやvuexが必要な場合はManually select featuresを選択しましょう。
使用するプラグインを選びます。
今回はBabel, Router(vue-router), Vuex, CSS Pre-processors, Linter/Formatterを選択しました。
Routerの設定です。
history modeを使用します。
history modeについてはhttps://router.vuejs.org/ja/guide/essentials/history-mode.htmlを参照してください。
CSS Pre-processorの設定です。
Sass/SCSSを使用します。
Linter/Formatterの設定です。
今回はESLint, Prettierを使用します。
Prettierについてはhttps://prettier.io/を参照してください。
次に、Lintが実行されるタイミングを「保存時」に設定にします。
次は各種設定をどこに記載するかを選択します。
今回は個別のconfigファイルを作成しました。
最後に今回設定した内容を保存しておくかを選びます。
保存した場合、次回以降同じ設定で簡単にアプリケーションを構築することができます。
これでvueアプリケーションのインストールが始まります。
新しいアプリケーションを起動してみる
インストールしたディレクトリに移動して、npm run serveを実行してください。
$ npm run serve
ビルドが開始され、サーバーが立ち上がります。
http://localhost:8080/にアクセスするとページが表示されます。
ここまでの作業は5分とかかりません。
プラグインの設定などで時間を消費せず、アプリケーションの開発に注力するのがいいと思っています。
Vue.jsの利用を考えてる方はぜひVue CLI 3を使ってみてください。
