Vueの始め方

最近Qiitaを中心にVueが流行ってますね。

まだまだ業務ではAngularやReactの方が多いみたいですが、今後はVueのお仕事も増えてくるかもしれません。

そんなわけで私もVueについて学んでみました。

Vueを学んでみるとわかりますが、Vueの始め方にはCDNやvue-cliなど複数の方法があってどれをやったらいいのか始めはなかなかわかりません。

簡単にVueを使ってみたいというのであればCDNを使うのがおススメですが、しっかりと学んで使いこなせるようになりたいという方にはvue-cliを使った方法をおススメします。

この記事では、初めてVueに触れる方に向けたvue-cliを使ったVueの始め方について解説を行います。

Vueでプロジェクトを作るための準備
- npmを使えるようにする
- vueを使えるようにする
Vueでプロジェクトを作る
プロジェクトをビルドする
終わりに

Vueでプロジェクトを作るための準備

vue-cliを使ってVueプロジェクトを作成するためには、vue-cliとvue-cliを使えるようにするためのnpmをインストールする必要があります。

npmを使えるようにする

npmを使えるようにするためにはお使いの環境にnodeをインストールする必要があります。

コチラからお使いの環境にあったnodeのインストーラをダウンロードしてきて、適宜インストールを行ってください。

インストール完了後、ターミナル（Windowsならコマンドプロンプト）で以下のコマンドを実施して、npmのバージョンが表示されればOKです。

$ npm -v
6.9.0

1 2	$ npm -v 6.9.0

個人的にはyarnのほうが良いという方はそちらでも構いませんが、以降で説明するコマンドは全て置き換えて実施してください。

vueを使えるようにする

続けて、vueを使えるようにするためにvue-cliをインストールします。

vue-cliをインストールするには、ターミナルで以下のコマンドを実施してください。

$ npm install -g @vue/cli

1	$ npm install -g @vue/cli

インストールが完了するまで少し待ってください。

インストールが完了したら、以下のコマンドを実施して、vue-cliのバージョンが表示されればOKです。

$ vue -V
3.11.0

1 2	$ vue -V 3.11.0

Vueでプロジェクトを作る

さて、ここまででVueを使ったプロジェクトを作るための準備が完了しました。

ここから実際にVueでプロジェクトを作成していきます。

本記事では、簡単だけどVueの機能をいくつか使えるようにボタンを押した時間を記録するアプリを作っていきます。

プロジェクト作成

それでは実際にプロジェクトを作成していきます。

まず、プロジェクト用のフォルダ「myproject」（名前はなんでもいいです）を作成し、ターミナルでそこまで移動します。（ターミナルでのフォルダの移動はcdコマンドで行います）

移動出来たら、プロジェクト作成のための以下のコマンドを実施してください。

$ vue create myproject

1	$ vue create myproject

いくつか質問されますが、ここではプロジェクトが生成されれば良いのでdefaultで作成します。

プロジェクトが作成されるまで少し待ってください。

プロジェクトの作成が完了したら、以下のコマンドを連続で入力してサーバを立ち上げてみましょう。

$ cd myproject
$ npm run serve

1 2	$ cd myproject $ npm run serve

サーバが立ち上がったらブラウザでlocalhost:8080にアクセスして、以下のように表示されていればプロジェクトの作成は成功です。

この状態で、ソースファイルを変更して保存すると自動的にブラウザに反映されるので、ターミナルはそのままの状態にしておきます。

自動生成されたファイルの構成

プロジェクトを作成するとルートフォルダ直下にだいたい以下のような構成でファイルが自動生成されます。

node_modules
public
src
- assets
- components
- App.vue
- main.js
babel.config.js
package-lock.json
package.json
README.md

この中で重要なのはsrcフォルダ直下で、ソースをいじるのもこのフォルダの中だけです。

今回のようなルーティングを行わないようなアプリの場合は、App.vueにコンポーネントを配置して、componentsフォルダにコンポーネントの実体を定義します。

また、画像を使う場合にはassetsフォルダに画像を配置して、そこから読み込んで使用します。

不要な記述と不要なファイルを削除

プロジェクト生成直後は、App.vueにはロゴとHelloWorldというコンポーネントが配置されているので、まずはそれらを消します。

<template>
  <div id="app">
  </div>
</template>

<script>
export default {
  name: 'app',
  components: {
  }
}
</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>

</div>

</template>

export default {

components: {

}

</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からHelloWorldコンポーネントに関する記述を消したら、もうHelloWorldコンポーネントは不要となるので、components/HelloWorld.vueも消してしまいましょう。

コンポーネントを作る

それではここからは実際にコードを書いていきます。

直接App.vueに処理を全部書いてもいいですが、せっかくなので処理を記載した子コンポーネントを作成してみます。

componentsフォルダ直下にmyComponent.vueファイルを作り、以下のように記述してください。

<template>
  <div class="mycomponent">
    <button>Push Me!!</button>
  </div>
</template>

<script>
export default {
  name: 'mycomponent',
}
</script>

<style scoped>
</style>

</div>

</template>

export default {

}

</script>

</style>

ボタンを配置しただけのコンポーネントができたので、一旦これをApp.vueに配置してみます。

<template>
  <div id="app">
    <myComponent />
  </div>
</template>
<script>
import myComponent from './components/myComponent.vue'

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

</div>

</template>

import myComponent from './components/myComponent.vue'

export default {

components: {

myComponent

}

</script>

〜〜

この状態で保存してブラウザで表示を確認してみましょう。

上記のように、ブラウザ上に「Push Me!!」ボタンが表示されていればコンポーネントの作成に成功しています。

Vueのやり方で処理を書く

コンポーネントの作成に成功したので、実際に中身の処理を書いていきます。

まず、ボタンを押した後に時間を表示する処理を記載します。

ここでは簡単に、dataに配列を持たせて、v-forでその中身を表示するようにしてみます。

<template>
  <div class="mycomponent">
    <button>Push Me!!</button>
    <div class="element" v-for="'e, index) in list" :key="index">
      {{e}}
    </div>
  </div>
</template>
<script>
export default {
  name: 'mycomponent',
  data: function () {
    return {
      list: ["11:22:33", "44:55:66"]
    }
  },
}
</script>

<style scoped>
.element {
  margin: 5px;
  padding: 10px;
  border: solid 2px black;
}
</style>

</div>

</template>

export default {

data: function () {

return {

list: ["11:22:33", "44:55:66"]

}

</script>

.element {

margin: 5px;

padding: 10px;

border: solid 2px black;

}

</style>

ここでは配列の中身はダミーデータを挿入していますが、後述するクリック処理の中で実際にクリックされたタイミングの時間を格納していきます。

保存してブラウザで確認してみましょう。

ボタンの下にダミーデータが表示されるボックスが2つ表示されていればOKです。

v-forでは紐づいたデータが更新されれば自動的に反映されるので、時間を表示する領域はこれで完成です。

続いて、ボタンを押下した際の処理を作ります。

<template>
  <div class="mycomponent">
    <button @click="click">Push Me!!</button>
    〜〜
  </div>
</template>

<script>
export default {
  name: 'mycomponent',
  data: function() {
    return {
      list: []
    }
},
  methods: {
    click: function () {
      let date = new Date()
      this.list.unshift(
        date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() + ' ' + 
        date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
      )
    }
  },
}
</script>
〜〜