前端开发

互联网的高速发展促使互联网企业对于网站等页面的用户体验要求也越来越高，导致网站开发难度越来越大，但同时，伴随着的是开发人员的是高福利高工资，让很多人想加入到这个行业中，那么怎样才能成为一名 web前端开发 人员呢?应该学习哪些知识呢?下面和小编一起来看看吧！ 首先，学习之前要先了解前端是做什么的，前端开发，简单来说，就是把平面效果图转换成网页，把静态转换成动态。它的工作包括了:切图、写样式、做鼠标效果和图片切换效果等。而优秀的前端开发可以保障实现这些效果的同时，即不能影响网站的打开速度、浏览器兼容性还有搜索引擎的收录，还可以让用户体验更加舒适，使网站在访问中显得更精细、更用心。访客使用起来更简便。 基础：HTML+CSS网站页面搭建，CS核心和PC端页面开发，HTML5移动端页面开发。 核心：Web前端核心技术Java，ecmasript，dom，ajax，json，正则，作用域，运动框架，核心算法，高级函数，插件封装，jQuery等。 高级：HTML5+高级Java开发，大数据可视化，Webapp交互接口，lbs定位，微信sdk，es6标准，高级算法，数据结构，插件封装。 框架：vue、react、angular企业开发应用。 企业要求：bootstrap，swiper，iscroll，sass，ps切图，网站上线等。 Web前端开发到最后就是要走全栈开发的道路了

1 、安装 nodejs Grunt 和所有 grunt 插件都是基于 nodejs 来运行的， https://nodejs.org/ 安装完成之后在终端 node -v 查看安装版本 npm -v 查看 npm 版本 选装 cnpm 1.1、说明：因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常， 如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。来自官网： “这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”； 1.2、官方网址： http://npm.taobao.org ； 1.3安装：命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org； 注意：安装完后最好查看其版本号 cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误； 注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm（以下操作将以cnpm 代替npm）。 2、全局安装 gulp 安装方式： cnpm install gulp -g 执行 gulp -v 查看安装版本 3、创建网站项目 创建项目名称“gulp”子目录为： s rc（源文件） dist （目标文件）

字符串补充 """ 1）双引号： "前缀" + 变量 + "后缀" 2）单引号： '前缀' + 变量 + '后缀' 3）反引号： `前缀${变量}后缀` 注：在反引号中可以用 ${} 来包裹变量，实现字符串拼接 """ 实例成员：计算属性 """ /** 计算属性： * 1）其实就是vue中的方法属性，方法名可以作为属性来使用，属性值为方法的返回值 * 2）在computed中声明的方法属性，不能在data中重复声明，比data中声明的属性要多出写逻辑的地方 * 3）方法属性，自带监听机制，在方法属性中出现的变量，都会被监听，一旦有任何被监听的变量值发生更新， * 方法属性都会被调用更新方法属性的值 * 4）方法属性一定要在页面中渲染一次，方法属性采用意义，多次渲染，方法属性只会被调用一次 * 案例：计算器 * 方法属性的应用场景：一个变量依赖于多个变量，且需要进行一定的逻辑运算 */ """ <div id="app"> <!-- type="number"表示只能写数字 --> <input type="number" v-model="num1" max="100" min="0"> + <input type="number" v-model="num2" max="100" min="0"> = <button>{{ sum }}</button> </div>

