上一篇随笔讲述了新手入门入门前端 里面提到的第四阶段跟上当前前端的发展需要入门一个框架和自动化工具,当时推荐的是webpack+react 今天正好有空,也把自己入门webpack + react 的艰辛过程写下来, 现在想起来真是一脸泪.过程不表了, 现在将我看到的一些教程总结一下,挑选出对新手比较友好的学习过程.   第一步: webpack 和 react  是要配合node.js 一起使用的. 去node.js官网下载当前node, 官网会根据你的环境匹配你适合的版本,直接下载安装就好了…

开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建package.json并且安装webpack和webpack-dev-server //不用你书写任何,直接帮你创建一个最简单的package.json文件npm init -y //webpack必须,webpack-dev-server开启服务热加载做代理 npm install --save-dev w…

手把手教你用Vue2+webpack+node开发一个H5 app ​前一篇vue2 + webpack + node 开发一个小demo说到了用vue的一些基本用法,这一篇就讲一个复杂一点的更完整的例子,仿制一个H5 APP,这个APP就叫[one.一个],在百度搜索 one 就能找到啦[为什么仿这个呢,因为这是我用了很久的一个app呀…

项目体验地址 免费视频教程 分别使用原生JS,Vue和React,手把手教你开发一个H5小游戏,快速上手Vue和React框架的使用. 项目截图 在线体验 在线体验 游戏介绍 幸运水果机是一款街机游戏,游戏界面由24个方格拼接成一个正方形,每个方格中都有一个不同的水果图形,方格下都有一个小灯.玩家使用游戏币选择希望押注的目标,按下开始后,小灯开始绕着正方形中每个格子转.当小灯停下时,如果停在玩家押注的目标上则可赢取相应的游戏币. 物品:游戏中的物品有八种,分别为:苹果.西瓜.木瓜.橙子.铃铛.7…

前言 最近项目用到react,其实前年我就开始接触react,时光匆匆,一直没有时间整理下来(太懒啦)!如今再次用到,称工作间隙,对全家桶做一次总结,项目源码地址.废话不多说,上码. 创建一个文件目录并初始化package.json mkdir react-Buckets npm init 填好相关信息如图 安装webpack 需要有全局安装哦,不然一会用webpack编译时会报错的 关于装依赖加入package.json时,加 --save-dev表示开发环境要用的依赖,如果加 -save表示…

前言 上一篇已经讲了一些react的基本配置,本遍接着讲热更新以及react+redux的配置与使用. 热更新 我们在实际开发时,都有用到热更新,在修改代码后,不用每次都重启服务,而是自动更新.并而不是让浏览器刷新,只是刷新了我们所改代码影响到的模块. 关于热更新的配置,可看介绍戳这里 因为我们用了webpack-dev-server,我们可以不需要向上图一样配置,只需要修改启动配置以修改默认值,--hot项. "start": "webpack-dev-server --c…

前言 本篇主要是讲一些全家桶的优化与完善,基础功能上一篇已经讲得差不多了.直接开始: Source Maps 当javaScript抛出异常时,我们会很想知道它发生在哪个文件的哪一行.但是webpack 总是将文件输出为一个或多个bundle,我们对错误的追踪很不方便.Source maps试图解决这一个问题,我们只需要改变一下配置项即可. 在webpack.dev.config.js中加入: devtool:"inline-source-map" css编译 这里以less-load…

文:小 boy(沪江网校Web前端工程师) 本文原创,转载请注明作者及出处 经常逛 webpack 官网的同学应该会很眼熟上面的图.正如它宣传的一样,webpack 能把左侧各种类型的文件(webpack 把它们叫作「模块」)统一打包为右边被通用浏览器支持的文件.webpack 就像是魔术师的帽子,放进去一条丝巾,变出来一只白鸽.那这个「魔术」的过程是如何实现的呢?今天我们从 webpack 的核心概念之一 -- loader 来寻找答案,并着手实现这个「魔术」.看完本文,你可以: 知道 web…

很多人刚学习react的时候,往往因为繁琐的配置而头疼,这里我将手把手教大家怎么用webpack配置react和redux的环境,这篇教程包括前端react和后台node整个网站的环境配置,对node没兴趣的可以只看这篇. 这里是下篇链接:手把手教你webpack.react和node.js环境配置(下篇) 我把所有代码都放到了github上面供参考:webpack-react-express环境配置 1. 什么是webpack? Webpack 是当下最热门的前端资源模块化管理和打包工具.它可…

上篇我介绍了前端下webpack和react.redux等环境的配置,这篇将继续重点介绍后台node.js的配置. 这里是上篇链接:手把手教你webpack.react和node.js环境配置(上篇) 我把所有代码都放到了我的github上:webpack-react-express环境配置 server 后台这边的配置就简单了很多,我这里拿node.js的express框架来配置. express Express 是一个基于 Node.js 平台的极简.灵活的 web 应用开发框架,它提供一系…

30分钟手把手教你学webpack实战 阅读目录 一:什么是webpack? 他有什么优点? 二:如何安装和配置 三:理解webpack加载器 四:理解less-loader加载器的使用 五:理解babel-loader加载器的含义 六:了解下webpack的几个命令 七:webpack对多个模块依赖进行打包 八:如何独立打包成样式文件 九:如何打包成多个资源文件 十:关于对图片的打包 十一:React开发神器:react-hot-loader 回到顶部 什么是webpack? 他有什么优点?…

每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如SqlSugar,NH,Dapper等,在读取连接字符串的时候,往往把信息保存到一个配置文件中,例如appsetting.json, 网上有很多关于读取appsetting.json都是通过注入的方式,  在ORM读取配置的时候,都是在一个类库里面,所以用注入的方式有时候不适合[个人理解] 因以上场景…

项目演示地址 项目演示地址 项目代码结构 前言 React 框架的优雅不言而喻,组件化的编程思想使得React框架开发的项目代码简洁,易懂,但早期 React 类组件的写法略显繁琐.React Hooks 是 React 16.8 发布以来最吸引人的特性之一,她简化了原有代码的编写,是未来 React 应用的主流写法. 本文通过一个实战小项目,手把手从零开始带领大家快速入门React Hooks. 在本项目中,会用到以下知识点: React 组件化设计思想 React State 和 Props…

项目演示地址 项目演示地址 项目源码 项目源码 其他版本教程 Vue版本 小程序版本 项目代码结构 前言 React 框架的优雅不言而喻,组件化的编程思想使得React框架开发的项目代码简洁,易懂,但早期 React 类组件的写法略显繁琐.React Hooks 是 React 16.8 发布以来最吸引人的特性之一,她简化了原有代码的编写,是未来 React 应用的主流写法. 本文通过一个实战小项目,手把手从零开始带领大家快速入门React Hooks.本项目线上演示地址: 在本项目中,会用到以…

新书上线 大家好,笔者的新书<Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统>已上线,此书内容充实.材质优良,乃家中必备垫桌脚垫菜盘之良器,欢迎大家无情购买使用,欢迎大家共同学习交流,欢迎大家提出改进意见. 内容简介: 本书从项目实践出发,手把手.心贴心地带领读者从零开始,一步一步地开发出功能相对完整的权限管理系统,从而深入掌握当前主流的Spring Boot + Spring Cloud + Vue前后端集成开发技术. 全书分为三…

手把手教你用vue-cli搭建vue项目 本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子.使用vue-cli搭建项目最开始我也是看网上的教程一步步搭下来,所以其中的一些步骤说法为了表达正确会进行一定参考. 一. 项目使用技术.框架简单介绍 我们使用vue-cli来搭建整个项目,vue-cli就是一个脚手架,步骤很简单,输入几个命令之后就会生成整个项目,里面包括了webpack.ESLint.babel很多配置等等,省了很多事…

手把手教你使用 VuePress 搭建个人博客 有阅读障碍的同学,可以跳过第一至四节,下载我写好的工具包: git clone https://github.com/zhangyunchencc/vuepress-devkit.git 然后从第五节开始看. 一.为什么你需要一个博客? 优秀的程序员都在写博客,写博客有很多好处: 帮助自己梳理.总结.理解知识点(个人提升) 帮助别人理解知识点(好人一生平安) 简历更好看,更多面试机会(升职加薪) 二.什么是 VuePress,为什么要使用 VueP…

上一章说道:十分钟上手-搭建vue开发环境(新手教程)https://www.jianshu.com/p/0c6678671635 开发环境搭建好之后,那么开始新添加一些页面,构建最基本的vue项目,本章会手把手教你用vue-cli构建一个简单的路由应用. 1:启动项目,启动之后,第一个vue项目环境搭建成功 npm run dev 2:创建后目录结构如下: build 项目构建(webpack)相关代码 config 配置目录,包括端口号等.我们初学可以使用默认的. node_modules…

摘要: PWA图文教程 原文:PWA入门:手把手教你制作一个PWA应用 作者:MudOnTire Fundebug经授权转载,版权归原作者所有. 简介 Web前端的同学是否想过学习app开发,以弥补自己移动端能力的不足?但在面对一众的选择时很多同学略感迷茫,是学习ios还是android开发?是学习原生开发.混合开发(比如:Ionic),还是使用react native或者flutter这样的跨平台框架?而app开发的学习周期长.学习成本高也让一部分人望而却步.得益于前端技术的飞速发展.浏览器性…

        猿实战是一个原创系列文章,通过实战的方式,采用前后端分离的技术结合SpringMVC Spring Mybatis,手把手教你撸一个完整的电商系统,跟着教程走下来,变身猿人找到工作不是问题.想要一起实战吗?,关注公主号猿人工厂,获取基础代码,手把手带你开发属于自己的电商系统. 设计的文章我们告一段落了,接下来的日子里,猿人君就带着大家一起来完成我们的设计——手把手的教你撸一个电商系统. 既然要搭建一个电商系统,那么自然少不了,框架搭建的事情,web开发发展到今天,前后端分离已是不…

DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢迎Star) 官方交流:添加DevUI小助手(devui-official) DevUIHelper插件:DevUIHelper-LSP(欢迎Star) 前言 随着前端生态的繁荣,工具库几乎是高效开发的必需品,lodash/dayjs/numberal等实用的工具库相信大家都用过. 我近期在开发Ca…

