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]のみを選択します。
[Manually select features] を選択
[Babel]を選択
[In dedicated config files]を選択
[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を使いましたが、それ以外でも大丈夫です。
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の最小構成となります。
<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!'
}
}