目录 Vue 简介 什么是 Vue？ 优势 如何使用 Vue 常用网站 Vue 简介 渐进式 JavaScript 框架 渐进式：可以控制一个页面的一个标签，也可以控制一系列标签，也可以控制整个页面，甚至可以控制整个前台项目。你需要用它的什么组件就用什么组件，没有强主张 什么是 Vue？ 可以独立完成前后端分离式 web 项目的 JavaScript 框架 前后端不分离： 在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制的，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高 前后端分离 在前后端分离的应用模式中，后端仅返回前端所需要的数据，不在渲染 HTML 页面，不再控制前端效果 至于前端用户看到什么效果，从后端请求的数据如何加载到前端，都是由前端自己决定，网页有网页的处理方式，App 有 App 的处理方式，但无论哪种前端，所需的数据基本相同，后端仅需开发一套逻辑对外提供数据即可 为什么要学习 Vue ？ 前台框架：Angular（庞大）、React（精通移动端）、Vue（吸取前两者优势，轻量级） Vue一手文档是中文、中文API（低学习成本） 实现前后台分离开发，节约开发成本 special -- 特点 虚拟DOM 数据的双向绑定 单页面应用 数据驱动 优势 有指令（分支结构，循环结构...），复用页面结构等 有实例成员（过滤器，监听）

一、配色类网站 http://colorhunt.co 这个网站给我们提供了很多的配色方案，我们直接使用就OK了。使用方法也很简单，鼠标移动到对应的颜色上，我们就可以看到颜色的十六进制码，复制这个颜色到工具里就可以使用了。 https://webgradients.com/ 180种渐变方案供你选择，还可以直接复制CSS样式应用到网页中 https://color.adobe.com/zh/create/color-wheel 这个是Adobe公司出的，他提供了多种配色方案。我们点击圆盘中间的点，就可以调整出我们想要的配色方案。 http://www.colorhunter.com/ 这是一个提取现有图片配色方案的工具。我们上传一张图片，它就会帮我们把图片的配色提取出来供我们使用。 http://www.bootcss.com/p/websafecolors/ 这个网站是为WEB设计，开发中经常用到的安全色。网站内列出了颜色的十六进制码和RGB码，复制粘贴就可以了。 http://www.sioe.cn/yingyong/yanse-rgb-16/ 这是一个在线RGB和十六进制颜色码转换工具。在对应的位置填入十六进制代码，点击转换，我们就可以获取到RGB颜色的代码了。 二、图标类网站 http://www.iconfont.cn/plus 这是阿里巴巴旗下的图标库网站

正所谓“工欲善其事，必先利其器”，对Web开发人员来说，好工具的使用总会给人带来事半功倍的效果。   下面来说一下几种常用的开发工具： HBuilder Atom Sublime Text Visual Studio Code WebStorm   如果是初学者的话，我建议先使用HBuilder（记事本也可以，不过需要你将元素标签属性记牢固），很容易上手，熟练后在使用Visual Studio Code或者是Atom，这两个开发工具功能很强大，支持多种插件的安装，比如C/C++、Python、Java等等。   当下，有三种主流的编辑器，分别为Visual Studio Code、Sublime Text和Atom，WebStorm也挺受欢迎的，下面简单的说一说它们各自的优缺点： Atom的优缺点   首先我们来说一说Atom，Atom代码编辑器支持Windows、MaC、Linux三大桌面平台，完全免费，并且在GitHub上开放了全部的源代码。具有简洁和直观的图形用户界面，它支持宏，自动完成分屏功能，集成了文件管理器。经过开发团队的长时间的迭代开发和不断改进，Atom正式版编辑器在性能和稳定性都有着显著的改善。 主要优点： 开发维护团队强大，而且是开源项目，因此修复bug速度快，生态圈成长速度快。 快捷键支持特别好，熟悉了各种快捷键后可以成吨提高生成效率。 比较稳定，很少出现崩溃

npm，cnpm，yarn这三个或许使用Hexo，Hugo，vuepress等静态博客搭建的小伙伴们来说，会经常遇见，会使用它们进行插件，依赖包等的安装、卸载与更新，如果你是前端开发者或者是准备从事前端的话，你会经常与它们三个打交道，下面简单的说说它们三剑客吧！ npm是什么？ npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表，每星期大约有 30 亿次的下载量，包含超过 600000 个 包（package） （即，代码模块）。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。引自 npm中文网 npm (node package manager)是 JavaScript 世界的包管理工具，是 Node.js 平台的默认包管理工具，是 前端模块化 下的一个标志性产物，简单地说，就是 通过npm下载模块，复用已有的代码，提高工作效率。 下面是关于 npm 的快速介绍： npm 由三个独立的部分组成： 网站 注册表（registry） 命令行工具 (CLI) 网站 是开发者查找包（package）、设置参数以及管理 npm 使用体验的主要途径。 注册表 是一个巨大的数据库，保存了每个包（package）的信息。 CLI 通过命令行或终端运行。开发者通过 CLI 与 npm 打交道。

