Vue CLI3で始めるVue.js

Vueでの環境構築

弊社では、Vue.jsでのフロントエンド開発が増えており、今までjQueryに慣れ親しんでいた人もVue.jsに移行していたりします。

しかし、その際Vue.jsの環境構築につまづくことがありました。
本記事ではそのときにまとめたVue.jsの環境構築の方法を記載しています。

Vue.jsの環境構築方法

Vue公式では、下記3つの方法を用意しています。

• CDN
• NPM
• CLI

今回私のチームでは、ライブラリの導入しやすさ、単一コンポーネントの使用の点を考慮し、CLIを使ったVue.jsの導入をすることにしました。

Vue CLI3を使った環境構築

Vue CLI3を使って環境構築していきます。

1. インストール

$ npm install -g @vue/cli

※-gを付加し、グローバルにインストールしたくない場合は、npxを使うこともできます。
※Vue CLI3を使用するにあたって、Node.js(v8.9以上)が必要です。node -vを実行し、条件を満たしていなければ、先にnodeをインストールする必要があります。

2. インストール確認

vue --version

3. プロジェクト作成

vue create [プロジェクト名]

[プロジェクト名]: 任意のプロジェクト名を入力(vue create vue-sampleなど)

4. 色々回答

TypeScript / Vuex / Vue Router / 各種テストツール / リントを入れたりと、色々選択できます。特にわからなければ、デフォルトでも大丈夫です。

ここでは、[Babel]のみを選択します。

1. [Manually select features] を選択

2. [Babel]を選択

3. [In dedicated config files]を選択

4. [Save this as a preset for future projects? (y/N)]では[N]を選択

5. 開発用でVueを起動してみる。

標準出力に書いてあるとおりに下記を実行します。

$ cd vue-sample
$ npm run serve

サーバの起動ができたので、アクセスしてみます。
LocalもNetworkも基本的には変わりませんが、Networkの方であれば、スマホからでもアクセス可能です。(PCとスマホで同じネットワークに属している、かつ、セパレータ等の機能がネットワーク機器に設定されていない場合)

App running at:

• Local: http://localhost:8082/
• Network: http://192.168.0.63:8082/

6.本番用でVueを起動してみる

$ npm run build
$ cd dist
$ php -S localhost:8080 # dist直下にあるファイルは、HTTPサーバ経由でアクセスする必要があります。ここではPHPを使いましたが、それ以外でも大丈夫です。

http://localhost:8080にアクセス

Vueの最小構成

プロジェクトを作成した直後はsrc/App.vueはこのようになっていますが、

src/App.vue

<template>
  <div id="app">

    <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>

下記のように書き換え、さらに[src/assets/logo.png]と[src/components/HelloWorld.vue]を削除すれば、Vue.jsの最小構成となります。

src/App.vue

<template>
  <div>
    最小構成だよ
  </div>
</template>

<script>
export default {
}
</script>

<style>
</style>

注意点

Vue.jsの公式ガイドを見てみると、CDNによるVue.js環境構築を前提としたコーディングが説明されており、dataを扱う場合は下記のように説明されています。

data: {
  message: 'Hello Vue!'
}

しかし、単一ファイルコンポーネントとして、dataを使う場合は下記のようにreturnする必要があります。

data: {
  return {
    message: 'Hello Vue!'
  }
}

参考URL

Vue CLI 3
Vue.js
コンポーネントのデータ-必須