f:id:zenet-tech:20210317110232p:plain

こんにちは！システム事業部の村田です。

の続きです

間違い等ありましたらコメント頂けると幸いです。

使う主なもの

Vue.js
TypeScript
webpack
yarn

また、執筆時の各versionは

Vue.js(2.5.13)
webpack(4.6.0)
yarn(1.6.0)
ts-loader(4.2.0)
vue-loader(14.2.2)
typescript(2.8.3)

です。 (part1よりvarsionが上がってます・・・part1の手順は同じく再現できているのでご了承ください)

TypeScript用のライブラリを追加 yarn add typescript ts-loader

tsconfig.jsonを生成

/node_modules/.bin/tsc --init

vue.js公式の推奨設定にしたがい最低限の設定を行います。

{
  "compilerOptions": {
    /* Basic Options */
    "target": "ES2015",
    "module": "es2015",
    /* Strict Type-Checking Options */
    "strict": true,
    /* Module Resolution Options */
    "moduleResolution": "node",
    "esModuleInterop": true
  }
}

webpack.config.jsをTypeScriptを支えるように更新します。

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  // 拡張子をtsに
  entry: './src/index.ts',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: 'public',
    port: 4000
  },
  resolve: {
    // 拡張子にtsを追加
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  module: {
    // TypeScriptのコンパイラを追加
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader'
      }
    ]
  }
};

これで、最低限.tsのファイルをコンパイルできるようになりました。

このままだと、vue.jsのsfcが使え無いので、そちらも使えるように更に追記します。

yarn add vue-loader vue-template-compiler

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: 'public',
    port: 4000
  },
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  module: {
    rules: [
      // .vueファイルをコンパイルするvue-loaderを指定
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          // .vueファイルをtsとして監視するように追加
          appendTsSuffixTo: [/\.vue$/]
        }
      }
    ]
  }
};

また、.vueファイルの情報を定義したファイルを、.d.ts拡張子で定義します

vue.d.ts

declare module "*.vue" {
    import Vue from 'vue'
    export default Vue
}

現在はまだ、sfcを使ってい無いので、使うように変更します。

index.ts

import Vue from 'vue'
import App from './App.vue'

// App.vueを描画する様に変更する
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

App.vue

<template>
  <div id="app">
    <h1>Hello Vue with ts</h1>
    <Sub/>
  </div>
</template>

<script>
// 出力するサブコンポーネントを定義
import Sub from './pages/Sub.vue'

export default {
    components: {
        Sub
    }
}
</script>

Sub.vue

<template>
  <div>
    <h2>sub commpornent</h2>
  </div>
</template>

この状態で、 yarn start して、localhost:4000にアクセスできれば成功です！

f:id:zenet-tech:20180421183245p:plain

お疲れ様でした！

Zenet Tech Blog

Vue.js + TypeScrptの環境構築(パート２)

使う主なもの