vue.js環境をvue-cliで簡単に構築してみた

結構前に出ていますが、今更ながら触ってみてとても楽にvue.jsの環境構築ができたのでまとめます。

vue-cliとは

コマンドを叩き、質問にいくつか応えると、その質問に応じたVue.jsの開発環境ができるというものです。

導入手順

グローバルインストールします。

npm install -g vue-cli

これで使えるようになりました。

使い方

一から環境を構築する場合はvue-initコマンドを使います。

vue initでも動きます、どちらでも良いです。

vue-init <template-name> [project-name]

project-nameに入れた名前でディレクトリを作ってその中に構築してくれます。省略すると質問されるので、カレントディレクトリに作ることもできます。

template-nameでwebpackなどのベースになるライブラリを選ぶことができます。

どれが使えるかはvue-listコマンドで見ることができます。

$ vue-list

  Available official templates:

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

今回はwebpackを使い、vue-init-testというディレクトリに作ろうとしたので以下のコマンドになりました。

vue-init webpack vue-init-test

その後いくつか聞かれるので答えていきます。

• Project name
  • プロジェクトの名前
• Project description
  • プロジェクトの説明文
• Author
  • 作者
• Vue build
  • ビルドの種類
  • Runtime + Compiler: recommended for most usersを選べば問題なさそう
• Install vue-router?
  • vue-routerを使うかどうか
• Use ESLint to lint your code?
  • ESLintを使うかどうか
  • 使う場合ルールの雛形を選ぶ
    • standart
    • Airbnb
• Set up unit tests
  • 単体テストを行うかどうか(行う場合はライブラリを選ぶ)
    • Jest
    • Karma and Mocha
    • none (configure it yourself→自前)
• Setup e2e tests with Nightwatch?
  • e2eテストを行うか
  • ライブラリはNightwatch固定
  • Nightwatch.js | Node.js powered End-to-End testing framework
• Should we run npm install for you after the project has been created? (recommended)
  • プロジェクト作成後npm installを叩くかどうか
    • npmで叩く
    • yarnで叩く
    • 自分で叩く

質問に答え終わると、しばらくDLなど色々走ります。

できました。

$ tree -L 1
.
├── README.md
├── build
├── config
├── index.html
├── node_modules
├── package.json
├── src
├── static
├── test
└── yarn.lock

あとは

$ yarn run dev

と叩いて、http://localhost:8080/にアクセスすれば

サンプルのページがでてきました。

これを元にいじって開発を進められる状態になりました。

所要時間数分、webpack.config.jsをチマチマいじくってた手間を思うと便利になったなあと…（遠い目）

typescriptの導入は別途設定を変えて行わなければならないのですが、それはまた別の機会に紹介しようかと思います。

では今回はこのへんで。