Edited at

Vue.js 開発環境構築

More than 1 year has passed since last update.

Vue.jsの開発環境を構築したときのメモです。


環境・バージョン


  • Windows 10

  • Vue.js 2.5.17


ビルドツール

公式のツールである Vue CLI 3 で開発用アプリケーション起動からリリース用ビルドまでできる。


インストール

# vue-cli (1.x or 2.x) がインストールされている場合はアンインストールする。

npm uninstall vue-cli -g
npm install -g @vue/cli


使い方

# プロジェクトの新規作成

vue create {プロジェクト名}
# 対話形式で利用するプラグインを指定する。

# 開発用にアプリケーションを起動する。

npm run serve
# リリース用にアプリケーションをビルドする。
npm run build
# Lintを実行する。
npm run lint


参考


エディタ

IDEでワンストップ開発・有償ライセンスを用意できる場合は WebStorm、オープンソース系でやりたい場合は Visual Studio Code + Vetur が人気がある。私の場合は開発環境が非力で Vetur がもっさりしていたので Vim + vim-vue を使っている。


参考


デバッガ

vue-devtools でコンポーネントの状態やVuexで管理されている状態、イベントの監視などができる。スタンドアロンアプリケーション(Electron製)の他にChromeもしくはFirefoxプラグイン(ベータ版)が提供されている。