はじめに

こちらはサポーターズColab で開催の勉強会の説明資料その1です。

Vue.jsでフォームバリデーションを作ってみよう！ の内容を分割、アップデートしたものです。

この記事に書いてあること

• VueCLI を使ったManually select featuresの環境構築の手順
• 各項目のかんたんな説明

この記事で省いていること

• CLIの説明
• 各ライブラリの説明

環境

• 端末
  • Mac OS X 10.15.1
• インストール済みのライブラリ
  • node.js
    • v13.1.0
  • npm
    • 6.12.1

開発環境のインストール

Vue.jsの開発環境の構築方法として、下記の3つがあります。

Webpackなどのモジュールハンドラの設定はせずに実装を進めたいので、ハンズオンではCLIを利用したインストールを行っていきます。
公式で提供されている VueCLIを利用します。

インストール手順は、VueCLIの公式サイトにしたがって進めていきます。

vue-cliのインストール

下記コマンドを実行します。

$ npm install -g @vue/cli

インストールが完了すると下記の表示されます。

+ @vue/[email protected]
added 1156 packages from 638 contributors in 62.341s

下記コマンドを叩いて、インストールの有無を確かめることもできます。

$ vue --version

今回であれば、@vue/cli 4.0.5 が表示されます。

VueCLIの 2.x や 3.x 系がインストールされていて、4.x に変更したい方

現在のバージョンをアンインストールの上、再度インストールをお願いします。

$ npm uninstall -g @vue-cli

$ npm install -g @vue/cli

プロジェクトを作成

$ vue create my-project

my-project の部分はファイル名になります。
そのため、自分が管理しやすい名称を指定してください。

※vue createコマンドを実行時に下記が表示された場合

Your connection to the default npm registry seems to be slow.
Use https://registry.npm.taobao.org for faster installation? (Y/n)

npmレジストリのアクセスに時間がかかる際に表示されます。
急ぎでない場合は n （No）選択することをおすすめします。

プリセットの選択

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

BabelとEslintを含むdefaultか、その他のライブラリを選択できるManually select featuresがあります。
TypeScriptやCSSのプリプロセッサをインストールしたい場合は、Manually select featuresを選択しましょう。
ライブラリは、あとから追加することも可能です。

ハンズオンでは、 Manually select features を選択します。

パッケージマネージャーの選択

Vue CLI v4.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project:
 ◯ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
❯◉ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◯ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

インストールしたいライブラリの名称にカーソルをわせ、spaceキーで選択ができます。
aキーを押下すると全てを選択、解除することができます。
iキーを押下すると、選択しているものは解除され、解除されているものは選択されます。

選択後は、Enterを押下してください。

ハンズオンでは、ルーティングの制御を行うため、 Router を選択します。

※その他のライブラリはご興味があれば、調べてみてください😀

vue-router のモードの選択

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

histrory モードを使用するかどうか尋ねられています。

デフォルトの設定は、hash モードで、URLにハッシュ(#)が付きます。
このハッシュを取り除けるモードが histrory モードです。

ハンズオンでは historyモードで実装するため、Yを入力して、Enterを押下してください。

※historyモードについて詳しく知りたい方は、Vue.js Router/HTML5 History モードを参照ください。

Babel、PostCSS、ESLintなどの設定箇所の選択

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

In dedicated config files を選択すると、専用の設定ファイルで設定できます。
In package.json を選択すると、1つのファイルで設定できます。

ハンズオンでは筆者の独断と偏見で1つのファイルを推奨したいので、In package.js 選択して、Enterを押下してください。

設定の保存の選択

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

今回選択した設定を保存することができます。

ハンズオンの設定を再利用する可能性は低いため、N（No）を選択してください。

パッケージマネージャーの選択

※こちらが表示されない場合もあります。

? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn
  Use NPM

特にこだわりがなければ、 Use NPM を選択して、Enterを押下してください。

以上でインストールの準備が整うので、インストールが開始されます！

インストールが完了すると、下記が表示されます。

🎉  Successfully created project my-project.

ローカル環境を立ち上げる

インストール完了後に表示されていたコマンドを実行します。

👉  Get started with the following commands:

 $ cd my-project
 $ npm run serve

実行が完了すると、下記が表示されます。

 Compiled successfully in 6040ms                                00:00:00


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://0.0.0.0:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

http://localhost:8080 にアクセスしてみてください。
下記が表示されていれば、環境構築は完了です！

上部の「About」をクリックすると、別のページが表示されます。

おわりに

VueCLIを使ったVue.jsの開発環境の構築手順をご紹介しました。

今回CLIを使用しましたが、こちらの方法について公式ドキュメントのインストール — Vue.jsには下記のように書かれております。

CLI は Node.js および関連するビルドツールに関する事前知識を前提としています。Vue またはフロントエンドビルドツールを初めて使用している場合、CLI を使用する前に、ビルドツールなしでガイドを参照することを強くお勧めします。

…フロントエンドで求められる知識の幅は広いですね🤔

Vue.jsでフォームバリデーションをつくろう！ー実装編ーに続きます！