Chapter 02

環境構築

matsu7089
matsu7089
2021.01.01に更新

開発環境

Node.jsYarn がインストールされている前提で進めます。
下記のバージョンと近いものか、高いものであれば基本動くと思います。

> node -v
v12.18.3

> yarn -v
1.22.5

Vue CLI 4 のインストール

Vue.js アプリを簡単につくることができるようになる Vue CLI をインストールします。
執筆時点の最新バージョンは 4.5.6 でした。

> yarn global add @vue/cli

> vue --version
@vue/cli 4.5.6

プロジェクトの作成

vue create プロジェクト名 と打つと、プロジェクトを作成できます。
実行例では、プロジェクト名を gas-account-book として進めます。

> vue create gas-account-book

デフォルトを選択すると一発でプロジェクトを作成できますが、
今回 Vue RouterVuex を追加したいので、マニュアルで進めます。
(上下でカーソル移動、エンターで決定できます)

Vue CLI v4.5.6
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
❯ Manually select features

「Babel」「Linter / Formatter」の選択はそのままで、
「Router」「Vuex」を追加して決定します。
(スペースキーで選択の状態を切り替えられます)

? Check the features needed for your project:
 ◉ Choose Vue version
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
❯◉ Router
 ◉ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

バージョンは 2.x を選びます

? Choose a version of Vue.js that you want to start the project with
❯ 2.x
  3.x (Preview)

history mode を使うか?と尋ねられますが、今回は使わないので「n」を入力します。

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

ESLint の設定はエラー防止のみの「ESLint with error prevention only」を選択します。

? Pick a linter / formatter config:
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

保存のときに Lint してもらいたいので、「Lint on save」のまま次へ。

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

設定ファイルは config ファイルに書いてほしいので、
「In dedicated config files」を選択。

? Where do you prefer placing config for Babel, ESLint, etc.?
❯ In dedicated config files
  In package.json

今回のプロジェクト設定を保存するか聞かれますが、「N」で次へ。

? Save this as a preset for future projects? (y/N) N

Yarn を使いたいので、そのまま次へ。

? Pick the package manager to use when installing dependencies:
❯ Use Yarn
  Use NPM

必要パッケージのインストールがはじまります。

Vue CLI v4.5.6
✨  Creating project in /xxxxx/gas-account-book.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

このように表示されれば完了です。

🎉  Successfully created project gas-account-book.
👉  Get started with the following commands:

 $ cd gas-account-book
 $ yarn serve

gas-account-book ディレクトリ内に移動します。

> cd gas-account-book

次に Vuetify を追加します。
Vue CLI を使うと、簡単にプラグインもインストールできます!

ちなみに Vuetify とは Vue 用のマテリアルデザインフレームワークです。
今回はデザインを Vuetify まかせにしてサボります。

このハンズオンに出てくる v- から始まるタグはすべて Vuetify のコンポーネントです。
デザイン面の話はあまり触れないので、気になる方は公式ドキュメントを参照してください。

> vue add vuetify

この設定はデフォルトで進めます。

✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset:
> Default (recommended)
  Prototype (rapid development)
  Configure (advanced)

このように表示されれば完了です。

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
 vuetify  Discord community: https://community.vuetifyjs.com
 vuetify  Github: https://github.com/vuetifyjs/vuetify
 vuetify  Support Vuetify: https://github.com/sponsors/johnleider

yarn serve コマンドで開発サーバーを起動してみます。

> yarn serve

Compiled successfully という表示がでたら http://localhost:8080/ にブラウザーでアクセスしてみましょう!
「Welcome to Vuetify」が表示されれば環境構築完了です!✨

この開発サーバーではホットリロードが有効なので、ファイル編集がすぐに反映されます。
以降はこのサーバーが起動している前提で進めて行きます。

現時点のソースコード一覧はこちらから確認できます!