Vue.js 入門 (3) - プロジェクトの作成

「Vue CLI」による「プロジェクト」の作成方法についてまとめました。

・Vue 2.6.14
・@vue/cli-service 4.5.13

前回

1. プロジェクト

1つのファイルによるWebアプリの開発は、基本を学ぶには適してますが、大規模なWebアプリを構築するには不向きです。そこで、「プロジェクト」を使って、復数ファイルによるWebアプリの開発の手順をまとめました。

2. 開発ツールの準備

◎ Node.jsのインストール
「Node.js」のインストール手順は、次のとおりです。

◎ Vue CLIのインストール
「Vue CLI」を以下のコマンドでインストールします。

$ npm install -g @vue/cli
$ npm install -g @vue/cli-service-global

Vue CLI

3. プロジェクトの作成

プロジェクトの作成手順は、次のとおりです。

(1) 以下のコマンドで、プロジェクトの作成を開始。

$ vue create hello_app

(2) プリセットの選択肢が表示されるので、上下キーで選択して、Enterキーで決定。
今回は、選択項目の確認のため「Manually」を選択します。

? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint) 
❯ Manually select features 

(2) 必要な機能の選択肢が表示されるので、上下キーで選択して、スペースでチェックして、Enterキーで決定。
今回は、そのままEnterキーで決定します。

? Check the features needed for your project : 
❯◉ Choose Vue version
  ◉ Babel
  ◯ TypeScript
  ◯ Progressive Web App (PWA) Support
  ◯ Router
  ◯ Vuex
  ◯ CSS Pre-processors
  ◉ Linter / Formatter
  ◯ Unit Testing
  ◯ E2E Testing

(3) Vueのバージョンの選択肢が表示されるので、上下キーで選択して、Enterキーで決定。
今回は、「2.x」を選択します。

? Choose a version of Vue.js that you want to start the project with 
❯ 2.x
  3.x

(4) Lintとフォーマッターの選択肢が表示されるので、上下キーで選択して、Enterキーで決定。
今回は、そのままEnterキーで決定します。

? Pick a linter / formatter config:
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

(5) Lintの追加機能の選択肢が表示されるので、上下キーで選択して、スペースでチェックして、Enterキーで決定。
今回は、そのままEnterキーで決定します。

? Pick additional lint features:
❯◉ Lint on save
  ◯ Lint and fix on commit

(6) 設定情報の記述場所の選択肢が表示されるので、上下キーで選択して、Enterキーで決定。
今回は、そのままEnterキーで決定します。

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

(7) これまでの設定をプリセットとして保存するかどうかを、y/Nで指定。
今回は、設定項目を確認しただけなので、Nを指定します。

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

(8) yarmとnpmのどちらかを選択して、Enterキーで決定。
今回は、そのままEnterキーで決定します。

? Pick the package manager to use when installing dependencies:
❯ Use Yarn
  Use NPM

プロジェクトの作成が成功すると、以下のように表示されます。

🎉 Successfully created project hello_app.
👉 Get started with the following commands:

$ cd hello_app
$ yarn serve

4. プロジェクトの実行

プロジェクトの実行手順は、次のとおりです。

(1) プロジェクトフォルダ(hello_app)で以下のコマンドを実行。

$ yarn serve

(2) ブラウザで「http://localhost:8080/」を開く。
以下の画面が表示されます。

5. プロジェクトのフォルダ構成

プロジェクトのフォルダ構成は、次のとおりです。

・.git : Gitの設定ファイル
・node_modules : npmのパッケージ群
・public : 公開フォルダ (HTML/CSS)
    ・favicon.ico
    ・index.html
・src : ソースフォルダ (JS)
    ・asset
        ・logo.png 
    ・components
        ・HelloWorld.vue
    ・App.vue
    ・main.js

・.browserslistrc : Browserの設定ファイル
・.eslintrc.js : ESLintの設定ファイル
・.gitignore : Gitの設定ファイル
・babel.config.js : Babelの設定ファイル
・package.json : npmのパッケージ管理の設定ファイル
・README.md : README

6. プロジェクトのビルド

プロジェクトのビルド手順は、次のとおりです。

(1) 以下のコマンドでプロジェクトをビルド。

$ yarn run build

成功すると、プロジェクトフォルダ下にdistフォルダが生成されます。distフォルダの中身をサーバーにアップロードすることで、Webアプリを公開できます。

7. Webアプリの実行

VSCodeのLiveServerを使って、ローカルでもWebアプリの動作確認ができます。

(1) VSCodeで拡張機能の「LiveServer」をインストール。

Live Server - Visual Studio Marketplace

(2) distフォルダをVSCodeで開く。
(3) 右下の「Go Live」ボタンを押す。

以下の画面が表示されます。

8. distフォルダのフォルダ構成

distフォルダのフォルダ構成は、次のとおりです。

・css
    ・app.fb0c6e1c.css
・img
    ・logo.82b9c7a5.png
・js
    ・app.630b7c08.js
    ・app.630b7c08.js.map
    ・chunk-vendors.72f772a2.js
    ・chunk-vendors.72f772a2.js.map
・favicon.ico
・index.html

次回