yarnを使ってvue.js+TypeScriptのプロジェクトを作ってみよう

現場のフロント開発で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](https://nodejs.org/ja/download/)
* [yarn](https://classic.yarnpkg.com/en/docs/install#windows-stable)


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

```cmd
$ npm install --global yarn
```

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

```cmd
$ node -v
```

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

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

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

```cmd
$ yarn global add @vue/cli
```

## プロジェクト作成


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

↓ みたいな感じで。

```cmd
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/
```

↓ のようなサンプル画面が表示出来たら、成功！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479995/67011384-4a6c-548a-89d5-36a01730712d.png)


以上。