vue js项目中引入ts混用

一、安装typescript及loader

npm install typescript ts-loader –save-dev

二、安装vue-property-decorator

npm install vue-property-decorator –save-dev

三、配置vue.config.js

  1. module.exports = {
  2.   configureWebpack: {
  3.     resolve: {
  4.       extensions: [“.ts”“.tsx”“.js”“.json”]
  5.     },
  6.     module: {
  7.       rules: [
  8.       {
  9.         test: /\.tsx?$/,
  10.         loader: ‘ts-loader’,
  11.         exclude: /node_modules/,
  12.         options: {
  13.           appendTsSuffixTo: [/\.vue$/],
  14.         }
  15.       }
  16.       ]
  17.     }
  18.   }
  19. }

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

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

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

  1. declare module “*.vue” {
  2.   import Vue from “vue”;
  3.   export default Vue;
  4. }

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

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注