【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践
1、使用官方脚手架构建 新的 VueCLI 工具允许开发者 使用 TypeScript 集成环境 创建新项目。 只需运行 vue createmy-app 。 然后,命令行会要求选择预设。使用箭头键选择 Manuallyselectfeatures 。 接下来,只需确保选择了 TypeScript 和 Babel 选项,如下图: 完成此操作后,它会询问你是否要使用 class-style component syntax 。 然后配置其余设置,使其看起来如下图所示。 Vue CLI工具现在将安装所有依赖项并设置项目。 接下来就跑项目啦。 总之,先跑起来再说。 2、项目目录解析 通过 tree 指令查看目录结构后可发现其结构和正常构建的大有不同。 这里主要关注 shims-tsx.d.ts 和 shims-vue.d.ts 两个文件 两句话概括: shims-tsx.d.ts ,允许你以 .tsx 结尾的文件,在 Vue 项目中编写 jsx 代码 shims-vue.d.ts 主要用于 TypeScript 识别 .vue 文件, Ts 默认并不支持导入 vue 文件,这个文件告诉 ts 导入 .vue 文件都按 VueConstructor<Vue> 处理。 此时我们打开亲切的 src/components/HelloWorld.vue ,将会发现写法已大有不同 至此