Web系エンジニアのアウトプット練習場

エンジニアリングと書評が中心。たまに全然関係無い話もします。
トップページ/Vue.js/Nuxt.js + TypeScript(+ tslint)プロジェクトの作成手順/
2018年09月08日

Nuxt.js + TypeScript(+ tslint)プロジェクトの作成手順

Vue.jsTypeScriptNuxt.js

Vue CLI 3のインストールメモ - フルスタックエンジニア目指して」でVue CLI 3をインストールした前提でのお話です。
Nuxt.jsのコミュニティがTypeScript用のプロジェクトテンプレートを用意してくれているので、それを使用します。
https://github.com/nuxt-community/typescript-template
README通りに進めると以下のように「@vue/cli-initをインストールしろ」というエラーが出ました。

$ vue init nuxt-community/typescript-template <project-name>

  Command vue init requires a global addon to be installed.
  Please run yarn global add @vue/cli-init and try again.

言われた通り、@vue/cli-initを追加します。

$ yarn global add @vue/cli-init

再実行します。 プロジェクト名やプロジェクトの概要、作者などが問われますので入力します。

$ vue init nuxt-community/typescript-template <project-name>
$ cd <project-name>
$ yarn install

サーバーの起動。

$ yarn run dev

ブラウザでhttp://localhost:3000を開くと、謎のキャラ一覧画面が出てきましたw
謎のキャラ一覧画面

tslintの導入

loaderのインストール

$ yarn add tslint tslint-loader

tslintの設定ファイルtslint.jsonを生成

$ ./node_modules/.bin/tslint --init

nuxt.config.jsの編集

ビルド時にtslintを実行するようにします。

module.exports = {
  .
  .
  .
  build: {
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          test: /\.ts$/,
          enforce: 'pre',
          loader: 'tslint-loader',
          options: {
            configFile: 'tslint.json',
            tsConfigFile: 'tsconfig.json',
          },
        })
      }
    },
  },
  .
  .
  .

tslint.jsonへのルール追加

お好みでtslint.jsonにルールを追加できます。

-    "rules": {},
+    "rules": {
+        "semicolon": [true, "never"],
+        "trailing-comma": [true, "never"],
+        "space-before-function-paren": [true, "always"]
+    },

これでとりあえずNuxt.jsプロジェクトの作成が完了です。
お疲れ様でした。