Syntax Error.

[Sy] vue-cli を使って Vue.js のプロジェクトを作成する(webpack テンプレート使用)


vue-cliwebpack のテンプレートを使用して、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 <>)

次にコンパイラが必要かどうか聞かれます。 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


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/

 95% emitting

 DONE  Compiled successfully in 3136ms                                                                        19:45:29

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

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