vue js项目中引入ts混用

Posted by 洛城风起 on 2021年4月10日 2021年4月10日 Vue

一、安装typescript及loader

npm install typescript ts-loader –save-dev

二、安装vue-property-decorator

npm install vue-property-decorator –save-dev

三、配置vue.config.js

module.exports = {
configureWebpack: {
resolve: {
extensions: [“.ts”, “.tsx”, “.js”, “.json”]
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: ‘ts-loader’,
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
}
]
}
}
}

四、新建tsconfig.json放在项目根目录

{
    "compilerOptions": {
        "target": "es5", 
        "module": "commonjs", 
        "strict": true, 
        "strictNullChecks": true, 
        "esModuleInterop": true, 
        "experimentalDecorators": true
    }
}

五、在src目录下新建vue-shim.d.ts文件

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

本文链接地址: vue js项目中引入ts混用

发表回复取消回复