前端开发 | 易学教程

vue前端UI框架element-ui在项目中的安装及使用

阅读更多关于 vue前端UI框架element-ui在项目中的安装及使用

vue前端UI框架element-ui在项目中的安装及使用 element-ui的安装普通安装使用vue-cli3安装使用可视化编辑 element-ui的安装普通安装 element-ui是款热门的vue前端UI框架，官方文档为： https://element.eleme.io/#/zh-CN 。要安装element-ui，只需要在vue项目根目录中执行： npm i element-ui -S 使用vue-cli3安装如果自己的vue项目于是用vue-cli3创建的，则有更好的安装办法，使用对应vue-cli的element插件，官方github地址为： https://github.com/ElementUI/vue-cli-plugin-element ，在vue项目根目录中执行： vue add element 安装过程需要选择一些选项，选择结果参照下图：全局导入element-ui组件选择覆盖element的scss变量语言选择中文使用使用element-ui进行前端页面开发时，建议参考官方的组件文档： https://element.eleme.cn/#/zh-CN/component/layout ，文档中给出了所有的组件及对应的代码，开发时只需按照需要复制相应的代码即可。可视化编辑为了更快地利用element-ui开发前端页面

emmet 教程 emmet快捷键大全

阅读更多关于 emmet 教程 emmet快捷键大全

Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，比如下面的演示： Zen coding下的编码演示去年年底，该插件已经改名为Emmet。但Emmet不只改名，还带来了一些新特性。本文就来直观地演示给你。一、快速编写HTML代码 1. 初始化 HTML文档需要包含一些固定的标签，比如<html>、<head>、<body>等，现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”，然后按Tab键： html:5 或!：用于HTML5文档类型 html:xt：用于XHTML过渡文档类型 html:4s：用于HTML4严格文档类型 2. 轻松添加类、id、文本和属性连续输入元素名称和ID，Emmet会自动为你补全，比如输入p#foo：连续输入类和id，比如p.bar#foo，会自动生成： Html代码 < p class= "bar" id= "foo" > </ p > 下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1{foo}和a[href=#]，就可以自动生成如下代码： Html代码 < h1 >foo </ h1 > < a href= "#" > </ a > 3. 嵌套

前端框架vue学习

阅读更多关于前端框架vue学习

一、VUE概述 1. Vue.js 是什么？ Vue.js 是简单小巧，渐进式，功能强大的技术栈 2. Vue.js 的模式 MVVM模式，视图层和数据层的双向绑定，让我们无需再去关心DOM操作的事情，更过的精力放在数据和业务逻辑上去 3. Vue.js 环境搭建 script 引入 src（如： <script src="../lib/vue.js" type="text/javascript"></script> ） vue 脚手架工具 vue-cli 搭建 4.Vue.js 的优点低耦合。视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 "View" 上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。可重用性。可以把一些视图逻辑放在一个 ViewModel 里面，让很多 view 重用这段视图逻辑。独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。可测试。界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。易用、灵活、高效。二、VUE的指令学习 1.text+html+cloak+插值表达式学习指令：插值表达式：语法：{{要插入的值}}，此时相当于占位符，到时候{{关键字}}会被替换成

如何学好CSS？

阅读更多关于如何学好CSS？

　　身为IT人都知道，在每一种编程语言里，都有一些必须要掌握的硬核技能。例如，在学习Web前端的过程中，就需要掌握CSS这个硬核技能。CSS称为层叠样式表，为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破，利用它可以实现修改一个小的样式更新与之相关的所有页面元素。同时，CSS可以满足HTML自身的不足，丰富的样式便于使用和修改。　　接下来，就如何学好CSS，希望能够助大家一臂之力！　　如果网页中没有CSS，每个浏览器都按照自己的解析形式来解析每个网页，那么我们现在所看到的页面将是一盘散沙，毫无美感可言。同时，UI设计师辛苦设计出来的漂亮页面也将不复存在。如果不用CSS，采用图文的形式来实现美观的页面可以吗?在非要用图文设计效果来显示的情况下，也可以采用插入图片的形式来实现，但是一个网页如果全是图片就将影响网页的加载速度，用户的体验度也不会太好。目前来看，没有一家网站是全部采用图片的格式，而是采用图文结合的形式来实现的。所以，如果采用图文的形式来实现没有CSS的支持，页面很难实现。　　网页结构是由HTML+CSS+JavaScript一层一层组成的，HTML负责搭建框架结构，将网页分层。但只有HTML的话网页看起来是混乱的，有时候你设备旧网速卡的时候就会显示一个杂乱无章、无法阅读的页面。　　CSS发展到今天

