前端学习路线

XXXWeii大约 11 分钟约 3271 字...

一、编辑器：

VSCode (推荐使用)

Visual Studio Code - Code Editing. Redefinedcode.visualstudio.com/open in new window

2.WebStorm

3.Atom

4.Sublime

黑马程序员 pink 老师前端入门教程，零基础必看的 h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibiliwww.bilibili.com/video/BV14J4114768?from=search&seid=7000402704669507889open in new window

二、HTML

常用标签
表单
HTM

HTML 教程 | 菜鸟教程open in new window

三、CSS

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

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

移动端适配

CSS 教程 | 菜鸟教程open in new window

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

尚硅谷 JS 入门视频 B 站open in new window

基本语法
函数

标准对象
面向对象编程

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

现代 JavaScript 教程 zh.javascript.info/open in new window

ES6 入门教程 es6.ruanyifeng.com/open in new window

JavaScript 变量 | 菜鸟教程 www.runoob.com/js/js-variables.htmlopen in new window

JavaScript 教程 www.liaoxuefeng.com/wiki/1022910821149312open in new window

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

原始数据类型 · TypeScript 入门教程 ts.xcatliu.com/basics/primitive-data-types.htmlopen in new window

在你学习完 HTML+CSS+JS 后，还没有学框架（react、vue、angular），但是又想练练手，做些小 demo，此时有一个开源库会适合你：50 个 demoopen in new window ，当然工作了或者学完框架后的小伙伴如果感觉基础没有学好，也可以回来练练这个。

五、版本管理工具 Git

六、Node(不用学太深)

包管理

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

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

yarn
npx

常用包

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

Node.js 简介 nodejs.cn/learnopen in new window

七天学会 NodeJSnqdeng.github.io/7-days-nodejs/open in new window

相关

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

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

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

Koa (koajs) -- 基于 Node.js 平台的下一代 web 开发框架 koa.bootcss.com/open in new window

七、构建工具

自动化构建

npm script

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

npm scripts 使用指南open in new window

相关

gulp
模块化打包
webpack(推荐)

概念 | webpack 中文网 www.webpackjs.com/concepts/open in new window

ruanyf/webpack-demosgithub.com/ruanyf/webpack-demosopen in new window

Vite (推荐)

Vite 官方中文文档 cn.vitejs.dev/open in new window

Rollup
Snowpack
Parcel
grunt

Grunt: The JavaScript 世界的构建工具 - Grunt 中文 grunt.docschina.org/open in new window

八、CSS 预处理

Sass(推荐）

Sass 教程 Sass 中文文档 | Sass 中文网 www.sass.hk/docs/open in new window

PostCss
Stylus
Less

转载

CSS 预处理器 sass,less,stylus 优缺点open in new window

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

React(推荐）

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

开始 – Reactreact.docschina.org/docs/getting-started.htmlopen in new window

技术胖-React 学习路线-按此路线学习顺畅无比 jspang.com/detailed?id=56!open in new window

Reduxopen in new window(redux-toolkitopen in new window)
React Hooksopen in new window
Mobx
React-router

想学习源码的 1.React 技术揭秘open in new window 2. Under-the-hood-ReactJSopen in new window 3. Build your own Reactopen in new window

Vue（推荐）

https://cn.vuejs.org/ open in new window

Vuex
Vue-router

学习源码Vue 源码系列-Vue 中文社区open in new window

Angular

RxJS （异步优化）
NgRx

十、CSS 框架

Antd(推荐)
Ant Design - 一套企业级 UI 设计语言和 React 组件库 ant.design/index-cnopen in new window
Element UI（推荐）
The world's most popular Vue UI frameworkelement.eleme.cn/open in new window
Material UI
Material-UI: A popular React UI frameworkmaterial-ui.com/open in new window
Bootstrap

Bootstrap 中文网 www.bootcss.com/)open in new window

semantic UI

Semantic UIsemantic-ui.com/open in new window

vant (移动端）

https://youzan.github.io/vant/#/zh-CN/youzan.github.io/vant/#/zh-CN/open in new window

Mobile UI

Mobile UI Components built on Vueyouzan.github.io/vant/#/zh-CN/open in new window

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

十一、CSS 优化方案

Styled-Component(推荐)

styled-componentsopen in new window

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(
  <Wrapper>
    <Button>Hello World</Button>
  </Wrapper>
);

CSS Modules（推荐）

Styled JSX

十二、性能

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

性能指标

白屏时间
首屏时间
用户可操作时间
页面总下载时间
请求数量

RAIL 模型

人类身份验证 - SegmentFaultsegmentfault.com/a/1190000010512899open in new window

LightHouse 指标

玩转 Lighthouse-全方位提高网站各项指标的实践_辰辰沉沉大辰沉-CSDN 博客_lighthouse 报告 blog.csdn.net/Napoleonxxx/article/details/85077418open in new window

DevTools
PWA

2019 前端必会黑科技之 PWAwww.jianshu.com/p/098af61bbe04open in new window

https://www.bilibili.com/video/BV1wt411E7QD?from=search&seid=7258704753153037754www.bilibili.com/video/BV1wt411E7QD?from=search&seid=7258704753153037754open in new window

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

gzip

https://segmentfault.com/a/1190000012571492segmentfault.com/a/1190000012571492open in new window

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

前端性能优化之 gzip_个人文章 - SegmentFault 思否 segmentfault.com/a/1190000012571492open in new window

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

十三、数据可视化

ECharts(推荐)

实例

Examples - Apache ECharts (incubating)echarts.apache.org/examples/zh/index.htmlopen in new window

Apache ECharts (incubating)echarts.apache.org/zh/index.htmlopen in new window

AntV

AntVantv.vision/zhopen in new window

HighChat
ucharts(小程序)

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

React Native(推荐)

搭建开发环境 · React Native 中文网 reactnative.cn/docs/getting-startedopen in new window

*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 圆形进度条open in new window
react-native-modal 弹窗插件 react-native-modalopen in new window
react-native-extra-dimensions-android 安卓水滴屏获取屏幕高度 Sunhat/react-native-extra-dimensions-androidopen in new window
Weex(阿里巴巴旗下的跨平台移动开发解决方案)