前端学习路线（基本）

一、编辑器：

1. VSCode (推荐使用)

技术胖-VSCode常用插件和技巧教程​www.jspang.com/detailed?id=60正在上传…重新上传取消

Visual Studio Code - Code Editing. Redefined​code.visualstudio.com/正在上传…重新上传取消

1. WebStorm
2. Atom
3. Sublime

---

黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili​www.bilibili.com/video/BV14J4114768?from=search&seid=7000402704669507889正在上传…重新上传取消

---

二、HTML

• 常用标签
• 表单
• HTML

HTML 教程 | 菜鸟教程

三、CSS

• 基本语法
• 布局（浮动float、定位position、盒模型、flex、grid/layout)
• 响应式布局
• viewport（用户网页的可视区域）

• 流动布局（fluid grid）
• 媒体监听@media

@media only screen and (max-width: 500px) {
    .gridmenu {
         width:100%;
    }  
}

• 移动端适配

CSS 教程 | 菜鸟教程

---

四、JS(特别重要，将时间多花点在JS上)

尚硅谷JS 入门 视频 B站

• 基本语法
• 函数

1. 函数定义和调用
2. 变量作用域与解构赋值
3. 方法
4. 高阶函数
5. 闭包
6. 箭头函数
7. generator

• 标准对象
• 面向对象编程

1. 创建对象
2. 原型继承
3. class继承

• ES6+
• this、call、apply
• 异步（Ajax、promise、async/await）
• 设计模式（推荐看书《JavaScript设计模式与开发实践》）,将js都学完再来看设计模式

现代 JavaScript 教程​zh.javascript.info/正在上传…重新上传取消

ES6 入门教程​es6.ruanyifeng.com/

JavaScript 变量 | 菜鸟教程​www.runoob.com/js/js-variables.html

JavaScript教程​www.liaoxuefeng.com/wiki/1022910821149312正在上传…重新上传取消

目前很多公司都使用了Typescript，面试的时候大都会问你会不会ts,所以伙伴们也要学习起来了。

原始数据类型 · TypeScript 入门教程​ts.xcatliu.com/basics/primitive-data-types.html

五、版本管理工具Git

推荐使用软件（Tower/sourcetree)

快捷方便，commit 、push、 pull、 checkout 、merge、 restore、 rename等等，一键搞定

https://github.com/​github.com/

2020最新Git教程（2小时从入门到精通）_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili​www.bilibili.com/video/BV1Mf4y117f3?from=search&seid=10987880512517365800正在上传…重新上传取消

https://backlog.com/git-tutorial/cn/intro/intro1_1.html​backlog.com/git-tutorial/cn/intro/intro1_1.html正在上传…重新上传取消

• 工作流程

• 创建仓库

git init

• 基本操作

1. git clone
2. git add
3. git diff
4. git commit
5. git rm
6. git reset HEAD

• 分支管理

1. git branch (branchname)
2. git merge
3. git rebase (branchname)

这是本人记录的比较常用的一些指令

Git 指令 牢记 · 语雀

• 使用github搭建个人博客，可用以下

1. hexo
2. gatsby
3. vuePress

Git教程​www.liaoxuefeng.com/wiki/896043488029600正在上传…重新上传取消

很多公司都实行Code Review， 排查问题，提高代码质量、统一风格，团队合作建议实施code review，可以多参考借鉴成熟并且有效的code review规范。

---

六、Node(不用学太深)

包管理

• npm （相当于手机里的应用商店，可以下载很多软件包）

1. npm install  (安装单个软件包)
2. npm update  (更新软件包)
3. npm run  (运行任务)
4. npm uninstall (卸载 npm 软件包)
5. -g标志可以执行全局安装
6. -S就是--save的简写
7. -D就是--save-dev 这样安装的包的名称及版本号就会存在package.json的devDependencies这个里面，而--save会将包的名称及版本号放在dependencies里面。

• yarn
• npx

常用包

• 文件读写fs
• 路径查找path
• 网络http

Node.js 简介​nodejs.cn/learn正在上传…重新上传取消

七天学会NodeJS​nqdeng.github.io/7-days-nodejs/

---

相关：：：