HTML5和Web前端有什么区别？

阅读更多关于 HTML5和Web前端有什么区别？

很多小伙伴都知道HTML5这个概念，但是具体不知道是做什么的，今天我们就来给大家普及一下HTML5和web前端的关系和区别。什么是HTML5？ HTML5其实是一种技术的集合，它包括了HTML5，CSS3，JS等技术。而Web前端则是一种职业，国内从2005年开始发展的，是由网页设计师演变过来的。如果从技术上说，Web前端涉及到的技术有很多，包括HTML5，除此之外还有JSON，AJAX，DOM等。不过这也看具体的公司吧，不同的公司对Web前端开发人员的技术要求也不一样。什么是Web前端？再传统规的意义上来讲，网站是分为前端和后端的，前端就是我们俗称的页面以及我们经常看到的各种展示效果，后端则是管理按照理解来讲后台主要是指管理、更新、维护网站的后台。百度百科是这样定义的：主要职责是利用(X)HTML/CSS/Java/Flash等各种Web技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，开发Java以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。通常意义上来讲，Web前端工程师，不仅要会开发而且还要会移动开发。也就是说，我们学习Web 的时候也是需要学习HTML5技术的。据了解，现在企业招聘的用人标准都是会包含会HTML5开发这一条。就是说HTML5与Web前端技术他们是一种从属的关系

前端工程化

阅读更多关于前端工程化

工程结构 ├── src ├── dist ├── example ├── docs ├── index.js ├── package.json ├── README.md ├── .gitignore └── .npmignore src - 项目的源码，开发阶段在这个目录进行 dist - 存放构建之后的文件的目录，如果不需要引用源码，则可以直接引用该目录下的文件。 examples - 示例，调用方法示例。 docs - 项目文档，如果文档内容太多，不方便全部写到 README 中，可以下 docs 目录下新建 Markdown 文件。 test - 测试，单元测试文件 index.js - 项目入口文件，package 中的入口文件默认指向此文件。 package.json - npm 配置，包含项目名称、版本、依赖、作者、运行命令等基本信息。 README.md - 项目说明文件，gitlab/hub、npm 等平台会默认展示该文件的内容，作为项目介绍。 .gitignore - 配置不需要提交的 git 上的文件，通常为编译生成的文件和目录、编辑器/IDE 的配置文件。 .npmignore - 配置不需要提交到 npm 上的文件。 .npmrc - 项目级别的 npm 配置，用于设置 registry。 README.md README.md 文件应该如下内容：

从源码角度了解SpringMVC的执行流程

阅读更多关于从源码角度了解SpringMVC的执行流程

