はじめに
Angular 、React など JavaScript のフレームワークはたくさんありますが、今最も人気があると言ってもよい Vue.js をチョイスしました。
（実際、Qiita のタグのフォロー数もそうですし）
（まあ、Angular に関しては 1.x 系、2.x 系あるのであれですが）
インストール方法
Vue.js のインストール方法もいろいろとあります。
CDN から直接参照させる方法、npm で落としてくる方法、そして、公式の CLI を使う方法。
大規模なシングルページアプリケーション開発のための足場を素早く組むために、Vue.js ではオフィシャル CLI を提供します。
公式にこう書いてありますし、大規模ではないですがやりたいこととマッチしていたので、今回は Vue CLI 3 を使ってインストールします。
Vue.js をインストール
コマンドラインから次のコマンドでインストールします。
- Yarn を使った場合
> yarn global add @vue/cli
- npm を使った場合
> npm install -g @vue/cli
※Vue CLI 2 系までのインストール方法とは異なるので注意です！
Vue CLI 2 系までのインストール方法
- Yarn を使った場合
> yarn global add vue-cli
- npm を使った場合
> npm install -g vue-cli
確認しよう
コマンドラインで次のコマンドを叩いてみましょう。
> vue --version
3.0.5
バージョンが表示されたらインストール完了です！
勢い余ってプロジェクトも作ってみよう
インストールするだけでは味気ないのでプロジェクト作成まで行ってしまいましょう！
まずはプロジェクトを作成するワークスペースに移動しましょう。
> cd my-workspace
CLI を使ってプロジェクトを作成します。
> vue create my-project
ここから対話形式でプロジェクトの設定を行います。
（選択した内容によって出てこない質問もあります）
Please pick a preset
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
Manually select features
1つ目の質問で default を選ぶと以降の質問はなくシンプルな構成でプロジェクト作成が行われます。
default を選択した場合、PWA サポートや Router 、大規模 SPA 開発などで利用される Vuex などは含まれませんので、アプリを作る場合などで default を選択するシーンはあまりないかもしれません。
ということで Manually を選択するルート。
Check the features needed for your project
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
プロジェクトに必要な機能を選択できます。（複数選択可）
[PgUp]、[PgDn] キーで上下移動、[Space] キーで ON/OFF ができます。
Use class-style component syntax?
? Use class-style component syntax? (Y/n)
クラススタイルで Vue コンポーネントを使用するかどうかを選択できます。
Use Babel alongside TypeScript for auto-detected polyfills?
? Use Babel alongside TypeScript for auto-detected polyfills? (Y/n)
古いブラウザなどで ES6 で出力するために Babel を使って自動ポリフィルを行うかどうかを選択できます。
（ここ自信ないなー）
Use history mode for router?
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
HTML5 History モードを利用するかどうかを選択できます。
Pick a CSS pre-processor
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS
Less
Stylus
使用したい CSS のプリプロセッサを選択できます。
（Stylus は使ったことないな）
Pick a linter / formatter config
? Pick a linter / formatter config: (Use arrow keys)
> TSLint
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
静的検証ツールに何を使うか、またその設定を選択できます。
あまり詳しくないので ESLint + Standard config を選択しました。
Pick additional lint features
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
( ) Lint and fix on commit
Lint の実行タイミングを選択できます。（複数選択可）
Pick a unit testing solution
? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
Jest
ユニットテストに使用するツールを選択できます。
（Jest は使ったことないな）
Pick a E2E testing solution
? Pick a E2E testing solution: (Use arrow keys)
> Cypress (Chrome only)
Nightwatch (Selenium-based)
E2E テストに使用するツールを選択できます。
（正直、E2E テストを導入したことがない…今回試しにやってみようか…）
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
各種ライブラリの設定をそれぞれで行うか、package.json で行うかを選択できます。
個人的には慣れているので package.json。
Save this as a preset for future projects?
? Save this as a preset for future projects? (y/N)
今回のプロジェクト設定を再利用するかどうか選択できます。
Save preset as
? Save preset as:
プリセット（プロジェクト設定）の保存先を入力できます。
Please wait a minute...
この後、プロジェクト作成が行われ、
🎉 Successfully created project my-project.
👉 Get started with the following commands:
$ cd my-project
$ yarn serve
とメッセージが出たら作成完了です！
起動してみよう！
完了メッセージにあったように、作成されたプロジェクトに移動して、起動コマンドを入力してみましょう。
- Yarn を使った場合
> cd my-project
> yarn serve
※Vue CLI 2 系の場合は yarn dev で起動できます
- npm を使った場合
> cd my-project
> npm run serve
※Vue CLI 2 系の場合は npm run dev で起動できます
完了したら http://localhost:8080/ にアクセスです！
ヒャッホーイ！！
おっと、失礼しました…
プロジェクトの構造はこんな感じです。
まとめ
CLI がかなり使いやすいのでプロジェクトの起動までトントン拍子で進みます。
初めて触れるプログラミング言語って、ブログとか記事は読むけどなかなか手を動かすところまではいけないんですよね～
実際のところ、読んだだけじゃ全然身になってないんですけどね（汗）
Vue.js の導入は難易度も高くなくすぐにアプリ起動までだどりつけますので、騙されたと思って起動までやってみるとモチベーションアップに繋がるかも？！
インデックスページから来た人向け
アプリが起動すると進んだ感ありますよね！
これから少しづつ機能を増やしていきますので、よかったら他の記事も見てみてください！
