上周，发现vue版本更新到了2.5，这次主要update了对typescript(以下简称ts)的支持，正好，对我厂现有项目中加入ts使用，也是一直在酝酿当中的事情，所以写下这篇博客记录下其中踩的坑。
首先一定是安装相对应的依赖模块 npm install typescript ts-loader --save-dev
确认安装完成之后在webpack中加入对ts的loader配置
{
test:/\.ts$/,
exclude:/node_modules|vue\/src/,
loader:'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/]
}
}
为了识别.vue文件中ts代码，在src目录下新建vue-shims.d.ts，编辑这个文件
declaremodule"*.vue"{
importVuefrom"vue";
exportdefaultVue;
}
在项目根目录下新建tsconfig.json文件，注意加粗的的字段一定别忘记添加，这是后面对vue-class-component这个插件的支持
{
"compilerOptions": {
"allowSyntheticDefaultImports":true,
**"experimentalDecorators":true,**
"lib": [
"dom",
"es5",
"es2015.promise"
],
"module":"es2015",
"moduleResolution":"node",
"isolatedModules":false,
"target":"es5"
},
"include": [
"./src/**/*.ts"
]
}
然后js入口文件命名需要改成.ts 如 './src/main.ts'
这时候我们需要引入vue-class-component这个插件对vue中class风格代码进行支持
npm install --save-dev vue-class-component
安装完成后我们就可以愉快的使用ts进行开发啦
这里给出相关的示例代码参考，写法与es6写法略有不同，需要注意的sciprt标签上lang需要写成ts，官方也给出了sample进行参考 https://github.com/vuejs/vue-class-component#vue-class-component
App.vue
hello.vue
目前，遗留下来的一个问题，当我在尝试引入vue-resource时会报错，暂时找不到解决方案，有知道的同学告诉一声哈
更新一下这个解决方案 https://segmentfault.com/q/1010000011662554?_ea=2716766
