1.创建一个vue项目vueinitwebpack'projectname'2.安装typescript和parsercnpmitypescriptts-loader--save-dev注：这两个是配置typescript的必备文件，我们将逐步安装更多插件。3.配置webpack打开build/webpack.base.config.jsentry:{app:'./src/main.ts'//修改main.js为main.ts然后提main.ts}resolve:{...extensions:['.js','.ts','.tsx','.vue','.json']//添加tstsx...},module:{rules:[{test:/\.ts$/,exclude:/node_modules/,enforce:'pre',loader:'tslint-loader'},{test:/\.tsx?$/,loader:'ts-loader',排除:/node_modules/,options:{appendTsSuffixTo:[/\.vue$/],}},]//添加ts,tsx解析配置4.在根目录添加tsconfig.json并配置{"include":["./src/**/*"],"exclude":["node_modules"],"compilerOptions":{"allowSyntheticDefaultImports":true,"experimentalDecorators":true,"strict":true,"allowJs":true,"module":"es2015","target":"es5","moduleResolution":"node","isolatedModules":true,"lib":["dom","es5","es2015.promise"],"sourceMap":true,"pretty":true}}五、在src目录下创建文件：vue-shim.d.ts，配置declaremodule"*.vue"{从"vue"导入Vue；exportdefaultVue;}6.修改项目中的js文件为tsmain.js=>main.tsrouter/index.js=>index.tsmain.tsinimportAppfrom'./App'=>importAppfrom'./App.vue'router/index.jsimportHelloWorldfrom'@/components/HelloWorld'改为importHelloworldfrom'@/components/HellowWorld.vue'注意：原来导入的文件必须加上.vue后缀七、修改hellowWorld.vue文件为ts格式这里是初步修改，后面我们会使用插件vue-class-component进行修改。如果你写过angular2+，那很容易上手。8.运行遇到的问题npmrundev运气好的话，项目会这样启动问题一：vuetypescriptModulebuildfailed:Error:Youmaybeusinganoldversionofwebpack;请检查你至少使用的是4版本解决方法：修改package.json中的ts-loader版本为3.5，然后cnpminstall最后重启启动npmrundev就好了。问题2：TS1219：对装饰器的实验性支持是一项在未来版本中可能会发生变化的功能。在“tsconfig”或“jsconfig”中设置“experimentalDecorators”选项以删除此警告。解决方法：.tsconfig.json中缺少Configure"experimentalDecorators":true9.使用插件vue-class-component安装插件cnpmivue-class-component--save-dev修改HelloWorld文件{{msg}}
