これでわかるはじめてのvue-cli | アールエフェクト

vue-cliをインストールして使ってみたい、vue-cliをインストールしたけど何をしたらいいかわからないという人を対象にインストール、プロジェクトの作成、簡単なファイル更新までできるだけ詳細に説明を行っています。

vue-cliのバージョン3を利用しています。

Vueの基礎がまだ理解できていない人はこちらがおすすめです。

あわせて読みたい

vue.jsの基礎

0.1 vue-cliとは

1 vue-cliのインストール
2 プロジェクトの作成
3 構成を理解する

vue-cliとは

cliはCommnad Line Interfaceの略で、主にvue.jsで開発を行うための準備を支援してくれるツールです。開発はプロジェクトという単位で行い、プロジェクトの作成を行う際に使用する機能のインストールを簡単に行うことができます。webpackも一緒にインストールされるでプロジェクトを作成すればすぐに開発を開始できます。

vue-cliのインストール

vueのインストールには、npmが必要となります。npmが使える環境でvue-cliのインストールを行います。インストールが終わった後は、vue –versionを実行し、バージョンが表示されているか確認を行ってください。


$ npm install -g @vue/cli
$ vue --version
3.8.2

あわせて読みたい

MACへのnpmインストール

プロジェクトの作成

プロジェクトの作成を行います。vue createの後は任意のプロジェクト名をつけてください。今回はvue-applicationというプロジェクト名をつけました。

vue createコマンド実行後、デフォルトのnpmレジストリへの接続が遅いとメッセージが表示されているのでそのままYを選択します。より早いインストールのためにhttps://registry.npm.taobao.orgを使います。


$ vue create vue-application
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? (Y/n)

presetの選択が表示されます。基本的な動作を確認するため今回は、そのままデフォルトであるbabelとeslintのデフォルトを選択します。


Vue CLI v3.8.2
? Please pick a preset:
❯ default (babel, eslint)
  Manually select features

もしマニュアルの選択を選ぶと以下の画面が表示され、必要な機能を選択することができます。vueでの開発に慣れてくると必要となる機能もわかるのでデフォルトではなくこちらのマニュアル選択を選ぶことになります。こちらの機能は後からでもインストールできます。

ここからはインストールが完了するのを待つだけです。


ue CLI v3.8.2
✨  Creating project in /Users/mac/Desktop/vue/vue-application.
⚙  Installing CLI plugins. This might take a while..


⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vue-application.
👉  Get started with the following commands:

 $ cd vue-application
 $ npm run serve

実行ログの最後の指示通りvue-applicationに移動して、npm run serveを実行します。一度ビルド/コンパイルするため終了までに少し時間がかかります。

コンパイル完了後、ブラウザでhttp://localhost:8080/にアクセスします。この画面が表示されたらプロジェクトの作成は完了です。

プロジェクト作成直後のディレクトリ構成は以下のようになっています。

構成を理解する

プロジェクトを作成して、ブラウザにWelcome to Your Vue.js Appが表示されることは確認できました。でもこれから何をすればいいのでしょうか。早速プロジェクトを構成するファイルを確認していきましょう。

index.htmlを確認

ブラウザに表示されている内容を見るためにはまずpublic/index.htmlを確認してみましょう。index.htmlの中身を見てもブラウザに表示されていた内容はどこにも記述されていません。


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vue-application</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue-application doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

divタグの下にビルドファイルが自動で挿入される(built files will be auto injected)と記述されているので、これがヒントになりそうです。


    <div id="app"></div>
    <!-- built files will be auto injected -->

Chromeであればデベロッパーツールを使って<div id=”app”>の下に何が挿入されているのか確認してみましょう。

index.htmlには記述されていなかった複数のhtmlタグが<div id =”app”>の下に挿入されていることが確認できます。

ここまでにVueインスタンスのマウントについて話はしていませんが、<div id=”app”></div>が明らかにVueがマウントしている要素であることがわかります。

Vueインスタンスが#appにマウントしていることを確認するために次はJavaScriptファイルを調べていきましょう。

main.jsファイルの確認

プロジェクトを作成した直後には、node_modules、public、srcの3つのディレクトリが作成されます。node_modulesはnpmでインストールされるパッケージの保管ディレクトリ、publicはindex.htmlが保管されている公開用のディレクトリ、残る一つはsrc(=source)ディレクトリです。

srcの中を見るとmain.jsファイルがあります。mainという名前の通りプロジェクト全体の中でもっとも重要なファイルです。

main.jsの中身を確認してみましょう。


import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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

new Vueがありますが、これまで見慣れてきた下記の記述とは異なることが気になるかと思います。


var app = new Vue({
  el: '#app',
})

vue-cliを使う以前の見慣れた記述に似ていれば、この部分が何を表しているのか理解も深まると思いますので少しずつ記述方法を変えていきます。この部分はスキップしても問題ないので、興味のない人は次の”Appファイルの確認”に進んでください。

#appへのマウント処理を行っている$mount(‘#app’)をelの形にしてみましょう。


new Vue({
  el: '#app',
  render: h => h(App),
})

変更を行い保存してもブラウザの表示内容は変わりません。上記の変更でも影響がないことがわかります。

プロジェクト作成時にnpm run serveを実行しましたが、このコマンドを実行しておくとファイルの変更を検知し、ビルドを自動で行い、即座にブラウザに変更内容が反映されます。もし変更が反映されない場合はブラウザのリロードを行ってみてください。ブラウザでアクセスできない場合は、npm run serveを実行してください。

もう一つ見慣れないrender: h => h(App)という記述があります。これは下記の記述を短縮したものです。hはhyper Script（ハイパースクリプト）の略のようです。


