The sky is the limit

Vue.js、PHP、Java、Cordova、Monacaを中心にハイブリッドアプリ開発、PWA開発など効率的なWEB、iOS、Androidアプリ開発の情報を共有します。

【Vue CLI 3】Typescriptを使ったVue.jsプロジェクト開発 環境準備編

【Vue CLI 3】Typescriptを使ったVue.jsプロジェクト開発 環境準備編

f:id:duo-taro100:20160218004611p:plain

今回からTypescriptを使ったVue.jsプロジェクト開発について解説していきます。
サンプルとして保育園比較サイトを作ってみます。サンプルなので小規模なものになります。

サーバー側はPHPで実装しますが、ここでは触れません。

旧VueCLIのアンインストール

VueCLI3よりも前のバージョンを使っており、グローバルにインストールされていている方はアンインストールする必要があります。
パッケージ名が旧バージョンから変更されているみたいですね。

https://github.com/vuejs/vue-cli/tree/v2#vue-cli--

VueCLIを初めて使う方は飛ばして、VueCLI3の導入からご覧下さい。

アンインストール

$ npm uninstall vue-cli -g

これで完了です。

VueCLI3の導入

VueCLI3を導入します。
https://cli.vuejs.org/guide/installation.html
上記ページも書かれていますが、導入にはNode.js8.9以上が必要です。

Node Version Requirement
Vue CLI requires Node.js version 8.9 or above (8.11.0+ recommended).
You can manage multiple versions of Node on the same machine with nvm or nvm-windows.

Node.jsのインストール

Node.jsのインストールがまだの方は以下のページからNode.jsをインストールして下さい。
(最新版ではなく、推奨版を使うようにしましょう。)
https://nodejs.org/ja/

正しくインストールできたか確認しましょう。

$ node --version
v10.16.3

上記のように、バージョンが表示されればOKです。


Node.jsをインストールすると同時にnpmもインストールされるので、こちらも念のため確認しておきましょう。

$ npm --version
5.6.0

同様にバージョンが表示されればOKです。

f:id:duo-taro100:20160220005654p:plain

Vue CLI3のインストール

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

$ npm install -g @vue/cli

こちらも正しくインストールしたか確認しましょう。

$ vue --version
3.11.0

バージョンが表示されたでしょうか。されない場合はインストール時にエラーが発生している可能性があるので注意しましょう。

プロジェクトの作成

続いてプロジェクトを作成します。
今回はアプリ名を「hoiku」として進めます。

プロジェクト作成コマンド

プロジェクトの作成方法は以下の通りです。

$ vue create hoiku

すると、プロジェクトの設定を自動で行うか、マニュアルにするか聞かれます。

プロジェクトの設定

Vue CLI v3.11.0
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
Manually select features

デフォルト設定でもいいですが、今回はマニュアル設定を選びます。

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

TypeScript、Router、Vuexを導入するのでそれぞれに矢印キーでカーソルを合わせ、スペースキーで選択します。
選択後に以下のようになっているはずです。

? 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

使いたいものの選択が終わったらEnterキーで終了します。
続いて、Componentをclass形式で書くかどうか聞かれます。
お好みですが、私は使うので「Y」と入力してEnter。

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

ちなみに、class形式の書き方は以下のページを参照して下さい。
https://jp.vuejs.org/v2/guide/typescript.html#%E3%82%AF%E3%83%A9%E3%82%B9%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB-Vue-%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88

次の質問は、ポリフィル(最近の機能をサポートしていない古いブラウザーで、その機能を使えるようにするためのコード)に対する設定です。
これは使うのがおすすめです。「Y」と入力してEnter。

? Use Babel alongside TypeScript for auto-detected polyfills? (Y/n)

続いてVue Routerのヒストリーモード使用に関する質問です。こちらも「Y」がおすすめ。

? Use history mode for router? (Requires proper server setup for index fallback in production
) (Y/n)

次にLinter/Formatterの設定です。特にこだわりがなければデフォルトでOKです。

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

「TSLint」を選択してEnter。
続いて、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

両方選ぶこともできるみたいです。
次は、Babel, PostCSS, ESLintなどの設定はどこで行うかという質問です。
選択肢は「個別の設定ファイルで行う」or「package.json」で行うかです。1箇所で管理したいなら後者がおすすめです。
個人的にはこだわりがないのでデフォルトにしました。

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
In package.json

次はここまでで設定した内容を保存するか聞かれます。保存しておけば次回以降Vue CLI3を使用してプロジェクトを作成する際に楽ですね。
ここは「y」がおすすめです。
「y」とするとどこに保存するか聞かれます。好きな場所を指定しましょう。

? Save this as a preset for future projects? (y/N)
Save preset as:

ここでプロジェクト作成が始まります。
しばらくして

Successfully created project hoiku.

となればOKです。(hoikuはアプリ名)


アプリケーションの起動

プロジェクトが作成されたのでアプリを起動しましょう。
上記の手順を踏めば、以下のように表示されているはずなのでこの通り実行しましょう。

$ cd hoiku
$ npm run serve

(hoikuはアプリ名)

あとはhttp://localhost:8080/ にサクセスすれば以下のような画面が表示されます

f:id:duo-taro100:20190913193817p:plain
最初の画面

これで開発の準備ができました。

Hello World!

お約束のHello World!を表示してみて今回は終わりにしましょう。

hoiku/src/views/Home.vue

を開くと以下のようになっています。

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {}
</script>

以下のように、Homeクラスに変更を加えます。

export default class Home extends Vue {
    private message: string = "Hello World!"
}

続いて、template部分を以下のように変更します。

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <h1>{{message}}</h1>
  </div>
</template>

画面を確認すると以下のようになっています。

f:id:duo-taro100:20190913193836p:plain
Hello World!

今回はここまでです。
次回は本格的な実装を順を追って説明したいと思います。
以下のページから続きをご覧になれます。
www.sky-limit-future.com