1_01李婉玲_搭建前端开发环境_0921

在这里插入图片描述
第一部分：前端开发环境搭建

在过去的几年时间里，出现了许多全新的网页应用程序，不过，由于应用程序的功能越来越丰富，也导致了前端开发的复杂度大幅增加。

一、前端开发介绍

前端开发是创建Web页面或app等前端界面呈现给用户的过程，与后端相比更加注重页面性能和用户体验。前端工程师通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。

移动互联网带来了大量高性能的移动终端设备以及快速的无线网络，HTML5，node.jS的广泛应用，各类框架类库层出不穷。

在这里插入图片描述
二、核心技术

1.HTML5语言

（1）什么是HTML

HTML(英文全称：HyperText Mark-up Language)称为超文本标记语言，是一种标识性的语言，要经过浏览器的解释和编译。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。HTML文件后缀名.html或htm。

（2）HTML常用标签

HTML标签是已定义好的标记，可用来控制页面显示的内容。通过指定标签可以定义网页的内容，通过指定标签的属性可以定义网页的内容的样式。HTML的常用标签分为 meta标签、文本标签、列表标签、分隔线标签、超级链接标签、图像标签等。

2.CSS3

（1）什么是CSS

CSS(英文全称：Cascading Style Sheets)称为层叠样式表，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

（2）CSS属性

CSS语言是由选择器，属性和属性值组成的。在CSS中选择器可以分为四大种类，分别为ID选择器、类选择器、元素选择器和属性选择器。CSS的属性包括文本属性、文字属性、背景属性、定位属性、边框属性、列表属性、布局属性、滤镜属性等。

3.JavaScript

（1）什么是JavaScript

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

（2）JavaScript基本特点

JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

1. 是一种解释性脚本语言（代码不进行预编译）。
2. 主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
3. 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
4. 跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
5. JavaScript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。JavaScript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
6. 可以实现web页面的人机交互。

三、安装开发工具

基础环境
1.Node.js

JavaScript的应用越来越广泛，而且它还能和Node.JS在后端协同工作，快速搭建易于扩展的网络应用。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
在这里插入图片描述
（1）安装环境：
​         本机系统：Windows 10 Pro（64位）
​         Node.js：v6.9.2LTS（64位）
（2）安装步骤：
​         Node官网https://nodejs.org/zh-cn/下载，安装（默认目录为默认安装目录为 C:\Program Files\nodejs\）并设置好最新的Node长期支持版，（https://nodejs.org/dist/v5.10.1/node-v5.10.1-x64.msi，若是Mac/Linux，选择对应版本下载）。
​         查看环境变量：输入path命令。一般安装完后，windows系统会将安装目录自带到系统变量Path路径后面。
（3）测试安装：
​         安装好之后运行Node.js command prompt，输入node -v 命令，显示node.js版本号即安装成功。
在这里插入图片描述
（4）配置NPM：
​         不修改npm的模块安装目录，那么默认情况下都会安装C盘。
​         步骤：
​         ①需要配置npm的全局模块的存放路径以及cache的路径，例如将以上两个文件夹放在NodeJS的主目录下，便在NodeJs下建立“node_global”及“node_cache”两个文件夹。我们就在cmd中键入两行命令：
​         npm config set prefix “D:\Program Files\nodejs\node_global”
​         npm config set cache “D:\Program Files\nodejs\node_cache”
在这里插入图片描述
②配置npm的环境变量和nodejs的环境变量
​         我的电脑→属性→高级系统配置→环境变量→新建系统变量：变量名“NODE_PATH”，变量值“D:\Program Files\nodejs\node_global\node_modules”。
（5）配置国内镜像源（cnpm）
​         由于npm的镜像是国外的，为了加快下载速度，可以通过国内淘宝镜像来下载，所以采用cnpm，当然也可以不采用cnpm，直接把镜像指向淘宝镜像。
​         npm config set registry https://registry.npm.taobao.org
​         输入cnpm -v 命令，显示node.js版本号即安装成功。

2.NPM
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