render: function(createElement){
  return createElement(App)
}

確認のため、短縮系を元の形に戻してもブラウザの表示は変わりません。

renderの部分を見るとimportしたAppをcreateElement関数に入れることで何か変換を行い、その結果を描写(render)させているのは想像できるかと思います。


new Vue({
  el: '#app',
	render: function(createElement){
	  return createElement(App)
	}
})

renderについての詳しい説明はここでは行いませんが、最後にrender関数を別の記述に変更することもできます。

あわせて読みたい

これでわかるvue.jsのrender関数


new Vue({
  el: '#app',
  template: '',
  components: { App }
})

render関数もなくなり、見慣れたnew Vueの記述に近づいたかと思います。

しかし、ブラウザで確認するとこれまで表示されていた内容が表示されません。その代わり、下記のメッセージがデベロッパーツールのコンソールに表示されます。

vue.runtime.esm.js?2b0e:619 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

書き換えた内容で表示させるためには、追加の設定が必要になるので、プロジェクトのディレクト直下にvue.config.jsを作成して以下を記述してください。このファイルの読み込みを行うため作成後、npm run serveを停止し再度実行してください。


module.exports = {
  runtimeCompiler: true
}

vue.config.jsはデフォルトでは作成されていないファイルで、今回のようにvueの初期値を変更する場合等に使用する設定ファイルです。

vue.config.jsを作成するとエラーが消え、ブラウザには変更前と同じ画面が表示されます。

動作確認を行うためだけにvue.config.jsでruntimeCompilerの設定値を変更したので終わったら設定値の行を削除するかvue.config.jsファイルを削除してください。

main.jsファイルも元の記述に戻しておいてください。render関数を見慣れた形に戻すことでrender関数がどのようなことをするのかある程度理解できたかと思います。


var app = new Vue({
  el: '#app',
})

App.vueファイルの確認

最後にmain.jsファイルの中でimportしているApp.vueの中身を確認していきます。App.vueを見るとブラウザに表示されていたロゴやwelcom to your Vue.jsの文字列を確認することができます。


<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

App.vueの拡張子.vueはvue専用のファイルを表している拡張子で、中身は3つのパーツ(template, script, style)で構成されていることが確認できます。このファイルは単一ファイルコンポーネント(SPC)と呼ばれます。

webpackのようなビルドツールでは拡張子によってどのような処理を行うかを決めます。App.vueはwebpackのLoader機能(Vueではvue-loader)によってブラウザが認識できるJavaScriptへと変換が行われます。

あわせて読みたい

vue.jsコンポーネントの基礎

templateタグについて

templateタグについてはVue.components作成時にtemplateプロパティに記述していた内容をそのまま記述することができます。templateプロパティの場合はシングルクオテーション等を気にしなければいけませんでしたが、templateタグでは気にする必要はありません。


<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

templateタグの中にh1タグでHello Worldを記述してみましょう。


<template>
  <h1>Hello World</h1>
</template>

ブラウザにはHello Worldが表示されます。templateタグにhtml文を記述すればそのまま表示されることがわかります。

scriptタグについて

scriptタグの中には、JavaScriptを記述します。templateタグの中でHelloWorldのコンポーネントタグを使っているので、importでHelloWorld.vueを読み込んでいます。importで読み込んだHelloWorldはtemplateタグ内で使用するので、componentsにHelloWorldを追加する必要があります。


<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

HelloVue.vueを追加したい場合はHello Worldを参考に下記のように記述します。


<script>
import HelloWorld from './components/HelloWorld.vue'
import HelloVue from './components/HelloVue.vue'

export default {
  name: 'app',
  components: {
    HelloWorld,
    HelloVue
  }
}
</script>

HelloVue.vueファイルはcomponentsディレクトリの下からimportしているので、componentsディレクトリの下に作成する必要があります。


<template>
    <h1>{{ msg }}</h1>
</template>

<script>
export default {
  name: 'HelloVie',
  props: {
    msg: String
  }
}
</script>

<style>

</style>

App.vueのtemplateタグにも忘れずに追加したHelloVueコンポーネントのタグを追加します。


<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloVue msg="Hello Vue"/>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

ブラウザで確認するとvueのログの下に追加したHelloVueの中身であるHello Vueが表示されていることが確認できます。

追加インポートしたHelloVue.ve — 追加インポートしたHelloVue.vue

プロジェクト作成時のファイルの中身を参考に別のコンポーネントファイルを読み込むことができました。

styleタグについて

styleタグについてはHelloWorld.vueファイルで確認できるように通常のCSSを記述することでCSSを適用することができます。styleにscopedがついている場合は、CSSを記述したコンポーネントファイルの中だけで有効になります。


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

scopedをつけた場合とつけない場合どのような変化がおこるのか確認してみましょう。デベロッパーツールを利用します。

scopedをつけた場合は、タグにdata-v-で始める識別子がついていることがわかります。

headタグの中に記述される設定にも識別子が記述されています。

scopedをつけない場合はdata-v-のついた識別子はありません。

index.htmlから読み込むscriptタグは？

webpack等のビルドツールを知っている人であれば、main.jsから作成されるbundle.jsファイル等をindex.htmlファイルのscriptタグで指定する必要があるのではないかと疑問を持つかもしれません。vue-cliで作成したプロジェクトでは、JavaScriptも指定することなく自動で読み込まれています。

ここまでの説明を通して、作成したプロジェクトのどこのファイルを書き換えればどのように反映されるかもわかったかと思います。ぜひ自分の手でコンポーネントファイルの追加を行って、vue-cliを使用したプロジェクトの使用法に慣れてください。