vue+ts搭建工程

Posted 2020-11-29 fdd-111

1.安装必要的插件

npm i vue-class-component vue-property-decorator --save
npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

2.配置webpack修改webpack.base.conf.js文件

entry: {
    app: ‘./src/main.ts‘ // main.js->main.ts
  },
resolve: {
    extensions: [‘.js‘, ‘.vue‘, ‘.json‘, ‘.ts‘],  // 增加.ts
    alias: {
      ‘@‘: resolve(‘src‘)
    }
  }

module.rules里增加如下配置

  {
      test: /.ts$/,
      exclude: /node_modules/,
      enforce: ‘pre‘,
      loader: ‘tslint-loader‘
    },
    {
      test: /.tsx?$/,
      loader: ‘ts-loader‘,
      exclude: /node_modules/,
      options: {
        appendTsSuffixTo: [/.vue$/],
      }
    },

3. 在src下面创建vue.shim.d.ts文件

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

4. 添加tsconfig.json文件   运行： tsc --init 

如果没有全局安装ts，就先安装一下： npm install -g typescript

一个模板tsconfig.json例子

{
  "include":[
    "src/**/*",
    "vue.shim.d.ts"
  ],
  "exclude":["node_modules"],
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ],
    "allowJs": true,
    "strict": true,
    "baseUrl": "./",
    "paths": {
      "@/*":["src/*"]
    },
    "esModuleInterop": true,
    "experimentalDecorators": true,
  }
}

5.然后再去把src下面的js文件改成tswenjian

6.在index.ts跟main.ts文件里面把引入vue文件的引入路径的.vue后缀加上

7.修改vur文件例子

<script lang="ts">
  import { Vue, Component } from ‘vue-property-decorator‘

  @Component
  export default class App extends Vue {
    // 初始化数据
    msg = 123

    // 生命周期钩子
    mounted () {
      this.greet()
    }

    // 计算属性
    get computedMsg () {
      return ‘computed ‘ + this.msg
    }

    // 方法
    greet () {
      alert(‘greeting: ‘ + this.msg)
    }
  }
</script>