前端入门到就业学习路线

国服第一摸鱼选手
363 阅读7分钟

前端入门到就业学习路线

五年前端开发经验，三个月的整理。前端入门到就业学习路线及资源，详细到每一个知识点。所有课程技术即满足企业当下用人标准，同时也满足个人以后技术提升。先上一张学习路线图，后面慢慢分解：

为什么学前端：

现在是一个信息科技时代，前端就是离我们最近的it技术。我们每天逛的网站、使用的app,那漂亮的界面、炫酷的交互都是前端完成的。

前端社区正在逐渐壮大，与此同时，前端工程师的岗位需求量也日渐增多，薪资一路攀升。前端容易入门，容易上手，容易看到实际效果，容易保持学习热情，容易短时间内就业。不管你是迷茫的在校毕业生，还是想换工作的社会青年，前端是你最好的选择。

学完前端入门到就业的所有课程，你可以获得的：

前言：

学习之前，我们需要把工具都装好。前端虽然不像后端那样需要配置各种环境，安装各种开发工具，但最基本的浏览器和代码编辑器还是需要的。

浏览器：推荐谷歌

代码编辑器：推荐vscode

软件包课程资源里面都有，markdown、git 、webStorm等需要的其它软件课程资源中也都有

一、HTML、 CSS 、 JavaScript基础

网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript，它们也是前端开发最核心的技术。

先上一张总的学习路线图，再列出所有详细的知识点。

1、HTML

HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。

课程章节大榄：

第一章：html语法、基本结构

html基本语法、结构介绍

第二章：htm常用标签

br、 p、 div 、span 等标签介绍，块元素和行内元素

第三章：图片（img）、超链接(a)

相对路径和绝对路径、图片格式、内部链接、锚点链接

第四章：表格(table)、表单(from)

表格基本结构、合并行rowspan 、合并列 colspan

from 、 input 、文本框text 、密码框password 、单选按钮 radio 、复选框 checkbox 、按钮button、 图片域image 、文本域 textarea file

第七章：网页布局实战

2、CSS

CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。

课程章节大榄：

第一章：css简介

css基本语法简介

第二章：css选择器

元素的id和class

第三章：css属性

  1. 字体相关：字体类型font-family 、字体大小 font-size、字体颜色color、字体粗细font-weight
  2. 背景相关：background-image、background-repeat、backgroung-position
  3. 文本相关：段落样式、font-variant属性、首行缩进text-indent、文本水平对齐text-align、行高erline-height、字间距letter-spacing 、词间距word-spacing
  4. 边框相关：border
  5. 列表相关：列表项符号list-style-type、自定义列表项符号list-style-image

第四章：div+css

盒模型、页面布局、定位postion 、浮动float

第五章：项目实战

静态页面项目实战，如何用前端技术实现设计稿

3、JavaScript基础

JavaScript是一门脚本语言。如果把网页比做一个人，那么HTML就是人的身体、css就是人用来装饰自己的衣服、js就是人的动作与行为了

课程章节大榄：

第一章：js基础教程

语法、注释、变量、数据类型

第二章：js语法详解

运算符、条件语句if--else、switch 循环语句for 、 while 跳转语句

第三章：js函数

函数定义、函数调用、带参函数、带返回值的函数、局部变量和全局变量

第四章：js异常处理

异常捕获

第四章：jsDOM对象

第五章：js事件详解

事件流、事件处理、事件对象

第六章：js内置对象

String字符串 、 Date日期对象 、Array 数组对象、Math对象

第七章：js浏览器对象

window、history、location 、screen、定时器setInterval()、setTimeout()

第八章：js面向对象

第九章：js正则表达式

二、CSS3、HTML5、html5+css3实战

这一趴内容是上一趴内容的升级，涉及到的知识点会更多。但大家不必过于纠结，了解即可。这么多的功能我自己都不能全部记住，只要大概有个印象，用到的时候百度一下就可以了

1、CSS3

第一章：css3选择器

属性选择器、结构伪类选择器、ui元素状态伪类选择器

第二章：css3文字与字体相关样式

文字阴影text-shadow、文字描边text-stroke、文本溢出text-overflow、嵌入字体@font-face

第三章：css3盒模型

第四章：css3背景与边框

线性渐变、边框圆角border-radius、图片边框border-image、边框阴影box-shadow

第五章：css3动画

transitions、animations

第六章：css3所有的布局属性

弹性盒模型介绍flex、多列属性详解、媒体查询、响应式布局实战

2、html5

第一章：语义化标签、属性

article、section、nav、aside、pubdate、header、footer、hgroup、address等

第二章：新增表单属性

form、formaction、 formmethod、 formenctype、 formtarget、 autofocus 、required、 labels、control、 placeholder等

