vue2安装typescript

vue2安装typescript

安装方式

第一步：安装依赖

npm install typescript awesome-typescript-loader@3.5.0 --save-dev

第二步：在项目根目录下 新建立一个 tsconfig.js文件

module.exports = {
	'compilerOptions':{
		'module':'commonjs',//编译的代码采用的模块规范
		'target':'es5',// 编译出的代码采用es的那个版本，
		'sourceMap':true, //输出Source Map以方便调试
		'importHelpers':true // 减少辅助函数的输出 缩小压缩后的代码体积
	},
	'exclude':{// 不编译下面这些目录中的文件
		'node_modules': true
	}
};

第三步：在webpack.config.js文件中配置

module:{
		rules:[
			{
				test:/\.ts$/,
				use:['awesome-typescript-loader'],
				exclude:/node_modules/
			}
		]
	}

引用方式

1、vue文件里

<script lang="ts">、、、、、</script>

2、vue里引入ts文件
demo.ts

export function show(content:string){
	window.document.getElementById('content').innerText="Hello,"+content;
}

index.vue//以下是js写法，若有需要可改成ts写法。

import {show} from '@/demo.ts';
export default {
	data () {
		return {
		   show
		}
	},
	mounted(){
		this.show('word');
	}
}