Web前端学习 第1章 概述

一、前言

很多零基础的同学在学习前端开发的过程中，总是会迷失在繁杂的知识体系当中。

没有一个适合自己的学习路径，会导致学习效率低下，很多同学都是在较低的学习效率和不断的受挫中放弃学习的。

本手册专门为这些零基础的同学打造，手册从前端最基础的【网页重构】开始，通过平滑的学习曲线，为大家提供一个明确的学习路径，最终让您独立完成一个小型的学生管理系统。

为了让您达到最终的学习效果，本手册在最后几章添加了一些后端的知识，不过不用担心，这些只是一些入门级的node和数据库知识，内容简单易懂，绝对不会影响同学们的前端开发学习体验。

二、关于学习内容的说明

为什么选择Vue？

前端的三大框架（React，Angular，Vue）是当前前端开发工程师必须掌握的技能，对于初学者来说，选择一个适合自己的框架是非常重要的，很多初学者会在框架选择上浪费自己宝贵的学习时间。这里针对国内行情，强烈推荐初学者从Vue学起，主要原因如下：

相对于React和Angular，国内使用Vue的公司较多，除非您已经有了自己心仪的公司，而且那家公司并不使用Vue。否则，从就业的角度，Vue是您最好的选择。

Vue相对于React和Angular，对前端初学者更友好，Vue相对于Angular要更容易入手，而React的生态体系对于新手也是一项艰巨的挑战。再有，Vue的中文文档相当完善，对于抵触英文资料的新手同样也是一份福利。

为什么要学后台？

很重要的一点是：了解后台的前端工程师，在就业岗位上更有竞争力。

本手册的后台相关内容使用的是Egg框架和MySQL数据库，主要考虑的是以下两点：

语言统一，所有任务用JavaScript前后台都可以完成。

Egg入门简单、文档齐全，对新手十分友好。

三、开发工具

开始学习之前，需要先安装开发工具。这里推荐使用vscode编辑器和chrome浏览器，下载地址如下所示：

vscode编辑器

整套教程的所有学习内容都推荐使用vscode进行开发，这是一个功能强大，又轻便的免费软件。

chrome浏览器

前端新手不推荐处理任何浏览器兼容问题，只要一个浏览器重头学到尾就可以了，这里推荐使用chrome浏览器。

chrome浏览器下载地址

把前端知识体系整体学习之后，再去专项查阅一些浏览器兼容问题，这样的学习效率更高。

Vscode安装教程

vscode官网

进入官网后，点击右上角的Download按钮

之后会进入到这样的一个页面，是根据电脑的系统选择安装包的，如果你是苹果电脑那么直接点击右面的Mac即可;如果是windows系统电脑，根据你电脑系统是32位还是64位选择安装包,32位系统就点击32bit，64位系统就点击64bit。推荐选择System Installer

下载好安装包后直接一直点击Next即可。

安装完成之后，推荐下载几个常用的插件：

open in browser：在HTML文件之上点击右键，可以用默认浏览器预览网页。

Markdown Preview Enhanced：格式化和预览md文件，还可以把md格式文件导出为网页（推荐初学者使用md格式制作学习笔记）。

Vetur：Vue项目开发必备插件。

Vscode插件的安装教程

打开Vscode编辑后，点击左下角的图标，之后上面会出现一个搜索框，在搜索框中输入你想要使用的插件，然后点击install就可以了，下载后的插件，需要重启Vscode才可以使用。