はじめに
こちらはサポーターズColab で開催の勉強会の説明資料その1です。
Vue.jsでフォームバリデーションを作ってみよう！ の内容を分割、アップデートしたものです。
この記事に書いてあること
-
VueCLI を使った
Manually select featuresの環境構築の手順 - 各項目のかんたんな説明
この記事で省いていること
- CLIの説明
- 各ライブラリの説明
環境
開発環境のインストール
Vue.jsの開発環境の構築方法として、下記の3つがあります。
| 方法 | ファイル | 使うケース |
|---|---|---|
| scriptで直接埋め込む | .html/.css/.jsファイルで作成 | プロトタイピングや学習目的 個人開発 |
| npm を利用したインストール | .html/.css/.jsファイルで作成 .vueファイルで作成 |
大規模アプリケーション開発 |
| CLIを利用したインストール |
.vueファイルで作成（以下、単一ファイルコンポーネント） |
中規模以上のアプリケーション開発 |
Webpackなどのモジュールハンドラの設定はせずに実装を進めたいので、ハンズオンではCLIを利用したインストールを行っていきます。
公式で提供されている VueCLIを利用します。
インストール手順は、VueCLIの公式サイトにしたがって進めていきます。
vue-cliのインストール
下記コマンドを実行します。
$ npm install -g @vue/cli
インストールが完了すると下記の表示されます。
+ @vue/cli@4.0.5
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 を使用する前に、ビルドツールなしでガイドを参照することを強くお勧めします。
…フロントエンドで求められる知識の幅は広いですね🤔