Syntax Error.

vue-cli で webpack のテンプレートを使用して、Vue.js のプロジェクトを作成します。

1. vue-cli をインストール

今回は yarn を使ってグローバルにインストールします。

$ yarn global add vue-cli
・
・
success Installed "vue-cli@2.9.3" with binaries:
      - vue
      - vue-init
      - vue-list
✨  Done in 4.11s.

2. プロジェクトを作成

以下のコマンドで webpack のテンプレートを使ったプロジェクトを作成します。

$ vue init webpack hello-vue-cli-webpack

以降、いくつか質問されます。

まず、プロジェクト名、概要、作成者について質問されるので、デフォルトのまま Enter を3回押します。

? Project name (hello-vue-cli-webpack)
? Project description (A Vue.js project)
? Author (Mitsuo Utano <xxxxxx@xxxxxx.xxx>)

次にコンパイラが必要かどうか聞かれます。 Runtime + Compiler を選択して Enter を押します。

? Vue build (Use arrow keys)
❯ Runtime + Compiler: recommended for most users
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files -
render functions are required elsewhere

いくつかモジュール等が必要かどうか聞かれるので、とりあえず今回はすべて n （＝必要ない）と入力して Enter を押していきます。

? Install vue-router? (Y/n)
? Use ESLint to lint your code? (Y/n)
? Set up unit tests (Y/n)
? Setup e2e tests with Nightwatch? (Y/n)

最後の質問です。ここでは必要なモジュールを npm と yarn のどちらでインストールするか（もしくはここではしないで、あとで自分でやるか）を選択します。

今回は yarn （Yes, use Yarn） を選択して Enter を押します。

? Should we run `npm install` for you after the project has been created? (recommended)
  Yes, use NPM
❯ Yes, use Yarn
  No, I will handle that myself

すると、以下のようにプロジェクトの作成が始まります。

   vue-cli · Generated "hello-vue-cli-webpack".


# Installing project dependencies ...
# ========================

yarn install v1.5.1
info No lockfile found.
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
[5/5] 📃  Building fresh packages...
success Saved lockfile.
✨  Done in 10.40s.

# Project initialization finished!
# ========================

To get started:

  cd hello-vue-cli-webpack
  npm run dev

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

これでプロジェクトができました。

3. 動作確認

そのままの状態でページを表示することができるので、早速動かしてみます。

作成された hello-vue-cli-webpack （プロジェクト名） ディレクトリに移動して、 npm run dev とコマンドを実行します。

$ cd hello-vue-cli-webpack

$ npm run dev

> hello-vue-cli-webpack@1.0.0 dev /Users/utano320/Documents/Develop/hello-vue-cli-webpack
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting

 DONE  Compiled successfully in 3136ms                                                                        19:45:29

 I  Your application is running here: http://localhost:8080

すると、 http://localhost:8080 というアドレスで次のようなページを確認することができるはずです。