【環境構築】Vue.js で SPA をはじめる方法

tags: `node` `Vue` `Bable` `Webpack`

【Vue.js で SPA をはじめる方法】目次

このドキュメントが対応しているバージョン

Vue CLI: V3.5.5

対象

Vue でシングルページアプリケーション(SPA)を作りたい方

node のインストール

node.js をインストールします。

nodejs.org

Vue CLI のインストール

Vue CLI は Vue.js の開発を簡単に進めるためのツールです。

Vue CLI の詳細はこちらです。

cli.vuejs.org

Vue CLI をインストールします。

npm install -g @vue/cli

Vueのプロジェクトを作成

Vue CLI を使って、Vueのプロジェクトを作成していきます。

今回はプロジェクト名を vue-boilerplate とします。

vue create vue-boilerplate

Vue CLI v3.5.5
? Please pick a preset:
   default (babel, eslint)
 > Manually select features

何を入れるかは選びたいので、「Manually select features」を選択します。

Vue CLI v3.5.5
? Please pick a preset: Manually select features
? 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

Babel, Router, Vuex, Linter を選択します。

Vue CLI v3.5.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Use history mode for router? (Requires proper server setup for index 
fallback in production) (Y/n) n

routerは、hashモードで使います。

historyモードの詳細はこちらです。

router.vuejs.org

Vue CLI v3.5.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Use history mode for router? (Requires proper server setup for index 
fallback in production) No
? Pick a linter / formatter config:
   ESLint with error prevention only
 > ESLint + Airbnb config
   ESLint + Standard config
   ESLint + Prettier

Lintは ESLint + Airbnb config にします。

Vue CLI v3.5.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Use history mode for router? (Requires proper server setup for index 
fallback in production) No
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: (Press <space> to select, <a> to toggle 
all, <i> to invert selection)
 >(*) Lint on save
  ( ) Lint and fix on commit

Lintの実行は保存するときにします。

Vue CLI v3.5.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Use history mode for router? (Requires proper server setup for index 
fallback in production) No
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: (Press <space> to select, <a> to toggle 
all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? 
(Use arrow keys)
 > In dedicated config files
   In package.json

config はそれぞれ専用のものにします。

Vue CLI v3.5.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Use history mode for router? (Requires proper server setup for index 
fallback in production) No
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: (Press <space> to select, <a> to toggle 
all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? 
In dedicated config files
? Save this as a preset for future projects? (y/N) n

しばらく待っていると、プロジェクトが作られます。

起動

起動のためのコマンドは、npmのスクリプトに追加されています。

_{プロジェクトに作られている Readme.md に詳細が載っています。}

npm run serve

起動すると、URLが表示されます。

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://${IPアドレス}:8080/

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

ブラウザで開けば Vue で作られたページがもう見れるようになっています。

f:id:herrscherinnen:20190407181724p:plain:w320