手把手教你撸个vue2.0弹窗组件 在开始之前需要了解一下开发vue插件的前置知识,推荐先看一下vue官网的插件介绍 预览地址 http://haogewudi.me/kiko/inde... 源码地址 https://github.com/rascalHao/... 搭建项目 vue-cli将你的vue项目初始化建好 vue init webpack my-project 平常我们引入插件的流程是: npm i <package> -S import Vue from 'vue' impor…

一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入门教程   redux middleware 详解   Redux研究 React 入门实例教程 webpack学习demo NPM 使用介绍 三.工程搭建 之前有写过 webpack+react+es6开发模式 ,文章里介绍了一些简单的配置,欢迎访问. 1.可以npm init, 创建一个新的工程…

我们都知道,开发一个app很大程度依赖服务端:服务端提供接口数据,然后我们展示:另外,开发一个app,还需要美工协助切图.没了接口,没了美工,app似乎只能做成单机版或工具类app,真的是这样的吗?先来展示下我的个人app,没有服务端,没有美工完成的,换言之,我干了所有人的活: 这个app叫"微言",他对于我意义很重大,最初微言只是我一个练手的项目,刚刚工作,技术有限,微言只是sqlite记事本类app,只能本地操作,后来慢慢演变现在几近完美的app,从中我学到很多,熟悉了立项到上线的…

