現場のフロント開発でVue.jsを利用する機会があったので、
Vue CLIのインストールから、プロジェクトの作成までやってみた。

環境

yarn
→ v1.22.5
node.js
→ v12.13.1
Vue CLI
→ v4.5.11

yarn, node.jsのインストール

まず、vueのプロジェクトを作成する下準備として、
yarnとnode.jsのインストールを始めよう。
インストールする順番は、最初にnode.js。
下の各ダウンロードページからインストーラを落としてきて、
実行する。

node.js
yarn

yarnはインストーラを利用しなくても、node.jsをインストールした後に、
コマンドプロンプトで、↓ コマンドを実行すれば、インストールできる。

$ npm install --global yarn

両方、インストールが終わったタイミングで、
正常に落としてこれたか、コマンドプロンプトにて
以下コマンドを実行して確認しよう。

$ node -v

$ yarn -v

実行して、バージョンが表記されていればインストールは成功。
もし、バージョンが出なかった場合は yarn や node.js が
正しくインストールされていないので、他の記事などを見て、
もう一度インストールしよう。
※もしかすると、正常インストール出来ていても、コマンドプロンプトを再起動しないと、
バージョンが出てこないだけのパターンもあるので、
とりあえず最初にコマンドプロンプトを再起動するのがおすすめ。

vue-cliのインストール

では下準備が整ったので、vueのプロジェクトを作るために、
vue-cliのインストールを始めよう。

コマンドプロンプトを開いて、任意のパスにて、以下コマンドを実行する。

$ yarn global add @vue/cli

プロジェクト作成

このインストールが完了したら、今度はプロジェクトを作りたいパスに移動して、
vue create の後に、作りたいプロジェクト名を入力したコマンドを実行して、
実際にプロジェクトを作ってみる。

↓ みたいな感じで。

C:\vue\vue-sample-project>vue create project-01

今回は project-01 という名前で作ってみる。

コマンドを実行すると、プロジェクトの設定をすることになるので、
各々好きな設定をする。

今回は、TypeScriptを使ってみたいので、
筆者は以下のように設定していった。

Vue CLI v4.5.11
? Please pick a preset:
  sample-project-01 ([Vue 2] node-sass, babel, typescript, router, vuex, unit-mocha, e2e-cypress)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features

Manually select features を選択。

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel
 (*) TypeScript
 (*) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 (*) Unit Testing
 (*) E2E Testing

次はとりあえず全部選択しておく。(スペースで選択のオンオフができる)

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x (Preview)

ここは2を選んでおく。

? Use class-style component syntax? (Y/n) y

y と入力。

それ以降の設定は以下の通り。

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Pick an E2E testing solution: Cypress
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? Yes
? Save preset as: sample-project-01
? Pick the package manager to use when installing dependencies: Yarn

ここまでくれば、あとは上記設定をプリセットできるように、
設定内容を保存するかどうか聞かれるので、デフォルトの設定として保存しておきたい人は
保存しておくこと。

そのあと、最初に入力した名前のプロジェクトが
指定したパス以下に作られるが、一緒にnode_moduleも入れてくれるはずなので、
作られたプロジェクト内で、改めて yarn installする必要はない。
※もしされていなければ、 yarn installを実行して入れればよい。

以下のように、作られたプロジェクトのパスにて、
yarn serveを実行。

C:\vue\vue-sample\sample-vue-project>yarn serve
yarn run v1.22.5
$ vue-cli-service serve
 INFO  Starting development server...
Starting type checking and linting service...
Using 1 worker with 2048MB memory limit
98% after emitting CopyPlugin

 DONE  Compiled successfully in 4259ms                                                                                                               19:45:45

Type checking and linting in progress...

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://172.16.13.185:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

No type errors found
No lint errors found
Version: typescript 3.9.7, tslint 5.20.1
Time: 8526ms

実行が終わったら ↓ の部分に書いてある、
URL: http://localhost:8080/ に、任意のブラウザでアクセスしてみる。

App running at:
  - Local:   http://localhost:8080/

↓ のようなサンプル画面が表示出来たら、成功！

以上。