【VueJS+yarn】Vue CLIを使ってvueプロジェクトの作成をする


普段はAngularなのですが、最近はVueがはやりなのでとりあえずインストールまでやってみました。

## 環境
|Package|バージョン|
|---|---|
|yarn|v1.15.2|
|node.js|v12.3.1|
|Vue CLI|3.8.2|



## vue-cliのインストール

```bash:yarn
$ yarn global add @vue/cli
yarn global v1.15.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
warning Your current version of Yarn is out of date. The latest version is "1.16.0", while you're on "1.15.2".
info To upgrade, run the following command:
$ brew upgrade yarn
success Installed "@vue/cli@3.8.2" with binaries:
      - vue
✨  Done in 21.92s.

```

## vueプロジェクト作成

- `vue create`でプロジェクト作成

```bash:vue-cli
vue create sample-vue-project
```

- `Manually select features `を選択

```bash:vue-cli
Vue CLI v3.8.2
? Please pick a preset: 
  default (babel, eslint) 
❯ Manually select features 
```

- ここは欲しいものを自由に選択します。今回はPWAは使わないので、それ以外にチェック。
    - JSはTypescriptで書きたい
    - テストもやる
    - 今回はPWAは使わない

```bash:vue-cli
? Check the features needed for your project: 
 ◉ Babel
 ◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◉ Unit Testing
❯◉ E2E Testing
```

- Classシンタックスを使う場合は`Y`を指定

```bash:vue-cli
? Use class-style component syntax? (Y/n) y
```

- TypeScriptとBabelを併用する場合は`Y`を指定

```bash:vue-cli
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? (Y/n) y
```

- routerに履歴モードを使用する場合は`Y`を指定

```bash:vue-cli
? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n) y
```

- CSSの種類を指定する

```bash:vue-cli
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): 
  Sass/SCSS (with dart-sass) 
❯ Sass/SCSS (with node-sass) 
  Less 
  Stylus 
```

- TypeScriptを使うのでTSLintを指定する

```bash:vue-cli
? Pick a linter / formatter config: (Use arrow keys)
❯ TSLint 
  ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier 
```

- Lintを実行するタイミングを指定する

```bash:vue-cli
Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit
```

- Unitテスト用のPackageを選択
    - 今回はMochaとChaiを指定

```bash:vue-cli
? Pick a unit testing solution: 
❯ Mocha + Chai 
  Jest 
```

- E2Eテスト用のPackageを選択
    - 今回はchrome用のCypressを指定

```bash:vue-cli
? Pick a E2E testing solution: 
❯ Cypress (Chrome only) 
  Nightwatch (Selenium-based) 
```

- Babel、PostCSS、ESLintなどの設定をどこに書くかを指定。
    - 今回は`package.json`に残します。

```bash:vue-cli
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? 
  In dedicated config files 
❯ In package.json 
```

- ここまでの設定を残す場合は`Y`を指定して、設定に名前を付けます。

```bash:vue-cli
? Save this as a preset for future projects? Yes
? Save preset as: sample_project
```

- package managerはYarnを選択

```bash:vue-cli
? Pick the package manager to use when installing dependencies: (Use arrow keys)

❯ Use Yarn 
  Use NPM 
```

- 選択が終わるとプロジェクトが作成される。

```bash:vue-cli
Vue CLI v3.8.2
✨  Creating project in /Users/******/vscode/sample-vue-project.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

yarn install v1.15.2
info No lockfile found.
[1/4] 🔍  Resolving packages...



success Saved lockfile.
✨  Done in 59.59s.
🚀  Invoking generators...
📦  Installing additional dependencies...
[-/5] ⠁ waiting...
yarn install v1.15.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 19.53s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project sample-vue-project.
👉  Get started with the following commands:

 $ cd sample-vue-project
 $ yarn serve
```

## テスト実行

- プロジェクト内で`yarn serve`を実行

```bash:vue-cli
$ yarn serve
yarn run v1.15.2
$ 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 2404ms                                                                                                                                                                                                                           15:04:13

Type checking and linting in progress...

  App running at:
  - Local:   http://localhost:8081/ 
  - Network: http://192.168.1.22:8081/

  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.5.1, tslint 5.17.0
Time: 2896ms
```

- `http://localhost:8081/`にアクセスして以下の画面が出たら完了

<img width="1297" alt="スクリーンショット 2019-06-03 15.03.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33165/d63618c5-42e6-0916-2263-1144d55fdfa3.png">

### 最終的なPackage.json
```json:package.json
{
  "name": "sample-vue-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.1.0",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@types/chai": "^4.1.0",
    "@types/mocha": "^5.2.4",
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-plugin-e2e-cypress": "^3.8.0",
    "@vue/cli-plugin-typescript": "^3.8.0",
    "@vue/cli-plugin-unit-mocha": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "chai": "^4.1.2",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "typescript": "^3.4.3",
    "vue-template-compiler": "^2.6.10"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}
```