Vue 项目如何在内部新建TS项目

1.在项目整体新建一个项目文件夹（doc），并在文件夹里新建App.vue，main.ts 两个文件  最外层新建tsconfig.json文件。public新建doc.html文件。

2.APP.vue

3.main.ts文件

4.shims-vue.d.ts 文件 （若不引入 则main.ts中引入App.vue报错）

5.tsconfig.json文件

6.vue.congif.js文件配置更改

7.package.json文件 添加typescript插件  注意版本

范例，HelloWorld.vue

使用ts开发时如果要使用第三方js库的同时还想利用ts诸如类型检查等特性就需要声明文件，类

似 xx.d.ts

同时，vue项目中还可以在shims-vue.d.ts中对已存在模块进行补充

npm i @types/xxx

装饰器用于扩展类或者它的属性和方法。@xxx就是装饰器的写法

常见的有@Prop,@Emit,@Watch

具体使用见文章开头的例子

vuex-module-decorators 通过装饰器提供模块化声明vuex模块的方法，可以有效利用ts的类型系

统。

安装

根模块清空，修改store/index.ts

定义counter模块，创建store/counter

装饰器是工厂函数，它能访问和修改装饰目标。

类装饰器，07-decorator.ts

方法装饰器

属性装饰器

稍微改造一下使其可以接收参数

我们使用vite来初始化项目，记得初始化的过程选择vue-ts哟，这样我们就能引入ts，后面不用额外单独对他引入

vite 的配置项很多，具体的小伙伴可以到vite官网去看一下 https://vitejs.dev/config/ ，这次我们就配置一下别名。这个别名@的配置有一个小小的坑，也不算是坑，就是要引入path的时候会报错，这可能是我自己对这个不熟，又没有认真看这个提示，就花了点时间才解决这个问题。下面就是解决方案及具体可以看我另外一篇文章。

使用import方式引入的报错提示

使用require方式引入path的报错提示

(1)安装node依赖

(2)配置node模块

在ts.config.js中添加配置"types": ["node"]

（3）配置别名

在src目录下创建plugins文件夹，再新建一个element3.ts,用于存放ui库引入的配置

---