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

【Vue.js】Vue CLIとは?ゼロからPJを立ち上げ作成したページを表示する方法

【Vue.js】Vue CLIとは?ゼロからPJを立ち上げ作成したページを表示する方法

開発支援ツールであるVue CLIを使えるようにするための環境構築方法から実際にブラウザに表示するまでの流れ。

目次

  1. Vue CLIとは?
  2. Vue CLIでできること
  3. 開発に必要なもソフトウェア
  4. Node.jsのインストール
    1. Node.jsとは?
    2. NPMとは?
    3. 主なサーバーサイド言語(&OS)とパッケージ管理ツール一覧
    4. Node.jsのインストール実操作(macの場合)
    5. nodeberwとは?
    6. Node.jsのLTSとは?
  5. Vue CLI v3のインストール
    1. npmのインストールコマンドの内容
    2. Vue CLI最新版のインストール方法
  6. 新規プロジェクトの作成
    1. Vue CLIでプロジェクトを作成
    2. Vue CLI対話モード
  7. PJのファイル・ディレクトリ構成
    1. node_modulesフォルダ
    2. publicフォルダ
    3. srcフォルダ
    4. 各種ファイル
    5. package-lock.jsonファイル
  8. serveコマンドの処理の流れ
  9. 単一ファイルコンポーネント
    1. 単一ファイルコンポーネントとは?
    2. 単一ファイルコンポーネントのコード例
    3. 単一ファイルコンポーネントのビルド
    4. ビルドとは?
    5. Vue CLIにおけるビルドの方法
  10. 単一ファイルコンポーネントの作成と表示
    1. 単一ファイルコンポーネントの作成
    2. 作成した単一ファイルコンポーネントの表示


Vue CLIとは?

CLIはCommand Line Interfaceの略。コマンドラインを使って開発を行うためのツール。

言語はVue.jsを使うため、Vue CLIと呼ぶ。Vue.js公式のツール。

Vue CLIでできること

Vue CLIを使うことで下記のようなことができる。
各機能を自分で作ることもできるが労力がかかる。よく使う機能を予め用意してくれているありがたいもの。

  • プロジェクトのテンプレートの作成
  • 複数のjsファイルを一つにまとめる
  • .vueファイルを.jsに変換する
  • トランスパイル
  • JavaScriptの構文チェック
  • テストツールの導入など


トランスパイルとは?

与えられたコードを別の言語に変換すること。プログラミングの翻訳。

JSでは、古い書き方にしか対応していないブラウザ用に、言語を変換することを指す。

<もう少し細かく>
JSは2015年に仕様が大きく変わった。その時に公表されたJSの仕様をES2015と呼ぶ。それ以前の使用がES系。

一部のブラウザでは、このES2015以降の書き方で書かれたJSを読み込めないため変換を行う。これがトランスパイルの主な目的。

トランスパイルの変換ソフト(トランスパイラ)にはBabelを使うのが一般的。

(私感)ES5からES2015になったのが2015年でもう5年以上経過しているので、いい加減気にしなくてもいいのではと思う。

開発に必要なもソフトウェア

  • Node.js v8.9以上
  • Vue CLI 3系のNPMパッケージ
  • テキストエディタ

Node.jsのインストール

Node.jsとパッケージ管理ソフトのNPMをインストールする。
NPMはNode.jsのソフトの中に入っている。

Node.jsとは?

サーバーサイドのJavaScript。サーバー操作をJavaScript言語を用いてできるようにしたのがNode.js。

JSはブラウザ画面上での処理を記述するというのが基本的な使い方。これをサーバーサイドの言語であるPHP、Ruby、Pythonなどの仲間入りさせたのが、Node.js。

NPMとは?

Node Package Managerの略。Nodeで使える便利なパッケージの管理ツール。

パッケージのインストールやバージョンアップなどができる。

主なサーバーサイド言語(&OS)とパッケージ管理ツール一覧

言語 パッケージ管理ソフト
Node.js npm
Ruby gem
Python pip
Linux yum
PHP composer
Mac homebrew
Windows Chocolatey/Windows Package Manager


Node.jsのインストール実操作(macの場合)

#インストール済みか確認(バージョンが表示されればインストール済み)
$ node -v

#npmがインストール済みか確認
$ npm -v

#homebrewがインストール済みか確認
$ brew -v 

