最近，我想和我的朋友一起写一个新项目。由于该项目没有历史负担，因此我选择VUE3作为讨论后的前端框架。Vite的开发经验很棒，但是该公司不想放弃生产环境中Webpack的稳定性。
不舒服的探索（CAI）之后，朋友已经建立了非常舒适的基本配置。
在这里，我们选择创建一个基本的VUE3项目并添加VITE支持。不选择创建基本项目的原因是，添加Vite比WebPack更容易。前任留下了很多经验。
此外，如果您不需要WebPack的支持，则可以跳过以下内容，并部分。
这是您已经熟悉汽车的命令，但仍必须发布：
在这里，您可以选择已有2202年的TS和ESLINT。这些应该起来?。
维特（Vite）的酷点在这里，我不会在这里说，呵呵呵呵??????。
要添加Vite支持，我们首先需要安装：
我们在根目录中创建并编写基本配置：
在这里，我们添加基本别名和Vite配置。当然，现在的配置还不够，我们无法平稳运行。
如果配置别名，也需要添加路径：
更多配置信息：https：//www.npmjs.com/package/@vitejs/plugin- Vue
由于我们需要同时支持WebPack和Vite，因此在处理HTML时，我们最终输出（SPA应用程序始终具有HTML），因此我们需要将Vite和WebPack与代码保持兼容。此插件可以帮助我们完成此操作。
单页应用程序没有其他配置。如果要制作多页面应用程序，则可以看到其配置信息：
https://www.npmjs.com/package/vite-plugin- html-template
在特定的vite迭代中，环境变量已经成为，但我们仍在webpack上使用。像HTML一样，我们需要兼容，以便WebPack和Vite可以运行。这个插头可以帮助我们做到这一点：
环境变量的写入与以前的撰写一致。使用和前缀可用于加载所有这些前缀环境变量。
如果您不想增加其他插件-in，则有一些直接写入的方法：
有关环境变量的更多讨论，您可以看到此问题：
https://github.com/vitejs/vite/issues/1973
添加此插头后，我们可以运行Hello World：
当然，它可以直接是要添加的更为严肃的方法：
VUE3的设置语法非常香。在编写Coptionapi时，让我们有很多重复的内容，但是当编写VUE3时，它仍然需要我们导入。尽管这并不麻烦，但它很容易：
如果您不配置Typescript，则无法生成d.ts。如果您不配置ESLINT，也可以关闭ESLINT。
在这里，如果ESLINT打开并配置了双引号，而不是单语引号，则可以创建一个以添加它，并且需要将生成添加到它：
本质
路口
我们的WebPack仅在包装时才使用，并且不需要TS和ESLINT。
重要的是要确保代码格式的鲁棒性和一致性。提交代码时，我们添加了一张git钩检查：
package.json：
除了仅检查外，我们还可以提高自动格式并强行维护统一样式：
当写业务很香。由于我们开发了+，这两个操作员的默认汇编支持这两个操作员，并且不会编译为较低版本（当然，您需要编译到较低版本，希望您祝您好运）。
在这里，我们可以添加这些配置来制作包装：
中间：
在GIT钩部分中，我们没有在提交时配置检查。检查已放置在软件包中（此处使用Vue-CLI打开盒子，不需要配置）。
全面检查可以发现许多企业的裸露变化类型（API类型更改，组件道具的更改等），但有时有某种类型，没有时间更新类型本身（说您是niu Sang，），在这里，我们可以通过配置跳过一些目录/文件检查。这是一个webpack配置：
vue.config.js：
我相信每个人都对Axios的包装有自己的见解。我的朋友在这里封装的轴是很容易使用。在这里，您扔了一块砖块，希望吸引您的玉。
定义基本的拦截器逻辑：
这是调用Axios链的想法。每个拦截器的逻辑是彼此独立的，并且不对。它易于修改和扩展。每个拦截器只做一件事。
这里还有两个常用的功能，一个是自动加载默认值，另一个是出现错误时（当然，演示中没有错误的处理，如果使用它，则需要在此处编写逻辑）。两者都可以通过两者。配置开关，您可以在编写业务时节省很多东西?。
接下来是对请求和返回的支持：
在这里，我们封装了统一的返回值类型：
保持与您的后端一致。在这里，我们使用通用类型，使我们能够在实际定义接口时传递实际返回值的类型。
实际定义接口：
在这里，我们将参数类型放在第二个参数中，而返回值的类型是第一个。您可以根据业务和技术要求的频率更改位置。
实际业务中使用：
可以看出，已经根据我们的定义类型提示了数据类型。加载和警报可以直接传递参数控件，减少大量重复代码，并享受美丽?。
Pinia升级的Vuex版本非常易于使用。官方文件中没有进点点，大菠萝，干燥。
https://pinia.vuejs.org/introduction.html#basic-example
如果使用语法，则在定义类型的教授时有点反效率：
在这里，您只需要传递打字稿的定义即可。您无需在通过中提供参数。如果要编写默认语法的默认语法，则需要介绍另一个函数：
应该注意的是，这是汇编的汇编期。它仅写在有效的内容中，因此无法使用包装和包装使其变得更好。
https://vuejs.org/api/sfc-script-html#defineprops-defineemits
如果您使用过Vue2，那么我们可能会先到先入为主，我们可以直接观察手表道具的价值：
在Compositationapi中，我们无法直接观看：
这不是参考，但它是一个价值。手表无法监视特定值的变化。在这里，您可以使用两种方法来监视它。
转换后，反应性的乘积被扁平，因此PropSrefs.msg是参考。目前，可以听到它，但是缺点是显而易见的，因为它已转换为ref，并且在获取值时需要添加。
观看本身可以监视getter函数，因此我们可以直接使用值的值：
我个人在这里推荐第二种方法?。
如果您习惯于听Vue2中的数组，并且喜欢使用构建的方法直接修改原始数组：
那么Vue3中的这样的手表将无法直接生效，您需要深入了解：
可以专门看到：
https://github.com/vuejs/core/issues/2116
但是，问题仍然处于敞开状态，将来可能会更改。
在VUE2中，可以在外部组件中使用的内部组件方法不能限制，这意味着外部组件可以直接调用/修改内部组件的函数/变量，以干扰内部组件的操作逻辑。
引起这一点的问题是，组件的维护者不知道呼叫者会干扰内部许可。当组件更新后，很容易引起双侧皮肤。为了缩小该方法，VUE3最终有一种方法。GrammarSugr默认情况下不提供任何内部组件的变量，取而代之的是公开要暴露于外部的接口。
https://vuejs.org/api/sfc-script-html#definexpose
保存时间的完整版本在GitHub中，可以直接使用。
最后，弟弟和姐姐经过。
原始：https：//juejin.cn/post/7096372659079872526