为什么我不推荐你使用vue-cli创建脚手架？

trigkit4 发布于2019-08-22 16:09 / 1887人阅读

摘要：后来经过排查你会发现是由于目前还没有版本。可以使用该方式解决。这就是我为什么不推荐你使用创建脚手架的原因此文的受众是想要进阶中级的初级前端人员。

最近在知乎看到一个问题，原问题如下：

“ 很奇怪，为什么现在能找到自己手动创建vue脚手架的文章非常少，而且大家似乎对webpack4的热情并不高，对于想基于vue2.0+webpack4搭建一个脚手架的我来说资料真是少得可怜。难道现在一般的做法就是直接从vue-cli开始然后改成自己需要的模样吗？难道就没有人从零开始搭建一个渐进增强的脚手架？这一点我很疑惑，希望大牛给点指导。”

这个问题我之前在公司也曾想过，当初入门vue项目也是从一个 npm install vue-cli -g 的命令行开始的，觉得官方提供的vue-cli脚手架很友好，不用想vue+webpack的工作流怎么搭建，vue-loader 和 css-module怎么配置，如何安装使用eslint和editorconfig等，就可以直接进入业务代码的开发阶段。

当然，以上是对于写业务代码的前端一线编码人员来说的，对于追求上进的你当然不满足于一直写业务代码，你也想知道一个项目在破土动工前，前端leader是怎么搭建一个前端项目的工作流的，如何去手动配置一个具体项目的webpack打包文件，包括后期的SSR，服务端渲染。

这些都是你提升自己内功的砝码，也是初级前端和中级前端的区别所在，初级前端只会在leader安排下的一个模块里写点业务代码而不用去管前端工程的问题，这些问题都被前端leader搞定了，你只需调用他写好的命令或者插件即可。

中级前端或者更进阶者就有统筹全局的能力，类似于文章开头说的，能手动创建一个和公司项目需求深度定制的vue脚手架，而不再依赖于官方提供的vue-cli，一方面自己定制的脚手架哪出了问题自己心里清楚，从而也能培养自己前端架构的能力，另一方面这也是月薪10K与20K的技术差距。

当然，如果你直接使用了vue-cli，你的领导要求你将webpack的版本从3升级到最新的大版本4，你会不会一脸懵逼呢？举个例子：
在webpack4.0中，如何使用extract-text-webpack-plugin配置css多带带分离打包，以及如何解决在升级过程中碰到的一些坑？如果你没有亲手升级过webpack4，你根本不会发现这些问题，例如extract-text-webpack-plugin的报错：

(node:12712) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
    E:***myprojectwebpack-vue-elementUi
ode_moduleswebpacklibChunk.js:460
                    throw new Error(
                    ^
    
    Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
        at Chunk.get (E:***myprojectwebpack-vue-elementUi
ode_moduleswebpacklibChunk.js:460:9)
        at E:***myprojectwebpack-vue-elementUi
ode_modulesextract-text-webpack-plugindistindex.js:176:48
        at Array.forEach ()
        at E:***myprojectwebpack-vue-elementUi
ode_modulesextract-text-webpack-plugindistindex.js:171:18

这个问题的解决方式你在百度上暂时还搜不到答案，只能是依靠平时阅读官方文档、技术社区等寻找解决之道。
后来经过排查你会发现是由于extract-text-webpack-plugin目前还没有webpack4版本。可以使用该方式npm install extract-text-webpack-plugin@next解决。

这就是硬实力的一种体现，在公司里技术的高低，体现于公司项目中碰到的难以解决的bug的解决能力。你可以看看平时在公司里谁解决的bug多，一般不是太难的bug都是前端小组的成员去解决，比较难的bug大多数情况下是前端小组的leader去解决的。

这种硬实力的体现，折射出他为何是leader，你为何是被管理者，同样的岗位，放你上去，你不一定能解决掉项目中碰到的问题，而他能。所以，童鞋们，人家之所以是leader，是因为人家有高你一筹的技能，而这恰恰是你现阶段所缺少的。

俗话说，不想当leader的程序猿不是好码农。所以，平时你们可以在公司里看看你们的leader在忙些什么。

这就是我为什么不推荐你使用vue-cli创建脚手架的原因（此文的受众是想要进阶中级的初级前端人员）。

接下来，我会分章节手把手教大家如何从零开始一个vue+webpack前端工程工作流的搭建，以及SSR服务端渲染。文章预告如下：

一个正式项目的目录结构是怎么形成的

vue-loader是如何配置的

浅谈css-module配置

安装使用eslint检查的小技巧

如何在前端项目中配置editorconfig以及precommit

......

怎么用createRenderer的方式进行服务端渲染

正式环境打包以及异步模块打包优化

以上内容均会第一时间发布在我的公众号：闰土大叔，欢迎关注。

GPU云服务器云服务器脚手架使用你可能没有权限使用网络资源大数据数据很多你要什么租用云服务器你会选择什么配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94099.html

《从零构建前后分离的web项目》实战 -5分钟快速构建炒鸡规范的VUE项目骨架

摘要：可以使用或来安装我用来重新尝试一次对速度表示不理想的可以尝试淘宝的不要过度依赖中可以写成放哪都行，可以写成可以写成看到这个画面，安装完成了。初步搭建脚手架 Tips 任何不错的开源项目都有 project-cli 脚手架、我们用它生成往往能快速配制出最佳的、理想的脚手架我通常使用 cli 生成项目骨架再在之基础上进行个人修改。什么是 CLI 命令行界面（英语：command-li...

qieangel2013 2019-08-23 11:58 评论0 收藏0
《从零构建前后分离的web项目》实战 -5分钟快速构建炒鸡规范的VUE项目骨架

摘要：可以使用或来安装我用来重新尝试一次对速度表示不理想的可以尝试淘宝的不要过度依赖中可以写成放哪都行，可以写成可以写成看到这个画面，安装完成了。初步搭建脚手架 Tips 任何不错的开源项目都有 project-cli 脚手架、我们用它生成往往能快速配制出最佳的、理想的脚手架我通常使用 cli 生成项目骨架再在之基础上进行个人修改。什么是 CLI 命令行界面（英语：command-li...

kel 2019-08-19 11:10 评论0 收藏0
前方来报，八月最新资讯--关于vue2&3的最佳文章推荐

摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 评论0 收藏0
Vuejs自己的构建工具

摘要：然而，这些模板并不限制你自己对于使用的架构组织和选择类库。目前可用的模板包括全功能的，包括热加载，静态检测，单元测试一个简易的，以便于快速开始。最近，尤大在和人对喷的时候，悄然放出了一个大招，于是为了追赶他的步伐，赶紧试验了下，并且把原文给大家翻译下。原文地址：Announcing vue-cli 译文源地址： Vuejs自己的构建工具先上原文翻译：最近有很多大量关于Reac...

leoperfect 2019-08-19 17:20 评论0 收藏0
深入认识vue-cli：能做的不仅仅是初始化vue工程

摘要：借助，我们通过非常简单的问答形式，方便地初始化一个工程，完全不需要担心繁复的配置等等。简单来说，就是不仅仅能初始化工程，理论上能够初始化一切工程，包括，等等等等，只要你有一份能够运行的模板，就能够通过进行工程的初始化。相信对于大部分使用过VueJS的同学来说，vue-cli是他们非常熟悉的一个工具。借助vue-cli，我们通过非常简单的问答形式，方便地初始化一个vue工程，完全不需要...

AlienZHOU 2019-08-21 17:09 评论0 收藏0