Chapter 07

フロントエンド(Vue3) - 準備編

is_ryo
is_ryo
2020.10.21に更新

事前準備

Vueプロジェクトを構築するためにVueCLIをインストールします

$ npm i -g @vue/cli

$ vue -V
@vue/cli 4.5.8

プロジェクト作成

先ほどインストールしたVueCLIを使ってプロジェクトを作成していきます

$ vue create front-app
? Please pick a preset: Manually select features
// オプションを選択。お好みで。Choose Vue version/TypeScript/Routerは必ずチェックしてください。
? 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
 // どのバージョンのVueを使うか。3.xを選択。
 ? Choose a version of Vue.js that you want to start the project with 
  2.x 
❯ 3.x (Preview)
 // ClassStyleで書くか。Nと入力。
 ? Use class-style component syntax? (y/N) N
 // Babelを使用するか。特に気にしなければYと入力。
 ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) Y
 // RouterをHistoryModeで使うか。Yと入力。
 ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y
 // CSS pre-processorはどうするか。Sass/SCSS (with node-sass)を選択。
 ? 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 
  // Linterはどうするか。お好みで。
  ? Pick a linter / formatter config: 
  ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
❯ ESLint + Prettier 
  TSLint (deprecated) 
  // Lintを実行するタイミング。お好みで。
  ? 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テストツールの選択。お好みで。
 ? Pick a unit testing solution: 
  Mocha + Chai 
❯ Jest
 // E2Eテストツールの選択。お好みで。
 ? Pick an E2E testing solution: (Use arrow keys)
❯ Cypress (Chrome only) 
  Nightwatch (WebDriver-based) 
  WebdriverIO (WebDriver/DevTools based)
  // 各種設定ファイルをそれぞれ用意するか。package.jsonにまとめるか。お好みで。
  ? Where do you prefer placing config for Babel, ESLint, etc.? 
❯ In dedicated config files 
  In package.json
  ...

インストールが終わったらプロジェクトに移動してソースを確認してみてください

$ cd front-app

各種パッケージのアップデート

VueCLIでインストールしてくるパッケージのバージョンが古いものがあるので、アップデートします。
まずpackage.jsonに書かれている各パッケージのバージョン情報を書き換えてくれる npm-check-updates をインストールします。その後コマンドでバージョン情報を書き換え、node_modulesを最新にします。

$ npm i -g npm-check-updates
$ nuc -u
$ rm -rf node_modules
$ rm package-lock.json
$ npm i

注意点

VSCodeを使っていてVeturをインストールしている場合に src/App.vue でESLintのエラーが起きていますが、Vetur側が最新のESLintのルールに対応できていないようなので無視しても大丈夫です。
気になる場合は下記のように修正してください。

App.vue
<template>
  <div>
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view />
  </div>
</template>

ローカル環境を立ち上げる

下記コマンドを実行してブラウザで http://localhost:8080 を開いてみてください。

$ npm run serve

このようなページが表示されればOKです。

これで準備は完了です。