webpack.base.conf.js

entry: {
    app: './src/main.js'
  }

.babelrc

     {
          "presets": [
            ["env", {
              "modules": false,
              "targets": {
                "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
              }
            }],
            "stage-2"
          ],
          "plugins": ["transform-vue-jsx", "transform-runtime","transform-decorators-legacy"]
        }
 

vue-shims.d.ts

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

main.js文件不變

tsconfig.json

    
 {
  "compilerOptions": {
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "module": "es2015",
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "strict": true,
    "target": "es5",
    "moduleResolution": "node",
    "lib": [
      "dom",
      "es5",
      "es2017",
      "es2015"
    ]
  }
}

App.vue

<template>
  <div>
    <input v-model="msg">
    <p>prop: {{propMessage}}</p>
    <p>msg: {{msg}}</p>
    <p>helloMsg: {{helloMsg}}</p>
    <p>computed msg: {{computedMsg}}</p>
    <button @click="greet">Greet</button>
  </div>
</template>

<script>
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  props: {
    propMessage: String
  }
})
export default class App extends Vue {
  // initial data
  msg = 123

  // use prop values for initial data
  helloMsg = 'Hello, ' + this.propMessage

  // lifecycle hook
  mounted () {
    this.greet()
  }

  // computed
  get computedMsg () {
    return 'computed ' + this.msg
  }

  // method
  greet () {
    alert('greeting: ' + this.msg)
  }
}
</script>

<style>

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

</style>

package.json

"dependencies": {
    "awesome-typescript-loader": "^3.4.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "node-sass": "^4.7.2",
    "sass": "^1.0.0-beta.4",
    "sass-loader": "^6.0.6",
    "sass-resources-loader": "^1.3.1",
    "source-map-loader": "^0.2.3",
    "ts-loader": "^3.3.1",
    "typescript": "^2.6.2",
    "vue": "^2.5.2",
    "vue-class-component": "^6.1.2",
    "vue-router": "^3.0.1"
  },

https://github.com/yyccQQu/vu...

官網(wǎng)有介紹啊
https://cn.vuejs.org/v2/guide...

應(yīng)該是配置loader就可以了

我記得ts寫導(dǎo)入組件要加.vue后綴
第二個router那個我就不知道了。

雖然我也沒有在Vue中具體使用TypeScript，但是官方文檔上有對其的介紹和推薦配置，可以參考一下：https://cn.vuejs.org/v2/guide...