第三章：音频、视频

音频视频播放、音频视频解码

第四章：html5拖放

拖放本地资源

第五章：canvas

第六章：file api

第七章：H5存储

localStroage 、sessionStoage

第八章：应用缓存与web workers

第九章：响应式布局

3、html5+css3实战

经典项目实战，让你巩固学过的所有知识点。

项目一：列表及切换

项目二：Tab标签及切换

项目三：交互动画

项目四：侧边栏固定

项目五：回到顶部

项目六：javascript瀑布流

三、高级javascript、es6、less

总的学习路线图内容太多，细小的知识点就不再列出。高级js是面试的重点，大家一定要着重学习。

四、Vue2.5入门到实战、Vue 进阶精讲

从vue基础知识讲起，再利用一个项目实战学习到的所有基础知识，再详细讲解Vue常用到的api。再学习vue-router、vuex高级知识，再讲解高级组件开发。循序渐进的让你从入门到精通。

new Vue实例上的属性

app.mount('#root') 、app.data、app.props、app.props、app.el、app.options、app.options、app.root===app、app.children、app.children、app.slots、app.scopedSlots、app.scopedSlots、app.refsapp.$isServer

Vue常用的api

set、set、nextTick、refs、refs、forceUpdate()

生命周期

beforeCreated()、created()、beforeMount()、mounted()、beforeUpadate()、beforeDestory() 和 destoryed()updated()

指令

v-html 、v-text 、v-bind：data 、：data、v-on：click 、 @click、v-for

、v-model

组件

全局组件定义、局部组件定义

常用功能

插槽slot、extends继承、renderFunction、keep-alive、mixins、directives、过滤器filters、vue动画transtion、watch和computed

vue-router

路由配置和路由钩子详讲、vue项目实现按需加载的

VueX

注册一个store、getters、mutations、actions、VueX Api、Vuex与localStorage、vuex-router-sync

五、react

react管理系统开发，从一个项目开始讲解react。

react基础知识讲解

生命周期、事件机制等

React Router 4

包含式路由与exact、独立路由：Switch 、 router传参等

Redux

Action的认识、Reducer的认识、Store的认识、Action创建函数、redux-thunk中间件的认识等

六、面试

面试是三分运气七分准备，除了技术栈的准备还有面试技巧的准备。前端基础面试技巧和前端高级面试技巧，助你进大厂

七、技术栈扩展

学完上面所有的内容进大厂是没有问题了，但为了考虑大家的技术栈成长，前端入门到就业学习路线还包括以下扩展的课程。

  1. webpack
  2. 小程序
  3. 微信公众号
  4. node.js
  5. 算法
  6. 设计模式
  7. 前端性能优化

\

前端入门到就业学习路线​market.m.taobao.com/app/idleFish-F2e/widle-taobao-rax/page-detail?wh_weex=true&wx_navbar_transparent=true&id=616774695863&ut_sk=1.XcpXkt5Ju%252FsDALCTKukKo94C_21407387_1587194066433.Copy.detail.616774695863.2259137883&forceFlush=1

前端学习--利用webpack4手把手带你搭建一个vue多页面应用

前端学习--利用webpack4手把手带你搭建一个vue多页面应用

利用webpack4一步步搭建一个vue的开发环境，会详细讲解webpack4中的知识点。本文篇幅比较长，建议跟着文章一起敲一遍代码，你会发现webpack4也不过如此。

所有的源码可以在github上获取

ddhujiang/webpack4-vue​github.com/ddhujiang/webpack4-vue

准备工作

新建文件夹webpack4-vue,初始化生成package.json文件,命令行会有一些小提示，一路回车就好了。

cnpm init     //初始化生成package.json文件

package.json，就是包管理的json文件，初始化长这样

解析：

npm

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。

cnpm

  • 淘宝团队做的国内镜像，因为npm的服务器位于国外可能会影响安装。淘宝镜像与官方同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
  • 安装：命令提示符执行npm install cnpm -g registry=https://registry.npm.taobao.org
  • cnpm -v 来测试是否成功安装

npm \ cnpm功能都一样,但一般我们都是用cnpm,因为下载更快。

安装webpack、webpack-cli

webpack4必须安装webpack-cli,可以全局安装，但我还是建议跟着项目走，那样不同的项目可以安装不同的版本。

cnpm i webpack webpack-cli -D

解析：

i 即install 的缩写

-g -S -D

  • -g：即--global全局安装。 将会安装在C：\ Users \ Administrator \ AppData \ Roaming \ npm，并且写入系统环境变量；
  • -S：即 --save，写入package.json的dependencies ,dependencies 是需要发布到生产环境的
  • -D：即--save-dev，写入package.json的devDependencies ,devDependencies 里面的插件只用于开发环境，不用于生产环境。

