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: /\.ts?$/,
loader: "ts-loader",
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
{
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 */
新環境構築
記載時の最新です。お好みでどうぞ。
