前端技术汇总+Vue最新快速上手

前端知识体系

想要成为真正的"互联网Java全站工程师"还有很长的一段路要走,其中"我大前端"是绕不开的一门必修课.本阶段主要目的就是Java后端程序员认识一下前端,了解前端,掌握前端为成为现实的全站工程师再向前迈进一步.

前端三要素

  1. HTML(结构):超文本标记语言(Hyper Test Markup Language),决定网页的结构和内容
  2. CSS(表现):层叠样式(Cascading Style Sheets),设定网页的表现形式
  3. JavaScript(行为):是一种弱类型脚本语言,其源代码不需要经过编译,而是由浏览器解释运行,用于控制页面行为

结构层(HTML)

略,太简单

表现层(CSS)

Css层叠样式表是一门标记语言,并不是编程语言,因此不可以自定义变量,不可以引用等,换句话说就是布局任何语法支持,它主要缺陷如下:

  1. 语法不够欠打,比如无法嵌套书写,导致模块化开发中需要书写很多重复的选择器;
  2. 没有变量和合理的样式服用机制,使得逻辑上相关的水性指必须以字面量的形式重复输出,导致难以维护

这就导致了我们在工作中无端增加了许多工作量,为了解决这个问题,前端开发人员使用一种称之为CSS预处理器的工具,提供Css确实的样式层复用机制,减少冗余代码,提高样式代码的可维护性.大大提高了前端在样式上的而开发效率.

什么是CSS预处理器

CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行CSS的编码工作.用通俗一点的话说就是"用一种专门的编程语言,进行Web页面样式设计,再通过编译器转化为正常的CSS文件,以供项目使用"

常用的CSS预处理器有哪些

  1. SASS:基于Ruby,通过服务端处理,功能强大,解析效率高.需要学习Ruby语言,上s手难度高于LESS
  2. LESS:基于NodeJS,通过客户端处理,使用简单.功能比SASS简单,解析效率也低于SASS,但是实际开发种族狗狗了,所以魔门后台人员如果需要的话,建议使用LESS.

行为层(JavaScript)

JavaScript一门弱类型脚本语言,其源代码在发往客户端运行之前不需要进行编译,而是将文本格式的字符代码送给浏览器解释运行.

Native 原生JS开发

原生JS开发,也就是让我们只能找[ECMAScript]标准的开发方式,简称ES,特点是所有浏览器都支持.

TypeScript微软的标准

TypeScript是一种由微软开发的自由和开源的编程语言.他是JavaScript的一个超集,而且本质上这个语言添加了可选的静态类型和基于类的面向对象编程.
该语言的特点就是除了具备的ES的特性之外还纳入了许多不再标准范围内的新特性,所以会导致很多浏览器不能支持TypeScript语法,需要解释后(编译成 JS)才能被浏览器正确执行.

JavaScript框架

  1. JQuery:大家熟知的JS框架,有点是简化了DOM操作,缺点是DOM操作太频繁,影响前端性能;在前端眼里使用它仅仅是为了兼容IE6,7,8;
  2. Angular:Google收购的前端框架,由一群Java程序员开发,其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念,与微软合作,采用TypeScript语法开发;对后台程序员友好,对前端程序员不太友好;做大缺点是版本迭代不合理
  3. React:Facebook出品,一款高性能的JS前端框架;夜店是提出了新概念[虚拟DOM]用于减少真是的DOM操作,在内存中模拟DOM操作,有效的提升了前端渲染效率;缺点是使用复杂,因为需要一个额外学习一门JSX语言;
  4. Vue:一款渐进式JavaScript框架,所为渐进式就是逐步实现新特性的意思,如实现模块化开发,路由,转台管理等特性.其特点是综合了Auglar模块化和React的有点
  5. Axious: 前端通信框架;因为Vue的便捷很明确,就是为了处理DOM所以并不具备通信功能,此时就需要额外使用一个通信框架与服务交互;当然也可以直接使用JQuery提供的AJAX通信功能;

UI框架

  1. Ant-Design:Alibaba出品基于React的UI框架
  2. ElementUI.iview.ice:饿了吗出品,基于Vue的UI框架
  3. Bootstrap: Twitter推出的一个用于前端开发的开源工具包
  4. AmazeUI: 又叫妹子UI,一款HTML5跨屏前端框架

