原vue项目重构，使用typescript开发

目前手上的项目基本都是vue2+webpack3.0的一套基础框架，一直没有机会使用ts,心血来潮将原来的一个vue小项目，页面不多，将他改造一下，也来试试用typescript开发的感觉
第一步就是要下依赖包

"ts-loader": "^3.5.0",
"tslint": "^6.1.2",
"tslint-config-standard": "^9.0.0",
"tslint-loader": "^3.5.4",
"typescript": "^3.1.4",
"vue-class-component": "^7.2.3",
"vue-preview": "^1.1.3",
"vue-property-decorator": "^9.0.0",

最关键的是ts-loader和typescript的版本不能太高了，不然webpack会告诉你，要升级到webpack4，因为是老框架了，所以我选择将版本降一下
下载完依赖接下来就是要修改一下配置
添加ts后缀自动添加:

resolve: {
	extensions: ['.js', '.vue', '.json', '.ts'],
	alias: {
		'vue$': 'vue/dist/vue.esm.js',
		'@': resolve('src'),
	}
},

添加对ts文件的解析 ts文件的规范检测 这个我注释掉了，哈哈哈哈，有时候懒得改警告

{
	test:/\.ts$/,
	exclude:/node_modules/,
	enforce:"pre",
	loader:'tslint-loader'
},

添加对ts文件的解析

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

接着就是添加申明文件global.d.ts在你的src目录下

//对Vue模块引用的支持
declare module "*.vue" {
    import Vue from 'vue'
    export default Vue
}
//对全局Window对象的merge，添加新的属性
interface Window{
    $http:String,
    APP_INFO:String
}

declare var window: Window

在根目录下添加tsconfig.json（ts的配置文件）以及tslint,.json(tslint的配置文件)
这两个配置文件就自己需要什么配置什么

接下来就可以将所有的js的文件改成ts文件，可以添加类型校验，添加接口
Vue文件中也可以使用ts的语法
最新的脚手架，Vue-cli4其实已经支持ts项目的生成，你可以自行选择自己想要的功能
当然github上也有Vue+typescript项目，最好的学习就是自己手动重构，在项目中实践

今天就是我的分享，谢谢！！！！！