【忘却のJavaScript#2】Windows10でVue.js動かしてみる

Vue.jsをインストールして、動かしてみたいと思います。
今回はローカル環境をつくるところまでしかやりませんが、Web上にたくさん公開されている画面テンプレを利用すれば、かなり簡単にきれいな画面をつくることができる代物です。

目次

「Vue.js」とは？

• SPAを実装するためのJavaScriptフレームワークの1つ
• Angular.js (Google提供) / React.js (Facebook提供)と並ぶ代表的なフレームワーク

やりたいこと

yarnを使って、Windowsローカル環境にVue.jsをインストールし、サンプルページを表示させる

用意するもの

• OS： Windows10
• エディタ： VSCode (ver1.3.3)
• パッケージ管理SW： YARN (ver1.16.0)
• YARNのインストーラ用： Node.js (ver10.15.3)
• JavaScriptフレームワーク： Vue.js (ver3.7.0)

VSCodeインストール

• 以下にアクセスし、「Download for Windows」を選択して、exeファイルをダウンロード
  • Visual Studio Code - Code Editing. Redefined
• ダウンロード後、exeファイルを実行し、VSCodeをインストール
  • インストールウィザードでは全てデフォルト設定を選択
• インストール完了後、起動してみて以下のような画面が立ち上げればOK

VSCode起動後の画面

YARNインストール

• 以下にアクセスし、「YARNをインストール」を押下
  • https://yarnpkg.com/ja/
• YARNの利用にはNode.jsが必要となるため、事前にインストールしておく
  • 「インストーラを使用する場合はまず Node.js をインストールしておく必要があります。」の"Node.js"をクリックするとダウンロード先に飛べる
  • 「10.15.3 LTS」を選択してmsiファイルをダウンロード
  • ダウンロード後、msiファイルを実行し、Node.jsをインストール
  • インストールウィザードでは全てデフォルト設定を選択
• YARNのダウンロードページに戻り、[Windows]、[安定版1.16.0]を選択し、[インストーラをダウンロードする]を押下
• ダウンロード後、msiファイルを実行し、YARNをインストール
• インストールが完了したら、コマンドプロンプトから以下のコマンドを実行し、想定バージョンが表示されればOK

> yarn --version
1.16.0

Vue.jsインストール

• コマンドプロンプトから以下のコマンドを実行し、Vue.jsをインストールする
  • 1、2分くらいかかる

> yarn global add @vue/cli

• 以下のコマンドを実行し、想定バージョンがインストールされていることを確認する

> vue --version
3.7.0

プロジェクトの作成

• プロジェクトを配置したいディレクトリに移動する
• コマンドプロンプトから以下のコマンドを実行し、雛形プロジェクトを作成する

> vue create sample-app

• 上記、コマンド内でインタラクティブにプロジェクトの作成を行っていく
  • 状態管理やら静的解析やらテストやらプロジェクトで使うツールを選ぶのですが、詳細な説明は割愛・・
  • 今回はひとまず今後使いそうなものを以下の通り選択していく
    • 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
      • (＊) CSS Pre-processors
    • User history mode for router? ⇒ "n"
    • Pick a liner / formatter config: ⇒ "ESLint + Prettier"
    • Pick additional lint features: ⇒ "Lint on save"
    • Pick a unit testing solution: ⇒ "Jest"
    • Pick a E2E testing solution: ⇒ "Cypress (Chrome only)"
    • Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? ⇒ "In package.json"
    • Save this as a preset for future projects? ⇒ "y"
    • Save preset as: ⇒ "sample-app"
    • Pick the package manager to use when installing dependencies: ⇒ "Use Yarn"
  • 一通り選択してEnterを押下するとプロジェクト作成が開始される
    • 10分くらいかかる (Cypressが重い・・・)
• プロジェクトをVSCodeから開いて確認してみる
  • VSCodeを起動し、[File]->[Open Folder...]を選択
  • ファイルエクスプローラから先ほど作成したプロジェクトのディレクトリを選択して開く
  • すると以下の画像のようにプロジェクトのディレクトリ階層が構築されていることを確認できる
    • 左側にプロジェクトのsrcやconfigが並んでいる
    • ちなみにHome.vueは後述しているWelcomeページの実態

Vueプロジェクトの雛形

プロジェクトのビルドとアプリ起動

• コマンドプロンプトから作成したプロジェクトディレクトリの第一階層に移動し、以下のコマンドを実行してビルド＆起動を行う
  • 以下の通り、"DONE Compiled successfully"と"App running at"が表示されればOK

> yarn serve

DONE  Compiled successfully in 9367ms                                22:24:31

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

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

• 以下のURLにアクセスし、画像のように「Welcome to Your Vue.js App」のページが表示されれば成功
  • http://localhost:8080/#/

Vueのウェルカムページ

以上。