在Vue项目中使用Typescript

Typescript中文网
一、创建vue项目
vue create vue-ts-demo
选择Manually select features(手动选择)
选择图中五项(按上/下键切换选项,空格键选择该选项):
在这里插入图片描述
enter进入下一步进行其他配置:
在这里插入图片描述
参考博客:
简单粗暴 · 手把手教你在Vue项目中使用Typescript
使用Vue-cli3搭建Vue+TypeScript项目
二、项目目录
在这里插入图片描述

src目录下还多了两个文件:shims-vue.d.ts和shims-tsx.d.ts
shims-vue.d.ts:让.ts文件能够识别.vue文件
shims-tsx.d.ts:允许我们在项目是编写.tsx文件

package.json文件中看到,与普通项目相比,开发依赖多了typescript一项,运行依赖则是多了vue-class-componentvue-property-decorator

Vue-class-component:一个允许您以类风格的语法创建Vue组件的库。更多介绍可查看vue-class-component 官方文档

Vue-property-decorator:依赖于vue-class-component,它提供@Component @Prop @Watch @Emit等特性的装饰器,与我们在普通项目中使用的特性相同

vue-property-decorator 依赖于 vue-class-component(vue-property-decorator是在vue-class-component的基础上进行扩展,所以vue-class-component有的vue-property-decorator也有,使用时可以只导入vue-property-decorator,但安装包时两个包都需要下载)

vue-property-decorator用法

猜你喜欢

转载自blog.csdn.net/weixin_45629194/article/details/114996647