vue增加typescript支持

1、用vue-cli创建项目 参考网址：https://www.cnblogs.com/l-y-h/p/11241503.html
2、在根目录下增加tsconfig.ts文件
在根目录下增加shims-vue.d.ts文件
配置参数参考：https://juejin.im/post/6844903967999131662
3、下载typescript依赖包
npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev
参考网址：https://blog.csdn.net/hellow_world_/article/details/89355328
4、修改webpack.base.conf.js
在 rules: 下增加ts支持

      // 增加tslint-loader
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        enforce: 'pre',
        loader: 'tslint-loader'
      },
      // 增加ts-loader，用于解析ts
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }

5、具体修改代码
1、将src/main.js 改为main.ts
main.js 文件内容

 import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

main.ts 文件内容

import Vue from 'vue';
import App from './App.vue';
import router from '@/router/index';

Vue.config.productionTip = false

export default new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

2、App.vue 修改前

	<template>
	  <div id="app">
	    <router-view/>
	  </div>
	</template>
	
	<script>
	export default {
	  name: 'App'
	}
	</script>

App.vue 修改后

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
export default class App extends Vue {
}
</script>

3、HelloWorld.vue 修改前

	<template>
	  <div id="app">
	    <router-view/>
	  </div>
	</template>
	
	<script>
	export default {
	  name: 'App'
	}
	</script>

HelloWorld.vue 修改后

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

4、router 文件下 index.js 改为index.ts index.js修改前

		import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

index.ts 修改后

	import Vue, { AsyncComponent as Async } from 'vue';
import Router from 'vue-router';

const Page1: Async = (): any => import('@/components/HelloWorld.vue');

Vue.use(Router)

export default new Router({
    mode: 'hash',
    base: '/',
    routes: [
        {
            path: '/',
            name: 'page1',
            component: Page1
        }
    ]
})

修改完成 执行 npm run dev 页面启动 输出 hello world。