express.js (node.js 的优化版）

Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档​www.expressjs.com.cn/

koa (基于node.js的web开发框架)

Koa (koajs) -- 基于 Node.js 平台的下一代 web 开发框架​koa.bootcss.com/正在上传…重新上传取消

七、构建工具

自动化构建

1. npm script

npm 允许在 package.json 文件里面，使用 scripts 字段定义脚本命令

npm scripts 使用指南

相关：：：：

• gulp
• 模块化打包
• webpack(推荐)

概念 | webpack 中文网​www.webpackjs.com/concepts/

ruanyf/webpack-demos​github.com/ruanyf/webpack-demos正在上传…重新上传取消

• Vite (推荐)

Vite 官方中文文档​cn.vitejs.dev/

• Rollup
• Snowpack
• Parcel
• grunt

Grunt: The JavaScript 世界的构建工具 - Grunt中文​grunt.docschina.org/正在上传…重新上传取消

---

八、CSS预处理

• Sass(推荐）

Sass教程 Sass中文文档 | Sass中文网​www.sass.hk/docs/

• PostCss
• Stylus
• Less

转载

CSS 预处理器 sass,less,stylus优缺点

---

九、JS框架(没有好与不好，只有适不适合)

• React(推荐）

官方文档 一定一定 要仔细的 从头到尾 多看 几遍 ！！！！

开始 – React​react.docschina.org/docs/getting-started.html正在上传…重新上传取消

技术胖-React学习路线-按此路线学习顺畅无比​jspang.com/detailed?id=56正在上传…重新上传取消

1. Redux(redux-toolkit)
2. React Hooks
3. Mobx
4. React-router

想学习源码的
1. React技术揭秘 2.  Under-the-hood-ReactJS 3.  Build your own React

• Vue（推荐）

介绍 — Vue.js​cn.vuejs.org/v2/guide/正在上传…重新上传取消

技术胖-Vue2.x学习路线-按次路线学习顺畅无比​jspang.com/detailed?id=57正在上传…重新上传取消

1. Vuex
2. Vue-router

学习源码 Vue源码系列-Vue中文社区

• Angular

1. RxJS （异步优化）
2. NgRx

---

十、CSS框架

• Antd(推荐)

Ant Design - 一套企业级 UI 设计语言和 React 组件库​ant.design/index-cn正在上传…重新上传取消

• Element UI（推荐）

The world's most popular Vue UI framework​element.eleme.cn/

• Material UI

• Bootstrap

Bootstrap中文网​www.bootcss.com/正在上传…重新上传取消

• semantic UI

Semantic UI​semantic-ui.com/正在上传…重新上传取消

vant (移动端）

https://youzan.github.io/vant/#/zh-CN/​youzan.github.io/vant/#/zh-CN/

Mobile UI

Mobile UI Components built on Vue​youzan.github.io/vant/#/zh-CN/

目前 Vant 官方提供了Vue 版本和微信小程序版本，并由社区团队维护React 版本。

---

十一、CSS优化方案

• Styled-Component(推荐)

styled-components

import styled from 'styled-components';
const Wrapper = styled.section`
  margin: 0 auto;
  width: 300px;
  text-align: center;
`;
const Button = styled.button`
  width: 100px;
  color: white;
  background: skyblue;
`;
render(
  
    Hello World
  
);

• CSS Modules（推荐）

Styled JSX

• emotion
• glamorous

---

十二、性能

白屏、卡顿、页面加载失败、页面跳转慢、图片空窗、崩溃、耗电等问题一直都是用户频繁舆情反馈的痛点。

• 性能指标

1. 白屏时间
2. 首屏时间
3. 用户可操作时间
4. 页面总下载时间
5. 请求数量

• RAIL模型

人类身份验证 - SegmentFault​segmentfault.com/a/1190000010512899

• LightHouse指标

玩转Lighthouse-全方位提高网站各项指标的实践_辰辰沉沉大辰沉-CSDN博客_lighthouse报告​blog.csdn.net/Napoleonxxx/article/details/85077418正在上传…重新上传取消

• DevTools
• PWA

2019前端必会黑科技之PWA​www.jianshu.com/p/098af61bbe04正在上传…重新上传取消

https://www.bilibili.com/video/BV1wt411E7QD?from=search&seid=7258704753153037754​www.bilibili.com/video/BV1wt411E7QD?from=search&seid=7258704753153037754

• Service Worker
• 骨架屏（骨架屏(Skeleton Screen)是指在页面数据加载完成前，先给用户展示出页面的大致结构（灰色占位图），在拿到接口数据后渲染出实际页面内容然后替换掉。）

• gzip

https://segmentfault.com/a/1190000012571492​segmentfault.com/a/1190000012571492正在上传…重新上传取消

前端性能优化之gzip_个人文章 - SegmentFault 思否

前端性能优化之gzip_个人文章 - SegmentFault 思否​segmentfault.com/a/1190000012571492正在上传…重新上传取消

• 懒加载和预加载
• 包分析工具（构建代码之后，明白到底是什么占用了那么多空间？可以使用 webpack-bundle-analyzer）
• 防抖、节流（优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。）

---

十三、数据可视化

• ECharts(推荐)

实例

Examples - Apache ECharts (incubating)​echarts.apache.org/examples/zh/index.html

Apache ECharts (incubating)​echarts.apache.org/zh/index.html正在上传…重新上传取消

• AntV

AntV​antv.vision/zh正在上传…重新上传取消

• HighChat
• ucharts(小程序)

---

十四、移动端应用（Android Studio / XCode）

• React Native(推荐)

搭建开发环境 · React Native 中文网​reactnative.cn/docs/getting-started正在上传…重新上传取消

React Native 插件汇总：

• react-native-linear-gradient 颜色渐变处理
• react-native-login 视频界面登录
• react-native-keyboard-aware-scroll-view 键盘显示处理
• react-native-popup-dialog 弹窗
• react-native-dropdownalert 一种非常漂亮的alert弹窗方式，从状态栏往下弹窗；
• react-native-simple-radio-button 单选按钮；
• react-native-swiper
• react-native-macos macos桌面应用
• react-native-wechat 集成微信相关SDK
• react-native-modalbox 模态弹窗
• react-native-touch-id 指纹登录
• react-native-prompt 可输入文字的弹窗
• react-native-sqlite-storage sqlite数据库存储
• react-native-permissions 权限检查
• react-native-progress-hud loading圈
• react-native-snackbar 类似toast的弹窗模式
• react-native-qrcode-svg 二维码生产工具
• native-base UI组件
• react-native-busy-indicator loading圈
• react-native-fit-image 图片展示优化
• react-native-timer 定时器管理
• react-native-scrollable-tab-view 可以左右滑动的tab
• react-native-zip-archive 解压工具
• react-native-xml2js
• react-native-spinkit 好看的loading圈
• react-native-interactable 有很强交互效果的table视图
• react-native-pull-to-refresh 下拉刷新效果
• react-native-deck-swiper 不错的swiper效果
• react-native-prefix-picker select效果
• react-native-gesture-helper 手势 向上还是向下 还是向左
• react-native-drawer-layout 抽屉效果
• react-native-sortable-listview 可拖拽排序的列表视图
• react-native-progress 进度条 长方形 圆形
• react-native-splash-screen 启动屏处理
• react-native-masked-text 指定格式的输入框
• react-native-keyboard-manager 针对IOS 键盘遮挡的问题 俺可以这么用android:windowSoftInputMode="adjustResize"
• react-native-beacons-manager 蓝牙处理
• react-native-fetch-blob 文件获取
• react-native-popup-menu 弹出菜单
• react-native-pathjs-charts 图表
• react-native-dates 日历日期选择工具
• react-native-calendar-strip 一种简单的日历处理
• react-native-simple-markdown 简单的markdown文本编辑器
• react-native-image-progress 进度条
• react-native-img-cache 图片缓存技术
• rn-placeholder 在展示具体的文字和图片之前有个加载样式处理
• react-native-pie-chart 饼状图
• react-native-maps 地图
• react-native-loading-overlay loading圈加载遮罩
• react-native-progress 圆形进度条 react-native 圆形进度条
• react-native-modal 弹窗插件 react-native-modal
• react-native-extra-dimensions-android 安卓水滴屏获取屏幕高度 Sunhat/react-native-extra-dimensions-android

• Weex(阿里巴巴旗下的跨平台移动开发解决方案)

技术胖的WEEX入门到实战视频教程_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili​www.bilibili.com/video/BV1Wx411s7PC?from=search&seid=7952335917735607106正在上传…重新上传取消

• Flutter

起步:安装Flutter - Flutter中文网​flutterchina.club/get-started/install/正在上传…重新上传取消

技术胖-Flutter学习路线-按次路线学习顺畅无比​jspang.com/detailed?id=58正在上传…重新上传取消

---

十五、小程序

原生

1) 微信

微信开放文档​developers.weixin.qq.com/miniprogram/dev/framework/

2)支付宝

支付宝开放平台文档​opendocs.alipay.com/mini/developer

3)头条

跨端

• Taro

Taro 介绍 | Taro 文档​taro-docs.jd.com/taro/docs/README/index.html

基于 Taro 框架开发的多端 UI 组件库:

Taro UI | O2Team​taro-ui.jd.com/#/docs/introduction

• uni-app

uni-app官网​uniapp.dcloud.io/

扩展组件市场：

DCloud 插件市场​ext.dcloud.net.cn/正在上传…重新上传取消

十六：桌面开发

Electron （推荐）

Electron | Build cross-platform desktop apps with JavaScript, HTML, and CSS.​www.electronjs.org/

十七：扩展学习

• rxjs

RxJS 中文文档​cn.rx.js.org/正在上传…重新上传取消

• JavaScript Promise迷你书:

JavaScript Promise迷你书（中文版）

• 正则表达式：

https://github.com/cdoco/learn-regex-zh​github.com/cdoco/learn-regex-zh

---

十八、代码检查

解决代码质量问题！

eslint(自定义 ESLint 规则，让代码持续美丽)

ESLint - Pluggable JavaScript linter​cn.eslint.org/正在上传…重新上传取消

stylelint:

https://stylelint.docschina.org/​stylelint.docschina.org/

stylelint

https://stylelint.docschina.org/​stylelint.docschina.org/

---

十九、调试工具

jest

Mocha

二十：前端周刊

Hello from React Status | React Status​docschina.org/weekly/react/正在上传…重新上传取消

奇舞周刊

https://github.com/ascoders/weekly?utm_source=gold_browser_extension​github.com/ascoders/weekly?utm_source=gold_browser_extension

早早鸟

早早鸟日刊 · 语雀​www.yuque.com/zaotalk/worm正在上传…重新上传取消

二十一：可以逛逛，我收集的好用网站

前端好用网站推荐34 赞同 · 0 评论文章

建议勤记笔记，多复习，多积累，温故而知新。