环境配置

增加开发包的依赖

npm install typescript ts-loader --save-dev

增加运行依赖包

npm i vue-class-component --save

修改src目录中的内容

main.js修改为main.ts

修改app.vue内容,将script内替换为如下内容

{
    "compilerOptions": {
      "target": "es5",
      "allowSyntheticDefaultImports": true,
      "lib": [
        "dom",
        "es5",
        "es2015.promise"
      ],
      "module": "es2015",
      "moduleResolution": "node",
      "outDir": "lib",
      "isolatedModules": false,
      "experimentalDecorators": true,
      "declaration": true,
      "noImplicitAny": true,
      "noImplicitThis": true,
      "strictNullChecks": true,
      "removeComments": true,
      "suppressImplicitAnyIndexErrors": true
    },
     "exclude": [
          "node_modules"
      ],
    "include": [
      "src/**/*.ts"
    ],
    "compileOnSave": false
  }

修改webpack配置

webpack.config.js

1.修改入口

将entry.app的main.js修改为main.ts

如下所示

module.exports = {
  entry: {
    app: './src/main.ts'
  },

在resolve中添加 extensions: [‘.ts’,’.js’, ‘.json’]

如下所示

module.exports = {
  resolve: {
    extensions: ['.ts','.js', '.json']
  },

在module.rules中添加ts-loader和raw-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules|vue\/src/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      },

运行测试

npm run dev

自动打开浏览器

https://localhost:8080