本文所有的插件、loader等安装都是通过这种格式，接下来所有需要安装我就不再一一列举了

多入口打包

新建如下文件

配置webpack.config.js文件

const path = require('path');
module.exports = {
    // 入口文件
    entry: {
        pc: path.join(__dirname, "/client/pc/index.js"),
        mobile: path.join(__dirname, "/client/mobile/index.js")
    },
    //打包输出文件
    output: {
        path: path.join(__dirname, "/dist"), //打包后的文件存放的地方
        filename: "js/[name]-[hash:6].js",           //打包后输出文件的文件名
    }
}

解析：

__dirname

__dirname`是node.js中的一个全局变量，它指向当前执行脚本所在的目录E:\github\webpack4-demo(这是我的目录)

path.join

path是node中自带的模块，通过const path = require('path');

path.join(path1，path2，path3.......)

作用：将路径片段使用特定的分隔符（window：\）连接起来形成路径，并规范化生成的路径。若任意一个路径片段类型错误，会报错。

filename

webpack会为每个生成的Chunk取一个名称，Chunk的名称和entry的配置有关：

  1. 如果entry是一个string或者array，就只会生成一个chunk，这个chunk的名称是main;
  2. 如果entry是一个object，就可能出现多个chunk，这时chunk的名称是object键值对里键的名称

然而，当通过多个入口起点(entry point)、代码拆分(code splitting)或各种插件(plugin)创建多个 bundle，应该使用以下一种替换方式，来赋予每个 bundle 一个唯一的名称……使用入口名称：

output:{
     filename: "[name].bundle.js"
}

使用内部 chunk id

output:{
    filename: "[id].bundle.js"
}

使用每次构建过程中，唯一的 hash 生成

output:{
filename: "[name].[hash].bundle.js"
}

使用基于每个 chunk 内容的 hash：

output:{
filename: "[chunkhash].bundle.js"
}

上面介绍的 id、name、hash、chunkhash等都是webpack内置变量，

id是唯一标示，不会重复，从0开始，

name 是模块名称，是你自己起的，在配置路由懒加载的时候可以自己命名

webpack.dev.js

我们的项目会运行在开发和生产两个环境，一般我们都会把webpack的配置分开。

新建webpack.dev.js用于开发环境打包，新建webpack.prod.js用于生产环境打包

webpack.dev.js

const merge = require('webpack-merge');  // 引入webpack-merge功能模块
const common = require('../webpack.config.js'); // 引入webpack.config.js

module.exports = merge(common, {   // 将webpack.config.js合并到当前文件
    devServer: {
        contentBase: "./dist", // 本地服务器所加载文件的目录
        port: "8018",   // 设置端口号为8018
        inline: true, // 文件修改后实时刷新
        historyApiFallback: true, //不跳转
        hot: true , // 热更新
        proxy: {
            '/': {
                target: 'http://localhost:8018', // 你项目的本地服务地址
                bypass: function(req, res, proxyOptions) {
                    const userAgent = req.headers['user-agent'];
                    if (req.headers.accept.indexOf('html') !== -1) {
                        // 根据访问终端返回模板
                        if (/mobile/i.test(userAgent) && !/iPad/i.test(userAgent)) {
                            return '/index.mobile.html';
                        }
                        return '/index.pc.html';
                    }
                },
            },
        },
    },
    plugins: [
    ]
});

解析：

webpack-merge用于合并webpack的配置文件

webpack-dev-server

devServer是用来提高开发效率的，不是用devServer来做打包的，它提供了一些配置项，可以用于改变devServer的默认行为，要配置devServer，除了可以在配置文件里通过devServer传入参数，还可以通过命令行传入参数。

注意！！！只有在通过webpack-dev-server启动webpack时，配置文件里的devServer才会生效，因为这些参数所对应的功能都是webpack-dev-server提供的，webpack本身并不认识devServer的配置项。

这样我们在本地打包完之后就能直接看到运行的效果了devServer作为webpack配置选项中的一项，以下是它的一些配置选项:

contentBase

设置服务器所读取文件的目录，当前我们设置为"./dist"

port

这个没什么说的了就是端口号，默认是8080，如果占用就换成8081或者1234，都可以

open

open 在devServer启动且第一次构建完成时，自动用我们的系统的默认浏览器打开网页

proxy

代理，解决开发环境的跨域问题

mmodule.exports = {
    devServer: {
        proxy: {
            '/api': 'http://localhost:3000'
        }
    }
};

请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/api/xxx, 例如 /api/user 现在会被代理到请求 http://localhost:3000/api/user

本文是用它根据不同的终端返回不同的首页页面。

webpack.prod.js

生产环境

const merge = require('webpack-merge');
const common = require('../webpack.config.js');
const {CleanWebpackPlugin} = require('clean-webpack-plugin'); // 引入CleanWebpackPlugin插件
​
module.exports = merge(common, { // 将webpack.common.js合并到当前文件
    plugins: [
        new CleanWebpackPlugin(),  // 所要清理的文件夹名称
    ]
})

CleanWebpackPlugin，每次打包前，清除上次打包生成的文件

package.json

我们可以在这个文件中编辑我们运行项目的命令

"scripts": {
    "build": "cross-env NODE_ENV=production webpack --config config/webpack.prod.js --mode production",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --config config/webpack.dev.js --mode development"
  },

解析:

当使用NODE_ENV =production来设置环境变量时，根据平台(windows、linux等)不一样会有一些差异,cross-env使得您可以使用单个命令，而不必担心为平台正确设置或使用环境变量

//cross-env 一样是需要安装的
cnpm install cross-env --save-dev

--mode

mode/--mode参数来表示是开发还是生产环境

现在：

cnpm run dev 可以运行并预览项目

cnpm run build 打包项目并发布上线

vue

现在我们已经实现了简单的打包，但对于项目开发肯定是不够的。我们还需要引入js的框架，对css也需要进行打包。

vue-loader

安装vue-loader

报错

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

是因为Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的,

const VueLoaderPlugin = require('vue-loader/lib/plugin');
 plugins: [
        new VueLoaderPlugin(),
        ]

css-loade

在项目中写入一些 css内容，需要css-loader vue-style-loader 进行处理

 { 
            //解析器的执行顺序是从下往上(先css-loader再vue-style-loader)
              test: /.css$/,
              use: [
                {
                    loader: MinCssExtractPlugin.loader,// 将处理后的CSS代码提取为独立的CSS文件
                },
                'vue-style-loader',
                'css-loader'
              ],
        },

Loaders需要单独安装并且需要在webpack.config.js中的modules配置项下进行配置，Loaders的配置包括以下几方面：

  • test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
  • loader：loader的名称（必须）
  • include/exclude：手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
  • options：为loaders提供额外的设置选项（可选）

less

直接写css会比较麻烦，一般我们都会使用一门css的扩展语言

安装less-loader less

大家千万不要忘记安装less

这时css和js是打包在一起的，如何进行css分离

提取css

报错，ReferenceError: document is not defined

因为style-loader和 mini-css-extract-plugin 冲突，去除掉style-loader即可(style-loader和vue-style-loader功能一样，.vue文件用vue-style-loader)

const MinCssExtractPlugin = require( "mini-css-extract-plugin" );   // 将css代码提取为独立文件的插件
 module:{
        rules:[{
            test: /.vue$/,
            loader: 'vue-loader',
        },
        { 
            //解析器的执行顺序是从下往上(先css-loader再vue-style-loader)
              test: /.css$/,
              use: [
                {
                    loader: MinCssExtractPlugin.loader,// 将处理后的CSS代码提取为独立的CSS文件
                },
                'css-loader'
              ],
        },
        {
            test: /.less$/,
            use: [
                {
                    loader: MinCssExtractPlugin.loader,
                },
                {
                    loader:'css-loader'
                },
                {
                    loader:'less-loader'
                }
                
            ],
        },
    ]
    },

使用babel转码

ES6的语法大多数浏览器依旧不支持,bable可以把ES6转码成ES5语法，这样我们就可以大胆的在项目中使用最新特性了

cnpm install babel-core babel-loader babel-preset-env babel-preset-stage-3 --save-dev

在项目根目录新建一个.babelrc文件

{
  "presets": [
    ["env", { "modules": false }],
    "stage-3"
  ]
}

webpack.config.js添加一个loader

{
    test: /.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/  
}
//exclude表示忽略node_modules文件夹下的文件，不用转码

报错

在配置webpack.config.js自动打包的时候,出现Error: Cannot find module '@babel/core'错误最初以为是babel-core没有安装上。重装了好几遍babel-core还是不行。对照以前的项目,发现babel-loader的版本不一样,之前的是@7.1.5版本,而现在是@8.0.0版本。

回退babel-loader的版本

npm uninstall babel-loader --save-dev
npm install babel-loader@7.1.5 --save-dev

官方默认babel-loader | babel 对应的版本需要一致: 即babel-loader需要搭配最新版本babel

两种解决方案:

  1. 回退低版本

npm install -D babel-loader@7 babel-core babel-preset-env

  1. 更新到最高版本:

npm install -D babel-loader @babel/core @babel/preset-env webpack

avatar
文章
阅读
粉丝