React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了React Native,前端的边界似乎广阔无边.而Webpack凭借它异步加载和可分离打包等优秀的特性,走在取代Grunt和Gulp的路上.而面向未来的ES6,模块化的支持似乎已成定局. 我们现在就可以打造自己的Webpack+React+ES6环境并且开始探索起来. 这篇文章就给还没走在这条路上的前端一…

一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等学习网址:http://www.cnblogs.com/hujunzheng/p/5405780.html 二.简单的步骤条组件 1.通过react自定义的组件进行模拟   注:只是用了react,用到相关react的js请到 https://github.com/hjzgg/webpack-rea…

前言 前面一篇文章介绍了Travis自动部署Hexo的常规使用教程,也是个人比较推荐的方法. 前文最后也提到了在Windows系统中可能会有一些小问题,为了在Windows系统中也可以实现使用Travis自动部署Hexo,本文介绍另外一种方式来实现. 是通过GitHub API来实现的,用到了Linux中的sed命令. 新建Access Token Personal Access Token是用于操作repo的口令. 点击用户图像,然后点击Settings(设置)选项. 进入设置面板后,点击左侧…

前言 前面两篇文章介绍了在github上使用hexo搭建博客的基本环境和hexo相关参数设置等. 基于目前,博客基本上是可以完美运行了. 但是,有一点是不太好,就是源码同步问题,如果在不同的电脑上写文章会非常不方便. 是因为hexo使用的部署命令是把生成好的静态文件上传到仓库中的,所以,在其他电脑上同步下来的只是静态文件而已,不是源码. 到这里就会想到能不能这样:将源码同步到远程仓库后,可以实现自动生成部署呢? 答案是肯定的,可以通过Travis CI来实现. 那么,本文就介绍一下Travis…

前言 前文手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置介绍了github注册.git相关设置以及hexo基本操作. 本文主要介绍一下hexo的常用参数设置. 配置文件说明 网站配置文件是在根目录下的**_config.yml文件,是yaml格式的. 所有的配置项后面的冒号(:)与值之间要有一个空格.** 官方配置文件说明 # Hexo Configuration ## Docs: https://hexo.io/docs/configuration.h…

前言 有朋友问了我关于博客系统搭建相关的问题,由于是做开发相关的工作,我给他推荐的是使用github的gh-pages服务搭建个人博客. 推荐理由: 免费:github提供gh-pages服务是免费的,有300MB空间: 开源:由于github开源的原因,有很多人参与其中,自然技术支持很好. 便捷:博客完全托管在github上,基本上不需要花时间去管理,博客使用Markdown语法,上手很容易. 需要了解的内容(能掌握更好): html+css+javascript git基本语法 markdo…