如果有说错了，请见谅。
此文章链接在知乎上：

前端学习路线（很长，建议收藏） - 有一天wm的文章 - 知乎
https://zhuanlan.zhihu.com/p/164701269

一、编辑器：

VSCode (推荐使用)

​

  1. WebStorm
  2. Atom
  3. Sublime

二、HTML

  • 常用标签
  • 表单
  • HTML

三、CSS

基本语法

布局（浮动float、定位position、盒模型、flex、grid/layout)

响应式布局

  1. viewport（用户网页的可视区域）
1
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  1. 流动布局（fluid grid）
  2. 媒体监听@media
1
2
3
4
5
@media only screen and (max-width: 500px) {
    .gridmenu {
         width:100%;
    }  
}

四、JS

基本语法

函数

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

标准对象

面向对象编程

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

ES6+

接口请求Ajax（XMLHTTPRequest的一个实例）/Fetch（基于promise实现的，也可以结合async/await）

五、版本管理工具Git

推荐使用软件（Tower)

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

工作流程

​https://pic1.zhimg.com/80/v2-4da51a165e7fbeba06f782eed69dd94b_720w.jpg

  • 创建仓库

git init

  • 基本操作

    git clone
    git add
    git diff
    git commit
    git rm
    git reset HEAD

  • 分支管理

    git branch (branchname)
    git branch (branchname)
    git merge

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

    hexo
    gatsby
    vuePress

六、Node(不用学太深)

包管理

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

  • yarn

  • npx

常用包

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

七、构建工具

自动化构建

  • npm script

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

  • gulp

  • 模块化打包

  • webpack(推荐)

  • Rollup

  • Snowpack

  • Parcel

八、CSS预处理

Sass(推荐）
​
PostCss
Stylus
Less

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

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

React(推荐）

  • Redux
  • Mobx
  • React-router

Vue（推荐）

  • Vuex
  • Vue-router

Angular

  • RxJS
  • NgRx

十、CSS框架

Antd(推荐)

Ant Design - 一套企业级 UI 设计语言和 React 组件库
​

Element UI（推荐）

​

Material UI

​

Bootstrap

​

semantic UI

​

十一、CSS优化方案

  • Styled Component(推荐)

  • ​

  • CSS Modules（推荐）

  • Styled JSX

十二、性能

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

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

RAIL模型

LightHouse指标

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

十三、数据可视化

  • ECharts(推荐)
  • AntV
  • HighChat

十四、移动端应用

React Native(推荐)

​

  • 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(阿里巴巴旗下的跨平台移动开发解决方案)

Flutter

十五、小程序

原生

  • 微信
  • 支付宝
  • 头条

跨端

  • Taro
  • uni-app
    ​