(1)安装步骤
​ ​ ​ ​ ​由于新版的NodeJS已经集成了npm，所以npm一并安装好了。配置步骤见上方。
(2)测试安装
 ​ ​ ​ ​安装好之后运行Node.js command prompt，输入npm -v命令，显示npm版本号即安装成功。

3.Git

Git是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。Git是Linus Torvalds为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。
（1）安装步骤
         到 Git 官网（https://git-scm.com/downloads)下载并安装最新版的 Git。
（2）环境配置
         # 配置用户名 git config --global user.name “username”
         # 配置邮箱 git config --global user.email “username@email.com”
（3）生成SSH：为建立在应用层基础上的安全协议
         ssh-keygen -t rsa
（4）将ssh文件夹中的公钥（ id_rsa.pub）添加到GitHub管理平台。
（5）测试配置是否成功
         ssh -T git@github.com
在这里插入图片描述
Git 常用的是以下 6 个命令：git clone、git push、git add 、git commit、git checkout、git pull。

  • workspace：工作区。
  • staging area：暂存区/缓存区。
  • local repository：本地仓库。
  • remote repository：远程仓库。
    在这里插入图片描述
    在这里插入图片描述
grunt,gulp,webpack等已经成为现在前端开发工程师的必备技能之一。
4.扩展资料：gulp,webpack，bower，Express
gulp

Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。

安装步骤：

  • 在终端输入npm install gulp -g
  • 安装完成后，同样输入gulp -v输出相应的版本号，则说明安装成功。
webpack

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。

安装步骤：到 webpack 官网（https://www.webpackjs.com/)下载并安装webpack。

  • 全局安装

    运行npm i webpack -g全局安装。

  • 本地安装

    对于大多数项目，建议本地安装（先全局安装，才能使用webpack命令）。使引入破坏式变更(breaking change)的依赖时，更容易分别升级项目。在项目根目录中运行以下命令安装到项目依赖中。

    安装到最新版本：npm install --save-dev webpack
    安装到特定版本：npm install --save-dev webpack@<version>

    使用webpack 4+版本时，还需要安装CLI：npm install --save-dev webpack-cli，提供命令行（如webpack命令）和打包功能。

bower

bower是一种包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。

安装步骤：

  • 在终端输入npm install bower –g
  • 安装完成后，同样输入bower -v输出相应的版本号，则说明安装成功。
Express

基于 Node.js 平台，快速、开放、极简的 Web 开发框架。

安装步骤：

  • 在终端输入npm install -g express –registry=https://registry.npm.taobao.org
开发环境
  1. 关于编辑器——Visual Studio Code

    一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。

    安装步骤：到 Visual Studio Code 官网https://code.visualstudio.com/下载并安装最新版本 Visual Studio Code。

    安装插件：

    简体中文语言包（Chinese (Simplified) Language Pack for VS Code）：https://marketplace.visualstudio.com/items?ite mName=MS-CEINTL.vscode-language-pack-zh-hans。

    前端插件包（Frontend Extension Pack）：https://marketplace.visualstudio.com/items?itemName=karbassi.frontend-ext ension-pack。

  2. 关于浏览器——Google Chrome

    Google Chrome是一款由Google公司开发的网页浏览器，该浏览器基于其他开源软件撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。

    安装步骤：到Google chrome 官网下载并安装最新版的 Chrome 浏览器。

其他效率工具
  1. 关于Markdown文档编辑器——Typora

    Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式，其目标是实现易读易写。

    Typora是一款轻便简洁的Markdown编辑器,支持即时渲染技术。Typora的优点简洁美观、实时预览、扩展语法、跨平台、免费。

    安装步骤：www.typora.io（官网）或者 www.typora.net(中文) ，下载并安装最新版 Typora。

  2. 关于思维导图——XMind

    XMind 是一款非常实用的商业思维导图软件，应用全球最先进的Eclipse RCP 软件架构，全力打造易用、高效的可视化思维软件，强调软件的可扩展、跨平台、稳定性和性能，致力于使用先进的软件技术帮助用户真正意义上提高生产率。

    安装步骤：http://www.xmindchina.net/（中文官网），下载并安装XMind。

版权声明：本文为CrystalLiWanLing原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。