Vue3 组件化开发(1)

203 阅读2分钟

「这是我参与2022首次更文挑战的第21天,活动详情查看:2022首次更文挑战」。

下面我们使用 Vue CLI 4(目前 Vue 官方使用的最新版本的脚手架)搭建一个新的项目,之所以选择 Vue CLI 而不是 Vite 的脚手架搭建项目,是因为 Vue 官方还没有将脚手架从基于 Webpack 迁移到基于 Vite,等到官方把创建 Vue 项目的脚手架(Vue CLI)迁移到基于 Vite 时,我们就可以大力地使用 Vite 了。但是目前,Vue CLI 自己都还没有迁移到 Vite,那一定是 Vite 暂时还没有那么稳定,如果真正稳定了,Vue CLI 自己肯定首先就会迁移到 Vite。因此,在 Vue CLI 迁移到 Vite 之前,不建议在正式项目中大量地使用 Vite,不然,如果遇到某些坑,可能不容易爬出来(只有等到 Vite 下一个版本修复后,才可能爬出来,当然,你只使用一些基本功能的话一般不会遇到什么问题,但遇到一些特殊情况时,处理起来可能就比较棘手一点)。所以,接下来,我们一直使用 Vue CLI 就可以了,有一天 Vue CLI 迁移到 Vite 了,我们肯定也是更开心的,因为之前我们也体验过了,Vite 的速度真的是非常快的。

那么,我们先来重新创建一个脚手架项目:打开终端,切换到你准备存放项目的目录下,执行下面的命令:

vue create learn_component

image-20211223192327614

然后我们这里先选择之前保存过的只包含 Vue3babel 的预设 my_preset(后面,我们还会创建新的项目,到时候也会选择 TypeScriptVue RouterVuex 等东西加入到项目中。另外,这里自己保存的预设配置 my_preset 默认被存储在 C:/Users/sjj/.vuerc 文件中),回车后,项目就开始创建了:

image-20211223193209988

稍等片刻,项目就创建完成了:

image-20211223193502170

认识组件的嵌套

前面我们学习组件的时候,写的很多代码基本上都是放在了 App.vue 组件中,但是,如果我们只创建一个组件,并且把所有的逻辑都放在这个组件里的话,最终会造成这个组件中的代码越来越多,逻辑越来越复杂,最后这个组件会变得非常臃肿,难以维护。所以在真实开发中,我们要充分应用组件化的核心思想:对组件进行各种各样的拆分,拆分成一个个小的组件,再把这些小的组件组合嵌套在一起,最后就能形成我们的应用程序了