阶段一模块一直播

阳光穿透心脏的1/2处 2022-12-24 11:00 149阅读 0赞

# 使用 TypeScript 的 Vue.js 项目差异 #

1）基本操作

1.  安装 @vue/cli 最新版本
2.  
3.  使用 @vue/cli 创建一个项目（不选 TypeScript)
4.  ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]  
    先选这俩个。 use npm
5.  使用 @vue/cli 安装 TypeScript 插件  
    注意项目中千万别这么搞，插件会覆盖掉一下代码。  
    ![在这里插入图片描述][20201127220621279.png]  
    ![在这里插入图片描述][20201127221135865.png]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 1]

2）通过 Git Diff 对比介绍使用 TypeScript 的 Vue.js 项目差异

1.  安装了 @vue/cli-plugin-typescript 等插件
2.  shims-vue.d.ts 文件的作用
3.  shims-tsx.d.ts 文件的作用

# 三、相关扩展：JavaScript 项目中的类型增强 #

解决,后没有提示  
![在这里插入图片描述][20201127234754250.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 2]  
类型检查  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]: /images/20221120/911e0a5653b847bb941c0c30e72c1636.png
[20201127220621279.png]: https://img-blog.csdnimg.cn/20201127220621279.png
[20201127221135865.png]: https://img-blog.csdnimg.cn/20201127221135865.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201127224445903.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70
[20201127234754250.png]: https://img-blog.csdnimg.cn/20201127234754250.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201127235028423.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201127235234196.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70