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

最近在知乎看到一个问题,原问题如下:

“ 很奇怪,为什么现在能找到自己手动创建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的报错:

这个问题的解决方式你在百度上暂时还搜不到答案,只能是依靠平时阅读官方文档、技术社区等寻找解决之道。 后来经过排查你会发现是由于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的方式进行服务端渲染
  • 正式环境打包以及异步模块打包优化

原文发布于微信公众号 - 闰土大叔(running_hacker)

原文发表时间:2018-04-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏noteless

5.计算机发展个人理解-电路终究是电路 软件如何控制硬件 代码如何操作硬件 硬件是怎么执行代码 代码如何执行 软件与硬件如何交互 计算机思维 抽象 封装 规范 屏蔽 协议分层

你可能会想到,软件是用高级语言编写的,高级语言被翻译成汇编语言,汇编语言会翻译成机器可以是别的机器语言

1261
来自专栏大数据

数据挖掘敲门砖-Python爬虫入门

WHAT ? 数据挖掘是一门综合的技术,随着Ai的兴起,在国内的需求日渐增大。 数据挖掘的职业方向通常有三个,顺便概要地提一下所需的技能(不仅于此) 数据分析方...

2449
来自专栏落影的专栏

三年程序员的日常

前言 汇总平时的一些思考。 正文 如何快速上手一个庞大的工程? 这个问题,我已经经历过多次,现在的方式: 1、整理基本框架,研读代码规范,熟悉团队开发习...

4289
来自专栏张善友的专栏

Web 上构建MDI 应用程序---Prototype Window Class

      今晚在网上看到一个非常酷的JS框架Prototype Window Class。Web开发者通过Prototype Window Class便可以轻...

2079
来自专栏PPV课数据科学社区

编程 | 用python获取天气数据,并作定时播报

思路 1.调用和风天气的API,获取天气数据 2.用百度语音API,将天气数据合成语音 3.用树莓派每天早上定时播报天气(定时任务crontab + Pytho...

6438
来自专栏小鄧子的技术博客专栏

Easy Clean architecture on Android

在我这几年的学习和成长中,深刻的意识到搭建一个Android应用架构是件非常痛苦的事,它不仅要满足不断增长的业务需求,还要保证架构自身的整洁,这让事情变得非常具...

853
来自专栏恒思考

像Django学习写程序

Django是一个python的web的快速开发框架,Django也是我接触的第一个web框架。这个框架是一个比较重的框架,有些人对这件事情比较诟病,但是开发起...

1895
来自专栏SDNLAB

OpenDaylight发布氧版本(Oxygen):不断提高的成熟度和生产稳定性

3977
来自专栏腾讯移动品质中心TMQ的专栏

【腾讯TMQ】测试分析?就这么简单!

在软件测试过程中,以最小的成本将软件质量风险降至最低,这就是精准测试。宏观上,测试分析是响应精准测试的实践,贯穿整个测试过程,并对整个测试过程起指导作用。

4400
来自专栏智能大石头

大数据分析中Redis怎么做到220万ops

大数据时代,海量数据分析就像吃饭一样,成为了我们每天的工作。为了更好的为公司提供运营决策,各种抖机灵甚至异想天开的想法都会紧跟着接踵而来!业务多变,决定了必须每...

5156

扫码关注云+社区

领取腾讯云代金券