vue与TypeScript集成配置最简教程(推荐)

# vue init webpack vue-typescript

? Project name vue-typescript
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

# cd /vue-typescript
# npm install typescript ts-loader --save-dev
# npm install

{
 test: /\.tsx?$/,
 loader: 'ts-loader',
 exclude: /node_modules/,
 options: {
  appendTsSuffixTo: [/\.vue$/],
 }
},

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

{
 "pilerOptions": {
  "strict": true,
  "module": "es2015",
  "moduleResolution": "node",
  "target": "es5",
  "allowSyntheticDefaultImports": true,
  "lib": [
   "es2017",
   "dom"
  ]
 }
}

<script lang="ts">

<script lang="ts">
 import Vue, {ComponentOptions} from 'vue'
 export default {
  name: 'hello',
  data() {
   return {
    msg: 'this is a typescript project now'
   }
  }
 } as ComponentOptions<Vue>
</script>

# npm run dev

# npm install --save-dev vue-class-ponent

"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,

<script lang="ts">
 import Vue from 'vue'
 import Component from 'vue-class-ponent'
 @Component
 export default class Hello extends Vue {
  msg: string = 'this is a typescript project now'  
 }
</script>

import Vue from 'vue'
import Component from 'vue-class-ponent'
// @Component 修饰符注明了此类为一个 Vue 组件
@Component({
 // 所有的组件选项都可以放在这里
 template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
 // 初始数据可以直接声明为实例的属性
 message: string = 'Hello!'
 // 组件方法也可以直接声明为实例的方法
 onClick (): void {
  window.alert(this.message)
 }
}