#homebrewのインストール(5分ぐらい)
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

==> The Xcode Command Line Tools will be installed.
Press RETURN to continue or any other key to abort // Enterキーをクリックし、PCのパスワードを入力

==> Next steps:
- Run `brew help` to get started //完了


#nodebrewのインストール(10秒ぐらい)
$ brew install nodebrew

#nodebrewのバージョン確認
$ nodebrew -v


#nodebrewでインストールできるnode.jsのバージョン確認
$ nodebrew ls-remote


#node.js用にディレクトリを作成
$ mkdir -p ~/.nodebrew/src


#node.js公式サイトで確認したLTSバージョンをインストール
$ nodebrew install-binary v12.18.3


#nodebrewのバージョンを確認
$ nodebrew ls

v12.18.3
current: none //現在の有効になっているバージョンがない状態


#node.jsの使用するバージョンを指定
$ nodebrew use v12.18.3


use v12.18.3 //設定完了

#node.jsのパスを通す(bashを利用)
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile


#パスを通した設定を反映
$ source ~/.bash_profile


#node.jsのバージョンを確認
$ node -v

v12.18.3 //指定したバージョンが表示されれば完了

homebrewとは?

Mac OSのパッケージ管理ソフト。

・homebrew公式サイト
https://brew.sh/index_ja.html

nodeberwとは?

node.jsのバージョン管理ソフト。

homebrewでもバージョン管理できるが、古いバージョンをインストールし直した時にパスを通しなおすなど作業が必要。

nodebrewでバージョンを変更すれば、面倒な設定を合わせて実行してくれる。

Node.jsのLTSとは?

LTSとはLong Term Supportの略。
ソフトには最新版と、長期サポート対象が存在する。基本的にインストールはLTSバージョンにする。

node.jsのLTSは公式ページで確認できる。
https://nodejs.org/ja/

image.png


Vue CLI v3のインストール

今回は3系を使うためバージョンを指定してインストール。
(2020年8月時点の最新版はv4.5.1)

#Vue CLIがインストールされているか確認
$ vue --version


#Vue CLIをインストール(約30秒)
npm install -g @vue/cli@3.9.3


#Vue CLIがインストールされているか確認
$ vue --version

npmのインストールコマンドの内容

npm install -g @vue/cli@3.9.3
 ┗ オプション -g:グローバル(どこからでも使える)にする。
 ┗ @vue/cli: 最新版をインストール
 ┗ @vue/cli@バージョン: バージョンを指定してインストール

・Vue CLIのバージョンリリース状況
https://github.com/vuejs/vue-cli/releases

Vue CLI最新版のインストール方法

v3 -> v4へのアップグレードを含む

#最新版のインストール
$ npm install -g @vue/cli@next

#既存プロジェクトをアップデート
$ vue upgrade --next


新規プロジェクトの作成

Vue CLIでプロジェクトを作成

#(必要に応じて)フォルダの作成
$ mkdir ディレクトリパス

#PJフォルダを作成するディレクトリに移動
$ cd ディレクトリパス

#Vue CLIでPJを作成
vue create PJ名 

vue createを実行すると、現在いるディレクトリにPJフォルダが作成される。

Vue CLI対話モード

vue createでPJを作成すると、Vue CLIの対話モードに移る。

(1)確認用のシンプルな設計とするため、Manually Select featuresを選択する。

image.png

(2)PJに必要なパッケージを選択する。
以下3つのパッケージにチェックを入れる。(spaceキーで選択切り替え)

  • Babel:トランスパイラ
  • Router:ルーティングのためのVueルーター
  • Vuex:バージョン管理ソフト
image.png

チェックしてないソフトも、必要になったタイミングで別途インストール可能。

(3)historyモードを使用する(YES)

image.png

(4)ソフトの設定ファイルを個別に管理する(In dedicated config files)

image.png

(5)現在の設定をプリセットとして保存しない(No)

image.png

(6)インストール完了まで待機(約20秒)

(7)PJディレクトリに移動し、npmサーバーを起動する
指示されたコマンドを実行

image.png
$ cd PJ名
$ npm run serve

(7)ページを開く
Localで与えられたURLを開く。
http://localhost:8080/

image.png

ウェルカムページが表示されれば完了

image.png


PJのファイル・ディレクトリ構成

