前端开发

　　　 React前端开发环境搭建 Let's begin （一）首先我们需要安装node.js，以下是node.js的官网，下载即可。 node.js官网：http://nodejs.org/en/ 选择合适的版本后下载下来，如下图所示： 然后根据提示安装node.js，npm包管理工具也会一同安装。 安装完成后，打开cmd命令行，输入node -v和npm -v来查看版本号（中间有空格），如果显示则安装成功。 成功安装了node和npm后，因为国内的npm下载很慢，我们可以使用淘宝的cnpm,同时设置镜像地址。 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装成功后，我们可以键入cnpm -v检查是否安装成功 （二）创建我们的第一个react项目 例如我们要创建一个todolist项目，我们要以此执行一下步骤： 首先在所在文件夹地址栏中输入cmd enter 使用cnpm install -g create-react-app 全局安装 然后再使用create-react-app todolist指令在该文件夹下创建todolist文件夹（时间可能有点长，网速问题） 但是中间可能会出现一些警告，那些无关紧要，只要不是错误信息。 在创建成功的基础上，然后通过cd进入刚创建好的todolist文件夹

人生苦短，要学就只学有用的 【前端教学-CSS-4】 CSS选择器 CSS 选择器 今天我们围绕一个 导航栏案例进行学习知识点。 今日重点： 复合选择器 后代选择器 并集选择器 标签显示模式 CSS背景 背景位置 CSS三大特性 优先级 1. CSS复合选择器 目标 理解 理解css复合选择器分别的应用场景 应用 使用后代选择器给元素添加样式 使用并集选择器给元素添加样式 使用伪类选择器 为什么要学习css复合选择器 CSS选择器分为 基础选择器 和 复合选择器 ，但是基础选择器不能满足我们实际开发中，快速高效的选择标签。 目的是为了可以选择更准确更精细的目标元素标签。 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的 1.1 后代选择器（重点） 概念： 后代选择器又称为包含选择器 作用： 用来选择元素或元素组的 子孙后代 其写法就是把外层标签写在前面，内层标签写在后面，中间用 空格 分隔，先写父亲爷爷，在写儿子孙子。 父级 子级{属性:属性值;属性:属性值;} 语法： .class h3{color:red;font-size:16px;} 当标签发生嵌套时，内层标签就成为外层标签的后代。 子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。 1.2 子元素选择器 作用： 子元素选择器只能选择作为某元素 子元素(亲儿子) 的元素。

如果你是想要学习Web前端的新人，那么恭喜你，看完这篇文章，尽早的选择好努力的方向和规划好自己的学习路线，比别人多一点付出并且持之以恒，你就已经赢在了起跑线上。有道是，莫道君行早，更有早行人。 如果你已经学完了但是还没找到工作，那么就应该反省一下自己，到底哪些方面于欠缺，亡羊补牢，为时不晚，现在行动起来，你就还有机会! 难道真的是市场已经饱和了吗? 其实还是很缺人的，只是不缺基本的从业者了，学习前端的人很多也就意味着竞争很大，对于刚刚准备踏入职场的前端小伙们来说，找工作就是一场战争。目标就是那几个工作岗位，周围的人全是敌人，没什么同伴。那么如何才能拥有自己的核心竞争力，在人群中脱颖而出呢?下面和千锋广州小编一起来看看吧！ ​第一：一定要重视基础 首先建立第一条技能线：就是前端由HTML，CSS，JS组成;然后将其细化为第二条线，HTML是由HTML4和HTML5组成;第三条线，CSS由CSS2和CSS3组成;第四条线，JS由es5和es6构成。 接下来是框架方面的延伸：CSS方向有less，HTML方向有bootstrap，JS方向有JPuery库。 再往下延伸一层：HTML、CSS方向，有前端构建工具;JS除了JP库之外，还有更全面的前端框架，react、angular、vue。 再往下细化：react是一个view层方案，为了让它能够全面解决前端需求，需要Redux、react

如何高效的学习Web前端一定是困扰着很多初学前端的朋友，IT行业的变化快是众人皆知的，这就需要大家需要持续去学习新的知识内容。但是，小编看到往往我们工作之后，才发现学习的东西很少了，学习效率非常低，感觉自己到了一个瓶颈期，久而久之，就演变成『一年工作经验，重复去用十年』的怪圈。 不管你是已经工作了，还是正在学习中的初学者，如果你想在Web前端行业中有更高更远的发展，下面这些方法会让你的学习之路变得更加轻松。 先让我们来看看一些不好的学习方法： 一、低效率的学习坏习惯 1、被动反复阅读 通常一个新手在学习Web前端开发的时候，往往会选择买书去学习，首先这样的学习效率是非常差的，比如在学习html，css的时候，是完全不用看书的。书上大多数都是理论知识，你并不知道哪里是重点，所以每个人地方你都会去看，但是事实往往是大多数东西你都不理解。比如说学习Web前端的人都知道《JavaScript权威指南》这本书，它的页数在700多页，你想要通过这本书来学JavaScript，可能这本书半年你都看不完，就算看完了又能怎么样，看一遍不可能会，很多人就会选择重复去看，不仅浪费时间，效率也不高。这种学习方式是非常不可取的，你没有那么多时间去这么干。 2、看书看视频中代码示例认为自己就理解了，从不动手编程 这是新手在学习Web前端的时候常见的问题，也是大忌，很多人都说，我课程听懂了，但是自己不会动手写

