Vue TypeScript 環境構築編 ~準備が大事!~

前提

プロジェクトが作成してあることが前提。
プロジェクト作成時にes-lintをNoにしてください。

vue init webpack プロジェクト名



実行

必要なものをインストール

npm i -D typescript webpack webpack-cli ts-loader@3.5.0  css-loader vue vue-loader vue-template-compiler



typescriptの設定

tsc --init



tsconfig.jsonの中身

{
    "compilerOptions": {
        "outDir": "./built/",
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5"
    },
    "include": [
        "./src/**/*"
    ]
}



webpack.base.conf.jsのentry,appをmain.tsに変更

module.exports = {
  context: path.resolve(__dirname, "../"),
  entry: {
    app: "./src/main.ts"
  },



webpack.base.conf.jsのresolveの拡張子に".ts"を追加

extensions: ['.js', '.ts', '.vue', '.json'],  



webpack.base.conf.jsのmodule.rulesにts-loaderを追加。

{
        test: /\.js$/,
        loader: "babel-loader",
        include: [
          resolve("src"),
          resolve("test"),
          resolve("node_modules/webpack-dev-server/client")
        ]
      },
{
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
      },



vue-shims.d.tsをsrc配下に追加

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



main.js, router/index.js の拡張子を .ts に変更

.vueの中身App.vueに変更

import App from './App.vue'  



App.vueとHelloWorldのscriptを変更

<script lang="ts"> 



注意

vue webpack の質問時にes-lintの設定をYesにした場合 eslintのエラーが発生する可能性ありです。 私は以下で飛ばしました。 今後もっと調べます。

// eslint-disable-next-line
/* eslint-disable */

新環境構築

記載時の最新です。お好みでどうぞ。

Vue TypeScript 新環境構築編 ~現時点の最新~ - 19歳から学んだ記録