Help us understand the problem. What is going on with this article?

Vue.jsでフォームバリデーションをつくろう!ー環境構築編ー

Vue.jsでフォームバリデーションをつくろう!ー環境構築編ー

by matsumana07384
1 / 17

はじめに

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

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


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

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

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

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

環境

  • 端末
    • Mac OS X 10.15.1
  • インストール済みのライブラリ

開発環境のインストール

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

方法 ファイル 使うケース
scriptで直接埋め込む .html/.css/.jsファイルで作成 プロトタイピングや学習目的
個人開発
npm を利用したインストール .html/.css/.jsファイルで作成
.vueファイルで作成
大規模アプリケーション開発
CLIを利用したインストール .vueファイルで作成(以下、単一ファイルコンポーネント) 中規模以上のアプリケーション開発

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

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


vue-cliのインストール

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

shell
$ npm install -g @vue/cli

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

shell
+ @vue/cli@4.0.5
added 1156 packages from 638 contributors in 62.341s

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

shell
$ vue --version

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


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

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

shell
$ npm uninstall -g @vue-cli

$ npm install -g @vue/cli

プロジェクトを作成

shell
$ 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 にアクセスしてみてください。
下記が表示されていれば、環境構築は完了です!

20191205_localhost8080_1

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

20191205_localhost8080-2


おわりに

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

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

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

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした