置顶 【vue社区】怎么学习前端开发?求推荐学习路线?
发布于 2 年前 作者 webdashen 1553 次浏览 最后一次编辑是 1 年前 来自 前端进阶

前端学习路线图推荐 最后更新时间:2020年4月2日22:32:44 未完待续

入门基础知识

  • 计算机基础
    • 接触过类似计算机入门书籍最佳
  • 使用电脑基础
    • 经常使用计算机,了解常见计算机组成
  • 网页使用基础

初级

初级入门级别的前端,可以构建静态页面,是第一步

html + css

html

  • 元素和标签
  • html骨架
  • 标题title
  • 段落p
  • div
  • 换行hr
  • span

css

  • 三大部分

    • 盒模型
    • 浮动
    • 定位
  • 盒模型

    • 标准盒模型
    • 怪异盒模型
    • box-sizing
  • 浮动

    • display:float
    • 清除浮动
  • 定位

    • 标准流概念
    • static 默认值,没有定位
    • relative 相对定位
    • absolute 绝对定位
    • fixed 固定定位
    • inherit

css3

  • CSS3新特性
    • CSS3选择器
    • 基本选择器
    • 属性选择器
    • 伪类选择器
    • nth选择器
    • el:first-child:选择属于父元素的首个子元素的每个element元素,注意ele为子元素
    • el:last-child:选择属于父元素的最后一个子元素的每个el元素,注意el为子元素
    • el:nth-last-child(n):匹配属于某元素下的第n个el子元素,从最后一个子元素开始计数
    • el:nth-child(n)
      • 选择某元素下的第n个el元素
      • n是一个简单的表达式,不能用其他的字母代替
      • 括号里还可以传odd和even两个关键字
      • odd: 单数元素(奇数)
      • even: 双数元素(偶数)

友情提示

奇偶数选取,挺好用的!

  • 否定选择器:not

  • 伪元素(也可以使用:)

  • CSS3边框与圆角

    • 圆角border-radius
    • 盒阴影box-shadow
    • CSS3背景与渐变
    • CSS3背景
    • background-image
    • background-cilp
    • background-origin
    • background-repeat
    • background-size
    • 复合属性background
  • CSS3渐变 线性渐变

  • background:linear-gradient(方向,开始颜色,结束颜色)
  • 是沿着一根轴线改变颜色,从起点到终点进行顺序渐变(从一边拉向另一边) 重复渐变
  • repeating-linear-gradient 径向渐变
  • background:radial-gradient(形状尺寸,开始颜色,结束颜色)
  • 从起点到终点,颜色从内向外进行圆形渐变
  • CSS3过渡

transition-property属性 transition-duration属性 transition-timing-function属性 transition-delay属性 transition复合属性

  • CSS3变换

2d变换

  • rotate()旋转
  • translate()平移
  • scale( )缩放
  • skew()扭曲/倾斜
  • 变换基点 3d变换
  • 开启3d空间transform-style: preserve-3d; 一般给父元素开启
  • 其余部分属性同2d变换

animation属性

  • animation-name:设置对象所应用的动画名称
  • animation-duration:设置对象动画的持续时间
  • animation-timing-function:设置对象动画的过渡类型
  • animation-delay:设置动画的延迟时间
  • animation-iteration-count:设置对象动画的循环次数
  • animation-direction:设置对象动画是否反向运动
  • animation-play-state:指定对象是否正在运行或已暂停
  • animation-fill-mode:设置动画结束后的状态
  • animation复合属性(不推荐使用 )
div {
  width:100px;
  height:100px;
  background:red;
  animation:myfirst 5s;
}
[@keyframes](/user/keyframes) myfirst {
  0%   {background:red;}
  25%  {background:yellow;}
  50%  {background:blue;}
  100% {background:green;}
}

JavaScript 基础

  • 变量
  • 表达式
  • 运算符
  • 数组和对象
  • 方法

webapi

  • DOM:
  • BOM:

jquery + ajax

  • 选择器

    • 选择器
    • 通用选择器
    • 标签选择器
    • id选择器
    • class选择器
    • id+class选择器
    • 后代选择器
    • 儿子选择器>
    • 相邻选择器+
    • 属性选择器
    • 伪类选择器
  • 事件机制

  • 网络请求ajax

    • jsonp

中级

nodejs + npm

  • nodejs基础
  • npm使用
    • cnpm
    • nrm
    • 私有npm
    • verdaccio

三大框架

vue

  • 入门基本应用
  • 基本命令
  • 基本api
  • 语法
  • .vue文件
  • cli+webpack
  • vue-router
  • vuex

react

angular

高级

前端工程化

前端组件化

  • 组件封装
  • 组件库
  • 私有npm

前端自动化

  • 初级自动化
    • nodejs 脚本
    • shell 脚本

前端模块化

  • commandJs
  • AMD
  • CMD
  • UMD
  • ES6 module

前端规划

前端微服务

源码部分

研究源码入门基础

  • gulp
  • rollup
  • nodejs server

vue 源码

  • 启动 npm 脚本
  • rollupjs
  • dev模式 - 调试源码

vue-router 源码

  • 插件install
  • base路由
  • hash路由
  • hashChange
  • history路由
  • pushState
  • routeMap
  • match
  • 导航钩子
  • updateRoute

axios 源码

babel

https://www.babeljs.cn/

webpack 高级

打包优化

  • 代码分割
  • gzip

第三方CDN

  • 配置CDN链接,webpack 配置 config.externals = {Vue: 'Vue'}

常见插件

webpack 进阶配置

webpack 插件 和 loader开发

  • 插件、hooks、tap、compilation

webpack 原理

1 回复

赞!!!

回到顶部