本記事は vue-cliで始めるVue.jsチュートリアル (1) - Qiita を移植したものです。

かなり古い内容ですが更新ができておらず、また2020年になってもvue-cli2.x系の記事にLGTMがついてしまうのは不味いのではないかと思い、Qiita側では文章を削除しております。

以下記事は上記を踏まえて参考にしていただければと思います。

以下転機

Vue.js チュートリアル

最近Vue.jsが楽しいです。そこそこ構文にも慣れてきたので、自身の理解度チェックも兼ねてTodo管理アプリを作成するチュートリアルを作成してみました。間違っている箇所あればご指摘頂ければ幸いです。

※2018.9.10 追記

本記事執筆時は、vue-cli のバージョンはｖ2.x.x 系でしたが、現在では v3.0.0 がリリースされていることにご注意ください。

https://github.com/vuejs/vue-cli/releases

テンプレートからプロジェクトを作成するときの対話形式が大きく異なっております。また、そのほかにも変更点があるかもしれません。折を見てアップデートする予定ですが、それまではv3.x.x系には未対応ということでお願いします。大筋は変わらないはず。。

チュートリアルのゴール

vue-cliをつかってプロジェクトを作成する
Vue.jsでTodo管理アプリケーションを作成する
作成したアプリケーションをvue-loader、webpackでビルド／バンドルして、GitHub-pagesで配信してみる

できたらやりたいこと

コンポーネントに分割（親コンポーネント・子コンポーネント間でのデータのやり取り）
Vuexの導入

詰んだ時

公式サイト: https://jp.vuejs.org/index.html

日本語の公式ドキュメントが充実しているのは私達がVue.jsを使う上での利点の一つです。困った時は公式ドキュメントを読んでみるとよいです。

作るもの

以下のようなTodo管理アプリケーションを作ってみます。

GitHub-pages: https://sin-tanaka.GitHub.io/vuejs_tutorial_todo_management/
リポジトリ: https://GitHub.com/sin-tanaka/vuejs_tutorial_todo_management/

環境

$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.11.6
BuildVersion:   15G1611

$ node -v
v6.11.3

$ npm -v
3.10.10

vue-cliを使うためにはnodeとnpmが必要です。エディターはIntelliJ系のIDEであれば、Vue.js用のプラグインがあるのでオススメです。筆者はPycharmです。

プロジェクトの作成

まずはvue-cliをinstallします。 vue-cliは雛形からプロジェクトを作成してくれる公式ツールです。公式には、「nodeやnpm、webpackに詳しくないならあまり使わないほうがいいよ」と書いてあるのですがとても便利なので使います。

$ npm install -g vue-cli

$ vue --version
2.8.2

vue init <template> <project-name> でプロジェクトを作成します。ここではwebpackというテンプレートを使い、tutorial_vuejs_todo_managementというプロジェクトを作成しています。

※2018.5.7 追記

以下のPRの変更によって、生成されるプロジェクトと、記事記載の内容とで差分があるのでご留意下さい（Hello.vue→HellowWorld.vueへのコンポーネントファイル名変更など）基本的には最新のテンプレートを正とすることで問題ありません。

参考PR Apply few style guide rules #944 https://github.com/vuejs-templates/webpack/pull/944

公式スタイルガイド: https://jp.vuejs.org/v2/style-guide/index.html

この時いくつか質問されます。私はLinterと単体テストとe2eテストのツールは外していますが、全てYesでも良いです。公式ではESLintを使うことが推奨されています。しかし、jsコーディング規約に慣れていない人には結構つらいです。これを機会に慣れるのも有りだと思います。 Linterを使う人は、通常のLinterか、airbnbのLinterを選べますのでお好きな方を選びましょう。ここでは初学者向けのチュートリアルということでLinterは外しています。

$ vue init webpack tutorial_vuejs_todo_management                                       

? Project name tutorial_vuejs_todo_management
? Project description A Vue.js project
? Author Shintaro Tanaka
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

   vue-cli · Generated "tutorial_vuejs_todo_management".

   To get started:

     cd tutorial_vuejs_todo_management
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.GitHub.io/webpack

ローカルサーバでホストする

vue init を実行したディレクトリにプロジェクトが作成されたので、get started の通りにコマンドを実行してみます。

$ cd tutorial_vuejs_todo_management
$ npm install  # 少し時間かかる
$ npm run dev

上手く行けばlocalhost:8080 でブラウザが開いて以下の画面が表示されるはずです。

初期画面

のちにGitHub-pagesを利用するため、GitHubを使います。この段階でGitHubリポジトリの作成、git init、pushまでしてしまうと楽だと思います。

ファイルの構成

作成したプロジェクトのファイル構成を確認してみます。

主にかかわるファイルは以下になります。他はほとんど設定ファイルです。筆者も設定ファイルについてはあまりよく分かっていないのですが、それでも動くものが作れてしまうのがvue-cliを使う大きなメリットだと思います。

# 一部省略
tutorial_vuejs_todo_management$ tree
./index.html
./src
├── App.vue
├── assets
│   └── logo.png
├── components
│   └── Hello.vue
├── main.js
└── router
    └── index.js

一つずつザックリみて、全体の流れを把握してみます。

index.html


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>tutorial_vuejs_todo_management</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

これがルートのファイルっぽいですね。 cssもjsも読み込んでいませんが、最終的にはWebpackなどで一つのscriptファイルにバンドルされます。

<div id="app"></div> を覚えておいて下さい。

src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

ここではVueインスタンスを作成して、Appコンポーネントをindex.htmlのid=appの要素に紐付けています。また、importでApp、routerというモジュールを読み込んでいるようです。

src/App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</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-loaderというモジュールでブラウザで読み込める形へコンパイルされます。ここではAppコンポーネントを定義しています。 Helloコンポーネントの説明のときに詳しく説明しますので、ここではザックリ中身を見てみます。

vue-cliで始めるVue.jsチュートリアル (1)