目录从源码角度了解SpringMVC的执行流程 SpringMVC介绍源码分析思路源码解读几个关键接口和类前端控制器 DispatcherServlet 结语从源码角度了解SpringMVC的执行流程　　SpringMVC的执行流程网上有很多帖子都有讲解，流程图和文字描述都很详细，但是你如果没有通过具体源码自己走一遍流程，其实只是死记硬背。所以想开个帖子从源码角度再梳理一遍SpringMVC的执行流程，加深印象。 SpringMVC介绍　　SpringMVC采用的是前端控制器(Front Controller) + 各个业务处理器(Controller)来处理请求的。前端控制器来响应所有请求，通过一定的调度规则找到具体负责处理的业务处理器，并将请求委派给具体的业务处理器去执行业务逻辑，业务处理器返回给前端控制器模型数据model，最后前端控制器将model交给视图View进行渲染。源码分析思路　　看源码的同学可能往往会陷入一个怪圈,刚开始看可能还能看懂,等到一层一层点进去会越来越晕,让自己陷入了太多的细节中，而这些细节其实对主要流程并没有多大影响，然后就埋头研究。之后不得不又从头开始看，又让自己陷入了另一个细节。其实看源码开始时只是需要看一个大致的框架和思路，了解代码的大致执行流程，千万不要让自己陷入到细节的泥潭中

前端模块化设计思路

阅读更多关于前端模块化设计思路

模块化概念模块化就是为了减少循环依赖，减少耦合，提高设计的效率。为了做到这一点，我们需要有一个设计规则，所有的模块都在这个规则下进行设计。良好的设计规则，会把耦合密集的设计参数进行归类作为一个模块，并以此划分工作任务。而模块之间彼此通过一个固定的接口（所谓的可见参数）进行交互，除此之外的内部实现（所谓的隐参数）则由模块的开发团队进行自由发挥。程序模块化的目的：减少循环依赖减少耦合提高设计效率程序模块化的实施：把耦合密集的归为一个模块模块间通过固定的接口交互模块内部实现自由发挥 HTML CSS Images的模块化设计页面模块化的实施，这里指的是针对除去JavaScript部分的页面代码进行模块化实施。通过html css 图片进行模块化。页面模块化的实施思路是高度耦合的页面片段封装，模块布局作为公开接口，高度耦合的页面进行封装，使用独立的css文件，高度耦合的图片进行封装，给某类相关性强的图片建立文件夹。页面模块化的目的是，实现多人协同开发页面，提高页面研发速度和降低维护难度。研发速度的提升体现在多人协同并行开发，维护难度体现在减少版本的混乱，根据模块区分版本降低版本间代码冲突和文件错误覆盖。拆分页面模块，从小到大的分解 1. 拆分页面模块一个页面有很多个小单元模块组成，他来自有原始需求文档，比如logo，导航，内容1，内容2，内容3，内容4

如何做好前端页面异常监控？

阅读更多关于如何做好前端页面异常监控？

在开发工作中难免会出现bug,一般项目都是测试检查通过后就可以发线上，可是在线上仍旧会出现各种意料之外或者未测试到的问题，这个时候有的用户会向客服反馈说哪里哪里有问题，这是一种被动的错误上报方式，毕竟不是所有的用户都会上报问题，更多的则是出现问题后直接离开我们的APP。所以异常监控这块就显得越来越重要。页面异常分类在我们的项目中我将页面异常分为以下几种情况： javascript异常（语法错误，运行时错误，跨域脚本）资源加载异常（img js css） ajax请求异常 promise异常 vue项目中全局异常捕获接下来介绍如何捕获这些异常前端页面异常捕获方式 window.onerror捕获javascript异常 /** * 捕获javascript异常 * @param {String} message 错误信息 * @param {String} source 出错文件 * @param {Number} lineno 行号 * @param {Number} colno 列号 * @param {Object} error Error对象（对象） */ window.onerror = function (message, source, lineno, colno, error){ console.log('捕获到异常：', { message, source

HTML，CSS,Javascript关系

阅读更多关于 HTML，CSS,Javascript关系

学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的： 1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。那么JavaScript又有几个框架比如：jQuery，angularjs等等。 HTML的定义： html 不是一种编程语言，而是一种标记语言，使用一套标签来描述网页的一种超文本语言（ hyper text markup language ）。（简而言之， html 就是利用一套标记标签来描述网页的） html是内容的载体—css样式的装饰——JavaScript的特效效果——web浏览器读取 HTML 文件，并将其作为网页显示。来源： https://www.cnblogs.com/yyn120804/p/6262865.html

订阅前端开发