- 博客(25)
- 收藏
- 关注
RSS订阅
1原创 React中创建组件
0. 安装 React Developer Tools 调试工具React Developer Tools - Chrome 扩展下载安装地址主要内容学习 创建组件的第二种方式美化React组件的样式小Demo穿起来之前学习的知识点React中绑定事件React组件的生命周期1. React中创建组件第1种 - 创建组件的方式使用构造函数来创建组件，如果要接收外界传递的数据，需要在 构造函数的参数列表中使用props来接收；必须要向外return一个合法的JSX创建的虚拟DOM；
2020-05-29 19:06:32
210
原创 React简介
1. React简介React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram（照片交友） 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。Angular1 2009 年 谷歌 MVC 不支持 组件化开发由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。清
2020-05-29 19:04:25
212
原创 webpack3快速入门
webpack快速入门教程###1、了解Webpack相关* 什么是webpack* Webpack是一个模块打包器(bundler)。* 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理* 它将根据模块的依赖关系进行静态分析，生成对应的静态资源* 理解Loader* Webpack 本身只能加载JS/JSON模块，如果要加载...
2020-01-10 18:07:31
83
原创 Webpack快速入门
了解Webpack相关什么是webpackWebpack是一个模块打包器(bundler)。在Webpack看来, 前端的所有资源文件(js/css/img/less/…)都会作为模块处理它将根据模块的依赖关系进行静态分析，生成对应的静态资源理解LoaderWebpack 本身只能加载JS模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载...
2020-01-10 18:05:07
91
原创 Gulp快速入门
Gulp介绍中文主页: http://www.gulpjs.com.cn/gulp是与grunt功能类似的前端项目构建工具, 也是基于Nodejs的自动任务运行器能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务gulp更高效(异步多任务), 更易于使用, 插件高质量...
2020-01-10 18:03:51
125
原创 Grunt快速入门
Grunt介绍中文主页 : http://www.gruntjs.net/是一套前端自动化构建工具，一个基于nodeJs的命令行工具它是一个任务运行器, 配合其丰富强大的插件常用功能:合并文件(js/css)压缩文件(js/css)语法检查(js)less/sass预编译处理其它…安装nodejs, 查看版本node -v创建一个简单的应用grunt_tes...
2020-01-10 18:02:34
113
原创 sublime安装package control插件的方法
1.手动安装浏览器输入 https://sublime.wbond.net/Package%20Control.sublime-package从这里下载这个文件下载好以后，打开sublime text3，选择菜单Preferences->Browse Packages 打开安装目录，此时会进入到一个叫做Packages的目录下，点击进入上一层目录Sublime Text3，在此目录...
2019-12-06 08:57:59
315
转载 总结——写在最后
总结篇：写在最后看到这里，也就是要和大家说再见的时候了，其实还有很多想和大家分享的内容没能来得及一一阐述，但是没有关系，我相信在今后学习 Vue 的道路上我们永远会保持关注，彼此照应，一起学习，一起进步。而正所谓温故而知新，可以为师矣，接下来我们不妨一起回顾下本小册的主要内容。回顾与总结浏览小册目录，我们可以清楚的将小册的内容归类为构建与开发两部分，这也是本小册所要分享的知识点所在。在小...
2019-09-29 08:36:06
81
转载 开发拓展3——尝试使用外部数据
开发拓展篇 3：尝试使用外部数据当你应用的 UI 层面已经趋于完善的时候，接下来你就需要去获取动态的数据来实现真实的应用场景。那么动态数据从哪里来呢？前端主要还是通过接口的形式获取。如果有专业的接口开发人员和你一起完成一个应用，那么你只需要和他定义好接口的入参和出参，然后进行调用就好了，这也是公司中前端与后台的常见合作方式。而在以下场景下，你可能并不需要或者并没有后台工程师提供接口给你：...
2019-09-29 08:29:39
176
转载 开发拓展2——将 UI 界面交给第三方库
开发拓展篇 2：将 UI 界面交给第三方库当你了解了 Vue 项目构建和开发的基本知识后，我认为接下来你一定想亲自在构建出的项目中填充自己的业务和功能逻辑，因为目前其还是空白的。但是这里我不会教你如何实现一个具体的业务和功能模块，因为每个人想要实现的东西都可能不尽相同。如果你想快速开发一款应用，并且不想过多的操心页面 UI 层次的内容，比如你不想去实现一个下拉 UI 组件或设计一个 icon ...
2019-09-29 08:28:51
185
转载 开发拓展1——扩充你的开发工具
开发拓展篇 1：扩充你的开发工具在项目开发中，工具的使用起到了至关重要的作用，正所谓工欲善其事，必先利其器，掌握一些实用的开发工具能够使我们的开发效率事半功倍。那么我们应该掌握哪些开发工具的使用方法呢？其实一路走来，我们已经介绍的开发工具包括了 npm、yarn、webpack 以及一些集成在项目中的工具包，这些工具一定程度上都大大简化了我们的开发流程，起到了项目助推剂的作用。因此在开发工具的...
2019-09-29 08:27:45
360
转载 开发指南5——Vue API 盲点解析
开发指南篇 5：Vue API 盲点解析在了解了一些实用的开发技巧和编码理念后，我们在项目的开发过程中难免也会遇到因为不熟悉 Vue API 而导致的技术问题，而往往就是这样的一些问题消耗了我们大量的开发时间，造成代码可读性下降、功能紊乱甚至 bug 量的增加，其根本原因还是自己对 Vue API 的 “无知”。本文将介绍 Vue 项目开发中比较难以理解并可能被你忽视的 API，唯有知己知彼，...
2019-09-28 09:48:58
614
转载 开发指南4——数据驱动与拼图游戏
开发指南篇 4：数据驱动与拼图游戏数据驱动是 Vue 框架的核心特性之一，也是 Vue 响应式原理的具体体现，相信大家对其应该深有体会，尤其是在操作数据来触发页面更新的时候。为了让大家更加了解数据驱动的理念，并解决使用过程中可能出现的一系列问题，本文将结合比较常见和简单的 “拼图游戏” 来展示 Vue 数据驱动的魅力所在。效果展示首先我们先来看一下实现的 “拼图游戏” 的动态效果：在不...
2019-09-28 09:47:45
142
转载 开发指南3——合理划分容器组件与展示组件
开发指南篇 3：合理划分容器组件与展示组件上篇文章我们提到了组件的概念，组件是目前模块化、组件化开发模式中必不可少的单元形式，那么除了其概念和可复用性外，我们对它的职能划分了解多少呢？本文将立足 Vue 组件的职能来谈谈我个人对于其划分的理解，唯有了解不同类型组件的职能才能编写出可维护、低耦合的前端代码。组件的职能划分如果要将 Vue 组件按照职能划分，我们可以将其分为两种类型：容器组件和...
2019-09-17 11:31:45
222
转载 开发指南2——学会编写可复用性模块
开发指南篇 2：学会编写可复用性模块在生活中，重复的机械劳动会消耗我们的时间和精力，提高生产成本，降低工作效率。同样，在代码世界中，编写重复的代码会导致代码的冗余，页面性能的下降以及后期维护成本的增加。由此可见将重复的事情复用起来是提高生产效率、降低维护成本的不二之选。在 Vue 项目中，每一个页面都可以看作是由大大小小的模块构成的，即便是一行代码、一个函数、一个组件都可以看作是一个个自由的模...
2019-09-11 18:02:15
191
转载 开发指南1——从编码技巧与规范开始
开发指南篇 1：从编码技巧与规范开始当我们完成项目的构建，进入开发阶段的时候，除了你需要了解框架本身的知识点外，我们还需要提前掌握一些项目的编码技巧与规范，在根源上解决之后因编码缺陷而导致的项目维护困难、性能下降等常见问题，为项目多人开发提供编码的一致性。本文将罗列项目中常用的一些编码技巧与规范来帮助大家提升代码质量，并会结合代码片段加强大家的理解与认知。当然不是所有实例都是针对 Vue.js...
2019-09-11 18:00:05
138
转载 vue脚手架4——项目整合与优化
构建实战篇 4：项目整合与优化前几小节，我们讲述了 Vue 项目构建的整体流程，从无到有的实现了单页和多页应用的功能配置，但在实现的过程中不乏一些可以整合的功能点及可行性的优化方案，就像大楼造完需要进行最后的项目验收改进一样，有待我们进一步的去完善。使用 alias 简化路径使用 webpack 构建过 Vue 项目的同学应该知道 alias 的作用，我们可以使用它将复杂的文件路径定义成一个...
2019-09-11 14:47:40
2444
转载 vue脚手架3——多页路由与模板解析
构建实战篇 3：多页路由与模板解析上篇文章中我们成功打包并输出了多页文件，而构建一个多页应用能够让我们进一步了解项目配置的可拓展性，可以对学习 Vue 和 webpack 起到强化训练的效果，本文将在此基础上主要针对多页路由及模板的配置进行系列的介绍。路由配置1. 跳转在配置路由前，首先我们要明确一点就是，多页应用中的每个单页都是相互隔离的，即如果你想从 page1 下的路由跳到 page...
2019-09-11 10:40:21
868
转载 vue脚手架2——使用 pages 构建多页应用
构建实战篇 2：使用 pages 构建多页应用经过对单页应用配置的了解，相信大家应该对如何构建一个 Vue 单页应用项目已经有所收获和体会，在大部分实际场景中，我们都可以构建单页应用来进行项目的开发和迭代，然而对于项目复杂度过高或者页面模块之间差异化较大的项目，我们可以选择构建多页应用来实现。那么什么是多页应用，如何构建一个多页应用便是本文所要阐述的内容。概念首先我们可以把多页应用理解为由...
2019-09-11 08:42:34
4725
转载 vue脚手架1——单页应用的基本配置
构建实战篇 1：单页应用的基本配置前几篇文章我们介绍了 Vue 项目构建及运行的前期工作，包括 webpack 的配置、环境变量的使用等，在了解并掌握了这些前期准备工作后，那么接下来我们可以走进 Vue 项目的内部，一探其内部配置的基本构成。配置1. 路由配置由于 Vue 这类型的框架都是以一个或多个单页构成，在单页内部跳转并不会重新渲染 HTML 文件，其路由可以由前端进行控制，因此我...
2019-09-10 17:37:05
387
转载 3-env 文件与环境设置
构建基础篇 3：env 文件与环境设置在实际项目的开发中，我们一般会经历项目的开发阶段、测试阶段和最终上线阶段，每一个阶段对于项目代码的要求可能都不尽相同，那么我们如何能够游刃有余的在不同阶段下使我们的项目呈现不同的效果，使用不同的功能呢？这里就需要引入环境的概念。一般一个项目都会有以下 3 种环境：开发环境（开发阶段，本地开发版本，一般会使用一些调试工具或额外的辅助功能）测试环境（测试...
2019-09-10 17:34:31
2584
转载 2-webpack 在 CLI 3 中的应用
构建基础篇 2：webpack 在 CLI 3 中的应用webpack 作为目前最流行的项目打包工具，被广泛使用于项目的构建和开发过程中，其实说它是打包工具有点大材小用了，我个人认为它是一个集前端自动化、模块化、组件化于一体的可拓展系统，你可以根据自己的需要来进行一系列的配置和安装，最终实现你需要的功能并进行打包输出。而在 Vue 的项目中，webpack 同样充当着举足轻重的作用，比如打包压...
2019-09-10 16:46:44
281
转载 1-你需要了解的包管理工具与配置项
构建基础篇 1：你需要了解的包管理工具与配置项任何一个项目的构建离不开工具和统一的管理标准，在项目开发和维护过程中，我们需要了解安装包的相应工具和配置文件，以此来有效的进行项目的迭代和版本的更新，为项目提供基本的运行环境。本文将详细介绍构建 Vue.js 项目相关的依赖包安装工具和相应的配置文件，为大家提供参考。介绍相信大家对于包管理工具的使用一定不会陌生，毕竟它已经成为前端项目中必不可少的...
2019-09-10 15:39:45
231
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人