Help us understand the problem. What is going on with this article?

【基礎】Vue.js_Vue CLIを導入

Vue CLI とは?

Vue CLIは、Vue.jsアプリの開発支援ツール。

  • 単一ファイルコンポーネント(SFC)
  • ページ間の遷移(ルーティング)の定義
  • アプリのデータを集中管理

など、より高度なアプリを効率よく開発するためには必須のツール。

Vue CLIを使った開発では1つ1つのコンポーネントを「.vue」で管理する。
Vue CLIが備えているローカルサーバー上では[.vue」をブラウザで実行できるが、
サーバーにアップロードするタイミングでVue CLIの機能でビルドする。
コンパイル(読めるように変換)、バンドル(他のアプリと紐づける)をまとめてビルドと呼ぶ)

一般的にはwebpackと呼ばれるモジュールバンドラーを利用する。

npmについて

npmはJavaScript用のパッケージ管理ツール。
JavaScriptの実行環境であるNode.jsをインストールすると、一緒にインストールされる。
Node.jsをインストールし、Vue CLIをインストールするという流れ。

Node.jsのダウンロードページ
https://nodejs.org/ja/download/

npmとnodeが正常にインストールされたか、バージョンを確認しておく。

コマンドライン
> npm -v
6.9.0

> node -v
10.16.3

// 導入したバージョンが表示される

Vue CLIのインストール

コマンドライン
> npm install -g @vue/cli

インストール状況が表示される、少し時間がかかる。

正常に完了したかバージョン確認

コマンドライン
> vue --version
3.11.0

Vue CLIのバージョンが表示されればインストール完了。

Vue CLIの基本的な使い方

Vue CLI 3にはGUIのプロジェクト管理ツールが用意されている。
ツール画面からプロジェクトの作成やソースコードのビルドができる。

プロジェクト管理ツールを起動

コマンドライン
> vue ui

すると、ブラウザでこんな画面が表示される。
無題.png

新たにプロジェクトをつくる場合は
作成タブ → 「ここに新しいプロジェクトを作成」をクリック

無題.png
プロジェクトフォルダ名を入力 → 保存場所を設定 → 「次へ」をクリック

無題.png
プリセットとは、プロジェクトの初期設定を保存しておいて、次回プロジェクト作成時に再利用できるようにしたもの
最初は babel, eslint を選択でOK → 「プロジェクトを作成する」をクリック

するとコマンドラインで進捗が表示される。

完了すると、以下のような管理画面が表示される。

無題.png

プリセットに応じたプロジェクトのひな型が自動的に配置されている

無題.png

既にサンプルページのモジュールが配置されているので、ビルドしてすぐ実行することができる。

開発環境(ローカル)向けのビルド

プロジェクト管理画面にある左側メニューより
タスク → serve → 「タスクの実行」をクリック

無題.png

「出力」タブを開くと、VueCLIでは
- localhost:8080 でアプリを起動
- 開発環境向けのビルドでは最適化が行われていない
- 運用環境向けのビルドはnpm run buildコマンドで行う
ということが最後に書かれている。

http://localhost:8080/ 
を開いてみる。

無題.png

この状態でソースコードを更新するとブラウザの表示も更新される。

試しに 「Welcome to Your Vue.js APP」 という文言を変えてみる。

src/App.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Vue CLIを導入してみた"/>
  </div>
</template>
...

すると、こなる

無題.png

ブラウザを更新しなくてもモジュールの変更内容がリアルタイムに反映される機能をホットリロードと呼ぶ

運用環境向けのビルド

プロジェクト管理画面にある左側メニューより
タスク → build → 「タスクの実行」をクリック

無題.png

すると dist ディレクトリが作られており、
ブラウザで実行できる通常のHTML、CSS、JavaScript、その他描画に必要な画像などが入っている。
運用環境にはこれをアップロードする。

無題.png

無題.png

バージョンアップによって使い方など変わることもあるため、必要に応じて調べたり公式ガイドをみて対応すること。

ここまで書いといてあれですが、自分はnuxtが好き。
遠くない未来に誰でも作れるspaアプリwith nuxtてきなのやろうかな。

参考著書
・Vue.jsのツボとコツがゼッタイにわかる本
・Vue.js&nuxt.js超入門
(2冊とも入門には良かったです)

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away