JavaScript构建工具

  • Babel: JS编译工具,主要用于浏览器不支持的ES新特性,比如用于编译TypeScript
  • WebPack:模块打包器,主要作用是打包,压缩,合并及按序加载

三端统一

混合开发(Hybrid App)

主要目的是实现一套底阿妈三端统一(PC,Android,IOS:.ipa)并能够调用到设备底层硬件(如:传感器,GPS,摄像头等),打包方式主要有以下两种

  • 云打包:Hbuild -> HbuildX,DCloud出品:API Cloud
  • 本地打包: Cordova

微信小程序

详见微信官网,这里介绍一个方便微信小程序UI:WeUI

后端技术

前端技术人员为了方便开发也需要掌握一定的后端技术,但是我们Java后台人员指导后台只是体系机器庞大复杂,所以为了方便前端人员开发后台应用,就出现了NodeJS这样的技术.
NodeJS的作者已经生成放弃NodeJS,开始开发全新的Deno
既然是后台技术,那肯定也需要框架和项目管理工具,NodeJS框架以及项目管理工具如下

  • Express: NodeJS框架
  • Koa:Express简化版
  • NPM:项目综合管理工具,类似于Maven
  • YARN:NPM代替方案,类似于Maven和Gradle的关系

主流前端框架

Vue.js

iView

iView是一款强大的基于Vue的UI库,有很多实用的基础组件比elementtui的组件更丰富,主要服务于PC界面的中后台产品.使用单文件的Vue组件开发模式,基于npm+webpack+babel开发
支持ES2015高质量,功能丰富友好API,自由灵活的使用空间

ElementUI

Element是饿了吗前端开源维护的Vue UI组件库,组件齐全,基本涵盖后台所需的所有组件,文档讲解详细,例子也很丰富,主要开发PC端页面,是一个质量比较高的Vue UI组件库

ICE

飞冰是阿里巴巴团队基于React/Angular/Vue的中后台应用解决方案,在阿里巴巴内部,已经有270多个来自几乎所有BU的项目在使用,飞冰包含了一条从设计端开发端的完整链路,帮助用户快速搭建属于自己的中台应用

前端为主的MV*时代

  • MVC:Model View Controller
  • MVP:Model View Presenter
  • MVVM:Model View ViewModel

为了降低前端开发的复杂度,涌现了大量的前端框架,比如:AngularJS,React,Vue.js,EmberJS等,这些框架总原则是先按照类型分层,比如Iemplates,Controllers,Models然后再层内做切分

Vue

Vue概述

Vue是一套用于构建用户界面的渐进式框架,发布于2014年2月,与其他的大型框架不同的是,Vue被设计为可以自底向上层主键应用.Vue的核心只关注视图层,不近易于上手,还便于与第三方库(如vue-router:跳转,vue-resource:通信,vuex:管理或已有项目整合)

官网:https://cn.vuejs.org/v2/guide/

遵循Soc原则
视图: 给用户看,刷新后台给的数据

为什么要使用Vue.JS

  • 轻量级,体积小是一个重要指标.Vue.js压缩后只有20多kb
  • 移动优先,更适合移动端,比如移动端Touch事件
  • 易上手,学习曲线平稳,文档齐全
  • 吸收了Angular和React的长处,并拥有自己独特的功能
  • 开源,社区活跃度高

第一步:新建项目

直接新建一个文件夹,然后用idea直接打开这个文件夹
我就不从官网下载js源文件,或者从github克隆源文件了,直接用cnd引入

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
或者
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>

其中第一个是源码,第二个是没有空格的压缩版,只有一行
HTML如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- view层模板-->
<div id="app">
    {{message}} //第一个输出
    {{message}} //第二个输出
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> //用上面说的cnd引入
<script>
    var vm = new Vue({  //这里跟定义一个对象差不多
        el: "#app",  //el(element):元素 绑定app
//Model数据层
        data: {  //跟键值对差不多
            message: "hello,vue!" //值
        }
    });
</script>
</body>
</html>

界面如下

以上就能看出Vue.js的MV了,那么VM体现在哪里呢?我们继续打开刚才这个网页,点击f12.在console中输入vm.message = "窝草!竟然!我的天!"回车

vm.message = "窝草!竟然!我的天!"

这里就会直接改变,而不是像之前的页面一样刷新之后才会改变

我会写代码+代码改变世界=我会改变世界! 为什么要改变世界? 如果无法改变世界,那么,世界就会改变我......
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/chougoushi/p/13470283.html