全栈工程师的第一步 记得在大学到时候，上计算机课觉得最有挑战的，就是做个一个个人主页。相对写个WORD文档、写个C语言程序，个人主页也是最有意思的一个主题。最开始的是用html标签方式来实现，用table来进行各种排版，丑得可见一斑。后面技术发展演进，大量的使用了html+css+js，再往后就衍生了html+css+jquery，一直到现在的各种vue、react群魔乱舞。 早起前端写法 一直从事后端开发，在刚阿里的两年里，还写了一些spingmvc+velocity的后台页面。主要是满足一些测试或者开发小二常用的后台功能，比如查询订单、查询商品等。 页面相对来说比较简单，主要就是一些form组成的表单，然后提交到后端做处理，或处理数据，或返回数据。 springmvc+velocity的实现方式也很简单，后端提供Controller来渲染和接收数据，vm页面用来提供用户视图，包括展示数据和接收用户数据。缺点就是页面和java是在同一个工程的，也就是说前后端是没有分离的。 全栈工程师 后面阿里2年，就基本做纯后端了，基本上没有接触过前端相关的逻辑。随着业务发展，对前端诉求越来越大，专业的前端已经不能满足需求，而且前端招聘难度也极大，因此要去我们每个人做到一专多能。即后端专业前端能力全面。 于是我开始了我写全新前端的历程。以下记录我自己的前端开发心得。 首先是新概念，有nodejs

　　如何快速掌握Web前端技术？好程序员必备web前端教程，随着互联网的高速发展以及技术的不断革新，Web前端工程师需要掌握的技术也有所变更。很多人想知道当前常用的Web前端技术有哪些？如何快速掌握这些技术？接下来就给大家介绍下。 　　常用的Web前端技术有哪些？ Web前端是为了协调前端设计与后端开发之间工作的岗位，是最接近产品和设计的工程师，起到衔接产品和技术的作用，前端为用户可以看到的部分负责，所以也是最接近用户的工程师。 Web前端开发基础技能：HTML、CSS、JavaScript 　　前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。 Web前端开发必知标准：http标准、W3C标准、ECMAScript标准 浏览器要从服务端获取网页，网页也可能将信息再提交给服务器，这其中都有http的连接。W3C标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。JS是在ES的基础上，为Web浏览器做了一部分封装（增加了DOM操作、BOM操作等）。 Web前端开发加薪技能

每次学新东西总感觉自己是不是变笨了，看了几个博客，试着试着就跑不下去，无奈只有去看官方文档。 webpack是基于node的。先安装最新的 node 。 1.初始化 安装node后，新建一个目录，比如html5。cmd中切到当前文件夹。 npm init -y 这个命令会创建一个默认的package.json。它包含了项目的一些配置参数，通过它可以进行初始安装。详细参数： https://docs.npmjs.com/files/package.json 。 不要y参数的话，会在命令框中设置各项参数，但觉得没啥必要。 2.安装webpack npm install webpack --save-dev 将webpack安装到当前目录。虽然npm install webpack -g 可以讲webpack安装到全局，但是容易出现一些模块找不到的错误，所以最好还是安装到当前目录下。 3.目录结构 webpack是一款模块加载各种资源并打包的工具。所以先建一个如下的目录结构： app包含的开发中的js文件，一个组件，一个入口。build中就是用来存放打包之后的文件的。webpack.config.js 顾名思义用来配置webpack的。package.json就不用说了。 component.js export default function () { var element =