前端

一.实验目的

1. 前端技术的发展流程？

2. 常用前端技术有哪些？他们之前有什么关系？

3. 解读Element-UI 和 VUE 技术。

4. 项目代码

二. 实验内容

一.

什么是前端

前端：针对浏览器的开发，代码在浏览器运行

后端：针对服务器的开发，代码在服务器运行

前端三剑客

HTML

CSS

JavaScript

HTML

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的基石。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。

超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）：

HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时

HTML 3.2——1997年1月14日，W3C推荐标准

HTML 4.0——1997年12月18日，W3C推荐标准

HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准

HTML 5——2014年10月28日，W3C推荐标准

CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

JavaScript

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

二.

Web前端开发基础技能：HTML、CSS、JavaScript

前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。

Web前端开发必知标准：http标准、W3C标准、ECMAScript标准

浏览器要从服务端获取网页，网页也可能将信息再提交给服务器，这其中都有http的连接。W3C标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。JS是在ES的基础上，为Web浏览器做了一部分封装（增加了DOM操作、BOM操作等）。

Web前端开发加薪技能：jQuery、Ajax、React

jQuery一定是大部分Web前端开发者不可或缺的工具，对jQuery的学习不能停留在只使用它的API和插件上，还要会自己去写jQuery插件、会读jQuery源码、了解jQuery的设计思路。

Ajax是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，Ajax可以在无需重新加载整个网页的情况下，更新部分网页的技术。

React主要用于构建UI，你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

 

除了要掌握这些技术层面的知识外，Web前端工程师还要掌握理论层面的知识。包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等等。只有全部掌握这些知识，才能成为一名优秀的Web前端工程师

三.

1.vue简介

Vue 是一套用于构建用户界面的渐进式 JavaScript 框架 ，开发者只需要关注视图层， 它不仅易于上手，还便于与第三方库或既有项目的整合。是基于MVVM（Model-View-ViewModel 即：视图层-视图模型层-模型层）设计思想。提供MVVM数据双向绑定的库，专注于UI层面。

2.Element-Ui简介

element 是基于 vue 实现的一套不依赖业务的 UI 组件库，提供了丰富的PC端组件，减少用户对常用组件的封装，降低了开发的难易程度。

3.vue与Element-Ui的关系

1.Element-Ui是基于vue封装的组件库，简化了常用组件的封装，提高了重用性原则；

2. vue是一个渐进式框架，Element-Ui是组件库；

4.vue+Element-Ui的使用

第一步：安装vue-cli手脚架（注：前提是保证安装了nodejs，可通过打开cmd，输入 node -v，检查是否安装，命令行显示nodejs的版本，代表安装成功）

第二步：nodejs安装完成后使用命令安装 vue 和vue-cli，命令如下：

cnpm install vuecnpm install vue-cli -g

注：-g 表示全局安装

第三步：初始化webpack，命令如下：

vue init webpack 项目名

第四步：初始化时根据提示填写，完成后即可安装element-ui，然后在index.js中引入全局注册即可,如下所示：

安装element-ui

cnpm install element-ui --save

index.js中引入全局注册  import ElementUi from 'elemet-ui'import '@/theme-et/index.css'Vue.use(ElementUi)