VueCLI3.0 + TypeScript + HTML分离：构建通用基础框架教程

本文档详细介绍了如何使用Vue CLI 3.0版本，结合TypeScript (TS)、Vue Test Utils (vue-test-unit)、HTML分离和TSLint来创建一个通用的基础框架。首先，它基于vue-cli3构建，技术栈主要包括Node-Sass、Babel和Router，但尚未集成单元测试框架unit-jest，这将在后续阶段单独添加。 HTML文件分离是一个关键点，因为在初始项目中，HTML、TS和SCSS都在同一个.vue文件内，这导致代码可读性和管理性降低。为了解决这个问题，作者推荐使用html-loader，通过Yarn安装并将其配置在vue.config.js文件中。该配置将`.html`文件与对应的loader关联起来，以便在编译时正确处理HTML内容。 在vue.config.js文件中，通过chainWebpack方法进行高级配置，包括添加和修改loader，以及配置插件。通过`.html`规则，确保HTML文件在编译过程中被正确处理。同时，因为TypeScript默认只能识别`.d.ts`、`.ts`和`.tsx`文件，所以还需要在shims-vue.d.ts文件中添加外部模块的声明，比如Vue、HTML、SCSS和CSS，以便编译器能够识别并处理这些非标准文件类型。 尽管在shims-vue.d.ts中添加了模块声明，但IDE可能仍无法识别某些扩展名的文件，如`.html`，因此在引入外部模块时需要明确指定其后缀，否则虽然编译不会出错，但在开发过程中可能会遇到IDE提示问题。 这篇文章提供了一个实践性的指南，帮助开发者理解和应用Vue CLI 3.0结合TypeScript和其他工具创建高效、可维护的项目结构，特别是对于那些注重代码清晰度和组织的团队来说，这样的配置是非常重要的。