【Vue CLI 3】Typescriptを使ったVue.jsプロジェクト開発 環境準備編
今回から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です。
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/ にサクセスすれば以下のような画面が表示されます
これで開発の準備ができました。
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>
画面を確認すると以下のようになっています。
今回はここまでです。
次回は本格的な実装を順を追って説明したいと思います。
以下のページから続きをご覧になれます。
www.sky-limit-future.com
