前端学习路线（基本）_npm相当于sourcetree吗-CSDN博客

一、编辑器：

VSCode (推荐使用)

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

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

WebStorm
Atom
Sublime

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

二、HTML

常用标签
表单
HTML

HTML 教程 | 菜鸟教程

三、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 教程 | 菜鸟教程

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

尚硅谷JS 入门视频 B站

基本语法
函数

标准对象
面向对象编程

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

六、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/learn正在上传…重新上传取消

七天学会NodeJSnqdeng.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/正在上传…重新上传取消

七、构建工具

自动化构建

npm script

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

npm scripts 使用指南

八、CSS预处理

Sass(推荐）

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

PostCss
Stylus
Less

转载

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

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

React(推荐）

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

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

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

Redux(redux-toolkit)
React Hooks
Mobx
React-router

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

Vue（推荐）

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

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

Vuex
Vue-router

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

Angular

RxJS （异步优化）
NgRx

十、CSS框架

Antd(推荐)

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

Element UI（推荐）

The world's most popular Vue UI frameworkelement.eleme.cn/

Material UI

Bootstrap

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

semantic UI

Semantic UIsemantic-ui.com/正在上传…重新上传取消

vant (移动端）

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

Mobile UI

Mobile UI Components built on Vueyouzan.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(
  <Wrapper>
    <Button>Hello World</Button>
  </Wrapper>
);

CSS Modules（推荐）

Styled JSX

十二、性能

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

性能指标

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

RAIL模型

人类身份验证 - SegmentFaultsegmentfault.com/a/1190000010512899

LightHouse指标

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

DevTools
PWA

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

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

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

gzip

https://segmentfault.com/a/1190000012571492segmentfault.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

AntVantv.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