为什么使用vue-cli脚手架？vue-cli3(1)

• CLI: 即vue全局命令，主要用于项目创建和管理，包含了vue create、vue ui这些命令。CLI命令的做的事情比较少，所以更新不会太频繁(开发者也很少会去更新这些命令)

• Service层: 负责项目的实际构建，也就是webpack项目构建。这一块是频繁更新的，一般作为项目的局部依赖。

OK，这么做有什么意义呢？考虑这样一个场景，这也是答主之前遇到的一个痛点：

vue-cli3之前不算是一个构建CLI, 它顶多就是一个模板拷贝器, 所有webpack配置和构建命令都是耦合在具体的项目里面，package.json会包含一大堆开发依赖。

如果去跟进webpack或相关工具更新的朋友会有这种体会，升级不是一件容易的事情。比如你升级了babel-loader, 可能要连带webpack都升级，webpack升级后可能其他工具又不兼容了。

升级方面的痛点是其一。如果你的团队需要维护很多项目，你怎么对这些项目进行维护升级？每个项目都拷贝一下？如果某个项目做了特殊配置呢？

对于团队而言，项目构建这一块是应该尽量做到的统一和傻瓜化的，没有必要在这方面投入太多的精力，应该把事情外包给擅长这种事情的人去做。

另外不要排斥更新，更新可以获得更好的开发体验和构建速度、运行性能, 别人在这方面比你了解的更多。

分离了vue-cli-service之后，项目构建更新只是一个命令的事情，除非做了很多特殊化操作。特殊化操作应该封装到vue-cli的插件中。这就引出了vue-cli3的另外一个特色：插件

---

2. 插件化

相比create-react-app, vue-cli是在太仁慈了。vue-cli的插件机制很灵活，通过webpack-chain和webpack-merge可以实现webpack完全定制化。

可以对比一下市面上流行的cli工具的可扩展性：

|   | Vue CLI | create-react-app | parcel |

| — | — | — | — |

| 快速原型开发 | 支持 | - | 支持 |

| 全局模式 | 零配置原型开发就是全局的 | - | 支持 |

| 插件 | 支持 | - | 支持，扩展文件类型和文件输出 |

| 扩展性 | 强，通过插件扩展 wepack 配置 | 弱, 强约定, 无法配置 webpack，可以 eject, 然后手工配置；支持 babel-macro;(严格说可以通过react-app-rewired进行扩展) | 中(可以配置 babel，postcss，Typescript); 提供了 Node API; 支持插件扩展文件类型 |

| 多页面 | 支持 | - | 支持 |

| 适用范围 | Vue 组件的第一公民。通过扩展可以支持任意前端框架 | 针对 React 开发，不支持其他框架 | parcel 是一个通用的打包工具，它的竞争对手是 webpack |

| 编译速度 | cache-loader,thread-loader 来加速 JS 和 TS 编译 | babel-loader 开启了 cache | 编译速度号称是 webpack 的两倍 |

| 可升级性 | 支持升级 cli-service, 插件需要单独升级, 插件需要遵循语义化版本. 太多插件存在升级风险 | 支持升级 react-script, 官方维护，且强约定基本可以保障向下兼容 | 支持升级 parcel-bundler |

| UI | 图形化管理是 CLI 的特色之一 | - | - |

对于vue-cli的插件实现机制可以看这篇文章。

因为vue-cli灵活的扩展性，所以它不仅限于vue本身，可以扩展支持react、anything…

按照上文说的，如果你要做深度的vue-cli定制化，不建议直接写在vue.config.js中，而是封装在插件中，独立的维护这个插件，然后项目再依赖这个插件。这样就可以简化升级的成本和复杂度。

---

3. GUI界面

虽然大部分人都觉得作用不大，因为确实对开发效率并实际的提升效果。就是看着舒服直观，这就够了。

---

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

最后

小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0tlcGxlcl9JSQ==,size_16,color_FFFFFF,t_70)

虽只说了一个公司的面试，但我们可以知道大厂关注的东西并举一反三，通过一个知识点延伸到另一个知识点，这是我们要掌握的学习方法，小伙伴们在这篇有学到的请评论点赞转发告诉小编哦，谢谢大家的支持！