use vue-class-component

$ npm install vue-class-component --save-dev

Author: havvg

package-lock.json

@@ -21,6 +21,7 @@
  "node-sass": "^4.5.3",
  "sass-loader": "^6.0.6",
  "ts-loader": "^3.1.0",
+ "vue-class-component": "^6.0.0",
  "vue-loader": "^13.0.5",
  "vue-template-compiler": "^2.4.4",
  "vue-ts-loader": "0.0.3",

package.json

@@ -21,43 +21,45 @@
 
 <script lang="ts">
 import Vue from "vue";
+import Component from 'vue-class-component';
 
-export default Vue.extend({
- name: 'app',
-
+@Component({
+ name: 'app'
+})
+export default class App extends Vue {
  data () {
  return {
  msg: 'Welcome to Your Vue.js App, supporting TypeScript'
  }
  }
-})
+}
 </script>
 
 <style lang="scss">
 #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;
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
 }
 
 h1, h2 {
- font-weight: normal;
+  font-weight: normal;
 }
 
 ul {
- list-style-type: none;
- padding: 0;
+  list-style-type: none;
+  padding: 0;
 }
 
 li {
- display: inline-block;
- margin: 0 10px;
+  display: inline-block;
+  margin: 0 10px;
 }
 
 a {
- color: #42b983;
+  color: #42b983;
 }
 </style>

src/App.vue

@@ -1,13 +1,18 @@
 {
  "compilerOptions": {
  "lib": ["dom", "es5", "es2015"],
- "target": "es5",
- "module": "es2015",
+ "target": "es2015",
+ "module": "es6",
  "moduleResolution": "node",
  "sourceMap": true,
- "allowSyntheticDefaultImports": true
+ "experimentalDecorators": true,
+ "allowSyntheticDefaultImports": true,
+ "allowJs": true
  },
  "include": [
  "./src/**/*"
+ ],
+ "exclude": [
+ "node_modules"
  ]
 }