Vue.jsの始め方

Vue.jsって何?という自分が、Vue.jsの基本を理解するためにとった行動をここにメモしておく。

Vue.jsそのものの説明は公式サイトの日本語ドキュメントが詳しいのでそちらを確認するとして、ここでは開発環境の準備手順の一例を書いていく。

Node.jsとnpmをインストールする

次のサイトからNodistのインストーラをダウンロード・実行し、Nodistをインストールする。Nodistは、Node.jsのバージョンを1台のPC内で切り替えて使えるようにしてくれる便利なツール。

既にNode.jsをインストール済の人で、かつNodistを使いたい人は、インストール済のNode.jsをすべて一度アンインストールする必要がある。

https://github.com/nullivex/nodist/releases

コマンドプロンプト(Linuxの場合はターミナル、端末とも)を開き、次のコマンドを実行し、Nodistのバージョン番号が表示されたら、Nodistは正常にインストール済。2019/3/9現在、バージョン番号は0.8.8

nodist -v

次のコマンドを実行し、インストール可能なNode.jsのバージョン一覧を表示する。

nodist dist

2019/3/9現在、最新のLTS版のNode.jsであるバージョン10.15.3をインストールするためには次のコマンドを実行する。

nodist + 10.15.3

Node.jsをインストールすると、同時にnpmもインストールされる。

インストール後、次のコマンドを実行し、インストール済のNode.jsのバージョン一覧を表示する。

nodist list

所望のバージョンが選択されていない場合は使うNode.jsのバージョンを指定する必要がある。そのためには例えば次のようにバージョン番号を指定する。

nodist 10.15.3

次のコマンドを実行して、Node.jsのバージョンを確認する。

node -v

Node.jsがインストールされると同時にnpmもインストールされているので、次のコマンドでnpmのバージョンを確認する。2019/3/9現在でnpmのバージョンは4.0.5となっている。

npm -v

Visual Studio Codeを入手する

次のサイトからVisual Studio Codeを入手・インストールする。

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

Visual Studio Codeの拡張機能「Vetur」をインストールする。

Vue.jsの開発環境(vue-cli)をインストールする

次のコマンドを実行する。カレントディレクトリはどこでもよい。

npm i -g @vue/cli

Vue.jsのプロジェクトテンプレートを生成する

次のコマンドを実行し、ソースコードを置きたいディレクトリに移動する。

cd 移動先ディレクトリ

次のコマンドを実行する。

vue create プロジェクト名

ページ遷移の無いアプリを作りたい場合はdefaultを選択してEnter。

ページ遷移のあるアプリを作りたい場合はManually select featuresを選択し、Routerをスペースキーで選択して後はデフォルト設定を選択していく。

コンパイルしてブラウザで画面を確認する

カレントディレクトリ内に、新たにプロジェクト名のディレクトリが作られたので、そのディレクトリをVisual Studio Codeで開く。

Visual Studio Codeの画面上部のメニューから「ターミナル」→「新しいターミナル」を選択する。

表示されたターミナル内で次のコマンドを実行する。

npm run serve

ソースコードのコンパイルが終わるまで1分くらい待つ。

次のような画面が表示された場合は、自分の現在のネットワーク環境に応じて選択してから「アクセスを許可する」ボタンをクリックする。たいていの人は「プライベートネットワーク」を選択しておいた方が安全。

ターミナル内に次のような表示があればコンパイル成功。WebブラウザからURL「http://localhost:8080」を開くと画面が確認できる。

vue-cli環境の基本構造

vue create <プロジェクト名>コマンドを実行後の選択肢でdefaultを選択した場合、次のようなディレクトリ構造が生成される。

  • node_modulesディレクトリ
    • 開発環境の諸機能が色々詰まっているディレクトリ。
    • このディレクトリ以下を直接編集することはない。というかしてはいけない。
  • publicディレクトリ
    • favicon.ico
      • アイコン(ファビコン)のサンプル。
    • index.html
      • 画面の最も「親」となるところ。HTMLファイルの基本構造を書く。
  • srcディレクトリ
    • assetsディレクトリ
      • 画像など各種リソースファイルを置くところ。
    • componentsディレクトリ
      • コンポーネントを置くところ。
    • App.vue
      • 最も親となるコンポーネント。画面全体を表現する最も巨大なコンポーネントと考えてよい。
    • main.js
      • Vue.jsフレームワークの呼び出し部分などを書く。
  • .gitignore
    • gitを使うときに必要な「無視リスト」。
  • babel.config.js
    • 筆者はまだよく知らない。いずれ調べる
  • package.json
    • 開発環境で使うnpmパッケージの一覧が書かれている。
    • vue-cliで使用するパッケージは既に書かれている。
  • README.md
    • デフォルトでは基本的なビルド方法などが書かれている。

コンポーネントとは

Vue.jsを用いたWebフロントエンド開発では、画面を「コンポーネント」と呼ばれる単位に分割して設計するのが基本。あるコンポーネントはさらに内部でコンポーネントを持つこともある。

例えば次のような具合に。

※このブログサイト自体はVue.jsでは実装されていません。あくまでコンポーネントに分けるとしたら、という話です。

Vue.jsの設定

次のコマンドを実行すると、distフォルダが作成され、distフォルダ内にindex.htmlファイルやCSS、JSファイルなどがまとめて生成される。

npm run build

しかし、デフォルトではCSSやJSのファイルパスが相対パスになっていないので、index.htmlをブラウザで開いても何も表示されない。

相対パスにするためには以下の手順を踏む。

まず、プロジェクトフォルダ直下に vue.config.js という名前の空のファイルを作成する。この名前のファイルは、コンパイル時に自動的に読み込まれ、ファイル内に記載された設定情報がvue-cliに適用される。

ファイル内には次のように記載する。

module.exports = {
    // options...
    publicPath: ''
}

他、vue-cliには色々設定できる。次のサイトが参考になる。

https://cli.vuejs.org/config/#global-cli-config

参考

https://www.amazon.co.jp/Vue-js%E3%81%A7Todo%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86-kenpapa-ebook/dp/B07JLBB1V9

https://cli.vuejs.org/config/#global-cli-config

コメントする