image.png

node_modulesフォルダ

インストールしたライブラリが保存されている。

publicフォルダ

WEB上に公開されるフォルダ。ドキュメントルートとなる。

image.png

srcフォルダ

開発者用のリソースを保存するフォルダ。

image.png

各種ファイル

ファイル名 概要
.browserslistrc babelのサポートするブラウザのバージョンが記述されている。(読み方: .browsers list rc)
.gitignore gitの無視リスト
babel.config.js babelの設定ファイル
package-lock.json npmの依存パッケージの設定
postcss.config.js postcssの設定ファイル

package-lock.jsonファイル

npmのコマンドの対応表や、使用するパッケージ情報が記載されている。

▼コマンド
例えば、npm run serveでnpmを起動したが、実際は、
npm run vue-cli-service serveが実行されている。

image.png

・serve:開発用の環境用のコマンド
・build:本番公開用のコマンド

▼パッケージバージョン情報
・dependencies: 使用するnpmパッケージ
・devDependencies: 開発モードでのみ使用するnpmパッケージ

image.png

serveコマンドの処理の流れ

npm run serveで実行される処理の流れは、

(1)vue-cli-service serveコマンドを実行
"serve": "vue-cli-service serve",

(2)publicフォルダ内をドキュメントルートとして公開

(3)htmlファイルのテンプレートに内容が表示される。

.html
<div id="app"></div>

(4) srcフォルダ内のmain.jsが反映される

.js
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

(5) renderオプションでappコンポーネントを表示する

.js
  render: h => h(App)

(6)appコンポーネントはsrcのapp.vueに記述されている。
app.vueにはHTML, css, jsが記述されており、その内容をテンプレートに表示している。

image.png


単一ファイルコンポーネント

単一ファイルコンポーネントとは?

拡張子が「.vue」のファイルを単一ファイルコンポーネントと呼ぶ。vue.jsのコンポーネントを個別のファイルに切り出したもの。

html, css, jsを記述することが可能。

単一ファイルコンポーネントのコード例

.vue
<template>
  <div id="app">
   <!-- htmlタグを記述 -->
  </div>
</template>

<style>
/*cssを記述*/
</style>

<script>
//jsを記述
</script>

単一ファイルコンポーネントのビルド

ビルドとは?

ソースコードのバグ検証後に実行可能なファイルに変換すること。

ブラウザはvueファイルを読み込めないため、ブラウザに表示するにはビルドが必要になる。

Vue CLIにおけるビルドの方法

(1)Webpack と (2)Vue-Loaderを使う

webpackとは?
自分で作成したスクリプトとライブラリとして読み込んでいるスクリプトを合体させるソフトウェア。

Vue-Loaderとは?
vueコンポーネントをjsファイルに変換する。
Webpackのローダー。


単一ファイルコンポーネントの作成と表示

単一ファイルコンポーネントの作成

こんにちは! と表示するファイルを作成する。

(1)srcフォルダのcomponentsフォルダの中に、konnichiwa.vueファイルを作成

image.png

(2)templateを作成する。
- HMTL:templateタグで囲む
- style: scoped属性をつけると現在のテンプレートにのみ適用となる

.vue
<template>
    <div>
        <h1>こんにちは!</h1>
        新たにテンプレートを作成し読み込み成功
        <hr>
    </div>
</template>

<script>
</script>

<style scoped>
</style>

作成した単一ファイルコンポーネントの表示

Home.vue内で作成したファイルの公開を行う場合。

(1)srcフォルダ > Viewsフォルダ > Home.vueファイルを開く

image.png

(2)vueファイルをインポートする
import コンポーネント名 from '@/components/ファイル名'

Home.vue
import Konnichiwa from '@/components/Konnichiwa.vue'



(3) componentsオプションに設定したコンポーネント名を追記

Home.vue
export default {
  name: 'Home',
  components: {
    HelloWorld,
    Konnichiwa
  }



(4) templateタグ内にコンポーネント名を追記
<コンポーネント名/>

Home.vue
<template>
  <div class="home">
    <Konnichiwa/>
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>



(5)サーバーを起動
npm run serve

▼読み込みに成功
http://localhost:8080/

image.png



(5)サーバーの終了
ctrl + c



以上。

yuta-38
メモとして活用してます
Why not register and get more from Qiita?
  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