vue-cli3项目中引用ts_vue-cli创建的vue3项目引入ts

摘要： 原有的项目是通过vue-cli3创建的vue项目，引入ts进行开发，不影响之前的页面。

安装依赖

npm install typescript ts-loader --D
npm install vue-property-decorator  // 用于在.vue文件中使用ts语法，第一次用-D的方式安装发现不支持
1
2

配置文件

# vue.config.js
# 使用ts-loader来转换ts文件
module.exports = {
 configureWebpack: {    
    resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },    
    module: {        
      rules: [    
        {    
          test: /\.tsx?$/,    
          loader: 'ts-loader',    
          exclude: /node_modules/,    
          options: {
            appendTsSuffixTo: [/\.vue$/],    
          }    
        }        
      ]    
    }    
  }  
}  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 在根目录下新增tsconfig.json （用来编译这个项目的根文件和编译选项）
{
  "compilerOptions": {
  	"baseUrl": "." // 基础目录，如果有配置了paths必须加这一项
    "target": "es5",          // 编译目标平台
    "module": "commonjs",    // 指定模块生成方式，["commonjs", "amd", "umd", "system", "es6", "es2015", "esnext", "none"]
    "strict": true, // 同时开启 alwaysStrict, noImplicitAny, noImplicitThis 和 strictNullChecks
    "esModuleInterop": true, //允许export = 导出，由import from导入
    "experimentalDecorators": true ,//启用装饰器
    "allowJS": true, // 允许编译javascript文件,不加这一条，在ts中引用js文件就需要定义声明文件
    "paths": {
		"@/*": ["src/*"]  // 设置路径别名 "src/api/index.js" => "@/api/index.js"
	}
  }
}
# 路径别名设置无效；experimentalDecorators: true 无效
#如果配置项无效是因为在vscode中只会识别工作区第一个项目的tsconfig.js ，解决办法是将项目作为工作区的第一个项目，或者在该工作区的第一个项目中新建tsconfig.json加上这些配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 需要在ts环境下识别vue文件，在src目录下添加 vue-shim.d.ts 全局声明文件
declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}
1
2
3
4
5

vue文件改造（只针对<script></script>部分，template和style和之前一样的写法,可以有基本组件用法和基于类的组件两种写法）

# 基本组件用法，和之前的vue组件用法类似，有生命周期函数、data、props、watch、computed、methods
<script lang="ts">
	import { Component, Vue } from 'vue-property-decorator'
	export default Vue.extend({
		props: {
		    propA: {
		      type: Number
		    },
		    propB: {
		      default: 'default value'
		    },
		    propC: {
		      type: [String, Boolean]
		    }
	    }
		data() {
			return {}
		},
		watch: {
			child(newVal) {},   // 这种写法默认 `immediate`和`deep`为`false`
    		person: {
            	handler: () => {},
            	immediate: true,
            	deep: true
        	}
		}
		created(){},
		methods:{
			getData():void{...}
		}
	})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 基于类的vue组件
<script lang="ts">
	import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
	@Component // 注明了此类为一个Vue组件，不管有没有引用外部组件，这个都要加，否则正常路由跳转会正常显示页面，但是手动刷新页面就会报错不显示页面
	// 引入外部组件
	// @Component({
	//  components: {
	//   test
	//  }
	//})
	// 组件过滤器(filters)
	// @Component({
	//  filters: {
	//   filterValue(val) {return value + 1}
	//  }
	//}) 
	export default class Index extends Vue {
		// @Prop 替换Vue中的props属性
		@Prop(Number) 
		readonly propA!: number;
        @Prop({default: 'default value'}) 
        readonly propB!: string;
        @propC([String, Boolean]) 
        readonly propC: string | boolean;
        // readonly可以不加，这里 !和可选参数?是相反的, !告诉TypeScript我这里一定有值,如果没有，那么你应该使用| undefined
        
		// 计算属性呢要用到getter
		get ValA(){
            return 1;
        }
		
		//  @Watch装饰器来替换Vue中的watch属性
		@Watch('child')
		onChangeValue(newVal: string, oldVal: string){
		    // todo...
		}

		@Watch('person', {immediate: true, deep: true})
		onChangeValue(newVal: Person, oldVal: Person){
		    // todo...
		}
		
		// 	data里的初始数据可以直接声明为实例的属性
		msg: string = 'hello world'
		
		// 组件methods里面的方法也可以直接声明为实例的方法
  		onClick (): void {
    		window.alert(this.message)
  		}
		
		// 生命周期函数直接作为实例方法
		created(): void {}
		mounted(): void {}
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

总结：
1. 原来的vue文件不受影响，在新的vue文件中使用ts只需要在script标签中加上lang="ts"即可
2.js文件要使用ts直接将文件后缀改成.ts，