一、下载并安装Node.js C:\Users\Administrator>node -v v11.0.0 二、安装npm，安装淘宝cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org C:\Users\Administrator>cnpm -v cnpm@6.0.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js) npm@6.5.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js) node@11.0.0 (C:\Program Files\nodejs\node.exe) npminstall@3.17.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js) prefix=C:\Users\Administrator\AppData\Roaming\npm win32 x64 10.0.17763

Gulp 是Web开发中帮你自动完成任务的工具。它可以完成的前端任务包括： 启动Web Server 当文件修改保存后，自动刷新浏览器 批量处理Sass或者Less文件 优化资源CSS, JavaScript, 和 images 安装Gulp -g 参数表示全局安装 $ npm install gulp -g 创建Gulp项目 创建一个名为 demo 的目录( 目录名不能用gulp ），在目录下运行 npm init npm init 会在项目下创建一个 package.json 文件，以保存项目相关信息，如项目名，项目依赖包等。 安装gulp依赖包到项目中 $ npm install gulp --save-dev 这次我们只是把gulp安装到项目目录，而不是全局。 --save-dev 会增加开发依赖(dev dependency)配置到 package.json 项目文件结构 Gulp允许你用任务文件结构来构建项目，但是在使用前你最好理解Gulp的内部原理。 本教程使用通用的webapp文件结构 app是开发目录 ，我们的代码就放在这个目录下。 dist （distribution的缩写）是存放发行目录，存放优化后的文件 gulpfile.js 是gulp的配置文件 创建gulp任务 使用gulp的第一步是在 gulpfile.js 中 require gulp. var

本文假设你之前没有用过任何任务脚本（task runner）和命令行工具，一步步教你上手Gulp。不要怕，它其实很简单，我会分为五步向你介绍gulp并帮助你完成一些惊人的事情。那就直接开始吧。 第一步：安装Node 首先，最基本也最重要的是，我们需要搭建node环境。访问 http://nodejs.org ，然后点击大大的绿色的 install 按钮，下载完成后直接运行程序，就一切准备就绪。 npm 会随着安装包一起安装，稍后会用到它。 第二步：使用命令行 也许现在你还不是很了解什么是命令行——OSX中的终端（Terminal），windows中的命令提示符（Command Prompt），但很快你就会知道。它看起来没那么简单，但一旦掌握了它的窍门，就可以很方便的执行很多命令行程序，比如Sass，Yeoman和Git等，这些都是非常有用的工具。 如果你很熟悉命令行，直接跳到步骤四。 为了确保Node已经正确安装，我们执行几个简单的命令。 node -v 回车（Enter），如果正确安装的话，你会看到所安装的Node的版本号，接下来看看npm。 npm -v 这同样能得到npm的版本号。 如果这两行命令没有得到返回，可能node就没有安装正确，尝试重启下命令行工具，如果还不行的话，只能回到第一步进行重装。 第三步：定位到项目 现在，我们已经大致了解了命令行并且知道如何简单使用它

1 | 0 JavaScript概述 1 | 1 ECMAScript和JavaScript的关系 1996年11月，JavaScript的创造者--Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这门语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是1.0版。 该标准一开始就是针对JavaScript语言制定的，但是没有称其为JavaScript，有两个方面的原因。一是商标，JavaScript本身已被Netscape注册为商标。而是想体现这门语言的制定者是ECMA，而不是Netscape，这样有利于保证这门语言的开发性和中立性。 因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。 1 | 2 ECMAScript的历史 年份 名称 描述 1997 ECMAScript 1 第一个版本 1998 ECMAScript 2 版本变更 1999 ECMAScript 3 添加正则表达式 添加try/catch ECMAScript 4 没有发布 2009 ECMAScript 5 添加"strict mode"严格模式 添加JSON支持 2011 ECMAScript 5.1 版本变更

1. HTML简介 对于html，现在大部分都是用html5，它不是编程语言，而是一种标签语言，简单易学，可用于多种方面，是前端开发的基础，在其中可插入JavaScript等 编程语言 写成 动态网页 ，但仅用HTML只能写成 静态网页 。 2.HTML基础 前面已经说过，html是一种标签语言，所以标签的用法要说一下：多数标签由“开头”和“结尾”组成（但也有很大一部分的没有闭合标签），如下为标签与 标签的例子： < ! DOCTYPE html > < html > < body > < h1 > 我的第一个标题 < / h1 > < p > 我的第一个段落。 < / p > < / body > < / html > 输出为： 我的第一个标题 我的第一个段落。 由此不难看出闭合标签都为</>而开头的标签为<>。 因此这里还必须要说一下HTML基本的标签及用法、作用，如下： 1. [未完待续～] 来源： CSDN 作者： 中午好 链接： https://blog.csdn.net/qq_45491408/article/details/104138527

vue官方网站： https://cn.vuejs.org/v2/guide/# 一、导入vue.js 使用CDN： <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> 或者将vue.js的代码复制到本地vue.js中。 二、vue使用 1.初次使用vue <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VUE</title> </head> <body> <div id="app"> {{ message }} </div> <script src="static/vue.js"></script> <script> // 使用vue var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html> 1）导入vue.js 2）创建一个Vue实例，注意参数是一个对象