30 岁前端,半路出家 2 年.想问问前端 V 友

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1938 天前的主题，其中的信息可能已经有所发展或是发生改变。

30 岁了,压力骤增. 从设计行业转前端刚两年,前公司主要做 H5 活动页,小程序,算是一个广告外包公司. 做了两年页面仔.vue webpack 都是只知道皮毛,没有实际项目经验.

想提升自己建立自己的一套技术体系,又不知道从哪开始. 现在能想到的是 vue webpack node.js

学的有点茫然了想问问各位,有没有好的学习教程推荐. 比如:

mk 网的视频或者适合初学的书籍或者边学边实战的学习资料 (毕竟能看到成果有成就感..

感谢感谢.

想问问

webpack

Vue

边学边

21 条回复 • 2019-08-10 19:58:45 +08:00

wh1012023498

2019-08-09 00:51:11 +08:00

## 1

wh1012023498

2019-08-09 00:51:40 +08:00

不支持 md。。那我贴 md 你自己慢慢看了。。

wh1012023498

2019-08-09 00:51:58 +08:00

= = 心疼不已
身为一个 PHP。。我来讲讲怎么学前端好了。。只涉及 WEB(在我看来移动端 /桌面端也是前端。。)

体系化的讲
- 基础: 迈不过去的算法,数据结构，计算机网络，三大编程范式(OO,OP,FP)（只要是啪啪啪，写代码，这些都是基础）

- 编程规范 /语言：ECMASCRIPT/ JavaScript,CoffeeScript,TypeScript(说起 ES，= = 我怀疑起以前学的 ActionScript3.0)
+ ES 版本 3，5，6，7，8。。。可以了解下 https://github.com/tc39/ecma262
+ JavaScript https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
- 原型链（ JS 是基于原型链的 OO，另一种自然是大众所知基于类的 OO ）
- 事件循环机制
+ TypeScript http://www.typescriptlang.org/ (好评+10086)
+ CoffeeScript http://coffeescript.org/ (只用过 1，目前是 2，不过== 已经没落了。)

- Web 标记语言: HTML
+ HTML 标签
+ HTML5 规范

- CSS
+ CSS1/2/3
+ CSS 预处理语言：Less/Sass/Stylus/PostCSS

- 浏览器相关：
+ 浏览器行为
+ BOM/DOM
+ 浏览器渲染步骤

- 传输协议：当然是 HTTP 喽，听过 HTTP3 要出了。谷歌的 QUIC
+ HTTP 的各版本差异 1.0 1.1 2.0
+ SSL 隧道的建立
+ HTTP 的头含义与作用(= =重点)

- 工程化工具：WebPack/Babel/Gulp ,= = 自从 Node.js 出来，前端工程化跟花一样。
+ WebPack: 打包管理器，一切皆模块
- 常用配置项
- Loader
- Plugin
+ Babel: JS 预处理器，解决兼容性
+ Gulp: 任务管理器，Node.js 用的多点，，前端基本不用了

- 应用框架 /库：
+ Jquery : ssr 小达人，老当益壮
+ Angular: spa 三大框架之一，国内用的= = 似乎不多，刷版本狂魔
+ React: spa 三大框架之一，生态极佳，通吃 web/mobile/native。
+ Vue: spa 三大框架之一，火火火。。学习成本不高。
+ Meteor：跨端框架，知名，没用过不评价

= = 差不多这样，有缺漏，但是也够你学了

PHP 是世界上最好的语言！

OSF2E

2019-08-09 01:21:17 +08:00

试试利用已经掌握的东西去做一个小而精的“产品”，可以是个人主页或者网页控件一类的东西，突出视觉、交互、动画，设计出身比计算机专业出身的有优势，做的过程中查缺补漏。

不想局限于”展示性网页开发“相关工作的话，C/S 基础还是得了解一下的，若真想掌握 vue/webpack/nodejs 这些东西话，不学不行，当然这个是后话，上一步才是当前阶段的重点。

vue 或者类似的框架在有基础有经验的情况下，可以达到事半功倍的效果，基础或者经验不足的时候去接触这些东西，只会分散你的注意力，或者迷失在各种所谓“正确的开发姿势”一类的问题中，最终只能”画个瓢“。这里所谓的基础，指的是相对底层的 DOM/ES5/CSS 等语言类的工具，以及文档流模型、响应式设计、组件化设计等思想性质的东西，学好这些东西，学习框架的时候效率更高。

webpack 属于“辅助工具”，主要用来“提升开发效率”，什么时候需要提升效率？经过大量实践，有一套属于自己的开发流程，且自己能够清楚认识到哪些事务性的操作可以优化的时候，类似于 webpack 的工具就派上用场了。

最后总结一下，做前端，不要纠结技术栈对不对、好不好一类的问题，首要目标应当是走完一套完整的开发流程做出最终的“产品”，然后，通过大量实践不断优化，把这套流程整理成“理论（原理，思想，观念，概念）” —— 这正是所有前端框架或者工具诞生的标准流程，越成熟的框架或者工具，其“理论“更复杂更健全，换句话说，判断一个前端框架或者工具好不好，看它的文档中“理论”部分讲的如何即可得出结论。

至少我个人认为，好的框架或者工具，不会上来就让你啃用例（代码），而是让你学习并接受它的“理论”。

随便举两个例子，react 文档有一个章节叫作 MAIN CONCEPTS，webpack 有一个章节叫 Concepts，均放在文档比较靠前的位置，且毫不吝啬笔墨。

meszyouh

2019-08-09 06:27:23 +08:00 via Android

既然你曾是设计师，可以看看视觉效果+交互动画这个方向。

fhsan

2019-08-09 07:43:40 +08:00

先去看看培训的视频，建立基础的体系，然后网上找点资料学习。

leafre

2019-08-09 08:47:14 +08:00

都做了两年了，还没找到自学方法，估计不适合这行

hirasawayui

2019-08-09 09:20:06 +08:00

我还以为你是出家当和尚了。进来一看，没意思

7Moon

2019-08-09 11:26:15 +08:00

@wh1012023498 感谢. 我知道哪些东西需要学习.精力有限只能学同类里的一种.（比如框架就选 vue 这样）
我不太知道的是除了书本。有哪些网络上的资源值得学习（尤其是视频学习，有人讲解可以让我理解更清楚点.）
@OSF2E 感谢你的思路.
@meszyouh 感谢。这个方向有想过，但是不知道这个方向以后职业规划怎么办
@fhsan 谢谢。现在就是这么做的。茫茫互联网，学习的资料不知道好坏

7Moon

2019-08-09 11:27:09 +08:00

@leafre 虽然不适合，还是得前行不是嘛.

twohappy

2019-08-09 11:53:18 +08:00

90 年的？
比如搞一个便宜点的服务器，不想新学语言的话，就 node 搭一个应用。
有啥新东西，都动手放上去。前端也好，服务端也好。再弄个 Electron，RN 再搞一搞
就可以去小公司当技术总监了
233

twohappy

2019-08-09 12:03:09 +08:00

然后跟前面提到的类似，先给自己提一个最简化的需求。然后把它实现。
然后把这个中间的过程写笔记记下来。
比如这两天我看了看 Koa，发现在 17 年看的时候，去理解它是个啥东西还是有点懵逼的。现在就很简单。
为啥呢.. 假如这是个 RPG 游戏的话，之前我走别的任务线把服务端地图点亮了一些了。
回头看，各种东西就很好理解。
但是不管你路线是啥，点亮地图、点技能树的过程肯定是摸黑前行的。

一脸懵逼才是常态。要坚持摸，才能过河。
至于说页面仔做半年应该就有空自己搞东搞西的提高了，两年还没开始，要反省一下了。