diff --git a/template/build/webpack.base.conf.js b/template/build/webpack.base.conf.js
index 0f161198d4..c319cf9cd8 100644
--- a/template/build/webpack.base.conf.js
+++ b/template/build/webpack.base.conf.js
@@ -9,7 +9,7 @@ function resolve (dir) {
 
 module.exports = {
   entry: {
-    app: './src/main.js'
+    app: './src/main.ts'
   },
   output: {
     path: config.build.assetsRoot,
@@ -19,7 +19,7 @@ module.exports = {
       : config.dev.assetsPublicPath
   },
   resolve: {
-    extensions: ['.js', '.vue', '.json'],
+    extensions: ['.js', '.vue', '.json', '.ts'],
     alias: {
       {{#if_eq build "standalone"}}
       'vue$': 'vue/dist/vue.esm.js',
@@ -45,6 +45,14 @@ module.exports = {
         loader: 'vue-loader',
         options: vueLoaderConfig
       },
+      {
+        test: /\.ts$/,
+        loader: 'ts-loader',
+        include: [resolve('src'), resolve('test')],
+        options: {
+          appendTsSuffixTo: [/\.vue$/]
+        }
+      },
       {
         test: /\.js$/,
         loader: 'babel-loader',
diff --git a/template/package.json b/template/package.json
index 5c420a2a93..bc7d595b78 100644
--- a/template/package.json
+++ b/template/package.json
@@ -90,6 +90,9 @@
     "vue-loader": "^11.1.4",
     "vue-style-loader": "^2.0.0",
     "vue-template-compiler": "^2.2.4",
+    "vue-class-component": "^5.0.0",
+    "ts-loader": "^2.0.3",
+    "typescript": "^2.2.1",
     "webpack": "^2.2.1",
     "webpack-dev-middleware": "^1.10.0",
     "webpack-hot-middleware": "^2.16.1",
diff --git a/template/src/App.vue b/template/src/App.vue
index 74a25d1dfa..6f93704985 100644
--- a/template/src/App.vue
+++ b/template/src/App.vue
@@ -9,7 +9,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 {{#unless router}}
 import Hello from './components/Hello'{{#if_eq lintConfig "airbnb"}};{{/if_eq}}
 
diff --git a/template/src/components/Hello.vue b/template/src/components/Hello.vue
index dc7251a0f2..63f5a94ee2 100644
--- a/template/src/components/Hello.vue
+++ b/template/src/components/Hello.vue
@@ -20,7 +20,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 export default {
   name: 'hello',
   data{{#unless_eq lintConfig "airbnb"}} {{/unless_eq}}() {
diff --git a/template/src/main.js b/template/src/main.ts
similarity index 100%
rename from template/src/main.js
rename to template/src/main.ts
diff --git a/template/src/router/index.js b/template/src/router/index.ts
similarity index 100%
rename from template/src/router/index.js
rename to template/src/router/index.ts
diff --git a/template/tsconfig.json b/template/tsconfig.json
new file mode 100644
index 0000000000..fa31912694
--- /dev/null
+++ b/template/tsconfig.json
@@ -0,0 +1,14 @@
+{
+	"compilerOptions": {
+		"experimentalDecorators": true,
+		"allowSyntheticDefaultImports": true,
+		"module": "es2015",
+		"moduleResolution": "node",
+		"noImplicitAny": true,
+		"target": "es5",
+		"lib": ["dom", "es5", "es2015.promise"]
+	},
+	"files": [
+		"./src/main.ts"
+	]
+}