一、前言
很多零基础的同学在学习前端开发的过程中,总是会迷失在繁杂的知识体系当中。
没有一个适合自己的学习路径,会导致学习效率低下,很多同学都是在较低的学习效率和不断的受挫中放弃学习的。
本手册专门为这些零基础的同学打造,手册从前端最基础的【网页重构】开始,通过平滑的学习曲线,为大家提供一个明确的学习路径,最终让您独立完成一个小型的学生管理系统。
为了让您达到最终的学习效果,本手册在最后几章添加了一些后端的知识,不过不用担心,这些只是一些入门级的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才可以使用。