工程化
前端工程化
为谁攀登
积跬步至千里、 自律专注自由
展开
-
webpack如何快速入门和上手?看这篇就会了
前言本文我们将会从环境搭建、服务器配置、常用Loader、常用插件和生产打包等方面,一步步详细的介绍Webpack工具的使用,目标是希望可以让大家快速入门和应用。关于Webpack官网介绍是这样的:它是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 Webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。目录前言1、环境搭建1.1、目原创 2020-05-24 19:03:12 · 706 阅读 · 0 评论 -
Gulp环境搭建与应用(一)
目录1、环境搭建1.1、全局依赖安装1.2、项目依赖安装1.3、创建gulpfile.js文件1.4、任务执行2、Javscript压缩3、三级目录4、二级目录1、环境搭建1.1、全局依赖安装先执行npm install --global gulp命令,安装全局依赖环境1.2、项目依赖安装在项目根目录下执行npm install --save-dev gulp命令,安装项目依赖环境1.3、创建gulpfile.js文件在项目根目录下创建gulpfile.js文件,并编写一个测试任务//cb表原创 2020-05-23 10:00:07 · 497 阅读 · 0 评论 -
Less环境搭建与应用
介绍官网是这么说的:Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。目录介绍1、环境安装2、使用命令编译文件3、常用语法3.1、变量声明3.2、混合3.3、嵌套3.4、计算3.5、函数3.6、判断3.7、继承1、环境安装使用命令cnpm install -g less安装环境,g表示全局安装2、使用命令编译文件在项目中新建一个less01.less文件,并编写一端样式代码@原创 2020-05-21 22:54:53 · 423 阅读 · 0 评论 -
express搭建与应用(三)
目录1、连接数据库2、server操作3、三级目录1、连接数据库2、server操作3、三级目录原创 2020-05-20 23:05:28 · 558 阅读 · 0 评论 -
express搭建与应用(二)
目录1、跨域处理1.1、跨域问题演示1.2、方式一:设置header头信息1.3、方式二:设置jsonp数据格式2、数据过滤3、连接数据库4、服务操作1、跨域处理1.1、跨域问题演示创建一个简单服务,使用res.send()方式返回数据给前端html模板var express = require("express");var app = express();app.get("/",function(req,res){ res.send({ msg:"跨域测试" })})a原创 2020-05-19 22:03:59 · 411 阅读 · 0 评论 -
express搭建与应用(一)
介绍express是基于 Node.js 平台,快速、开放、极简的 Web 开发框架,下面我们讲解其环境搭建和常见用法目录介绍1、环境搭建1.1、node安装1.2、express安装1.3、环境验证2、路由2.1、路由配置2.2、路由示例2.2.1、文件结构2.2.2、代码实现2.2.3、效果查看3、get请求与post请求3.1、get请求参数解析3.2、post请求参数解析1、环境搭建1.1、node安装去node中文网下载对应版本进行安装,然后在dos窗口中分别使用node -v和npm原创 2020-05-17 20:52:57 · 559 阅读 · 0 评论 -
Node常见用法
目录1、web服务器1.1、代码示例1.2、效果查看2、事件触发器2.1、代码示例2.2、效果查看3、IO操作3.1、buffer操作3.1.1、代码示例3.1.2、效果查看3.2、read操作3.2.1、代码示例3.2.2、效果查看3.3、write操作3.3.1、代码示例3.3.2、效果查看1、web服务器1.1、代码示例/** * 编写一个web服务,默认端口3000 */var http = require('http');var hostname = '127.0.0.1';原创 2020-05-16 18:56:42 · 1233 阅读 · 0 评论 -
RequireJS介绍与应用
介绍官方介绍RequireJS是一个JavaScript文件和模块加载器。它针对浏览器内使用进行了优化,但可以在其他JavaScript环境(例如Rhino和Node)中使用。使用像RequireJS这样的模块化脚本加载器将提高代码的速度和质量。下面我们会使用一个实例对其引用方式、使用方法进行说明目录介绍1、示例目录结构2、实例开发2.1、模板编写2.2、配置文件处理2.3、数据处理2.4、视图处理2.5、数据与视图绑定2.6、效果查看1、示例目录结构下图是使用RequireJS的常规目录结构介绍原创 2020-05-16 11:08:38 · 556 阅读 · 0 评论 -
JavaScript模块扩展
介绍实际开发过程中,一个module模块可能无法满足我们的需求,此时我们需要对模块进行二次扩展,适配实际需求,下面介绍几种常规扩展方法。目录介绍1、代码示例1.1、原始模块1.2、扩展模块2、效果查看1、代码示例1.1、原始模块定义一个module模块 /** * 原始模块 */ var module = (function () { function test1() { return "test1"; }原创 2020-05-16 06:40:44 · 500 阅读 · 0 评论 -
JavaScript模块中定义get方法与set方法
目录代码示例效果查看代码示例自定义getUsername()和setUsername()方法,get方法用于对外提供数据查询,set方法是对外提供数据修改通道。<script type="text/javascript"> /** * 模块get方法和set方法定义 */ var module = (function () { //对象定义 var userObj = { username:"lu原创 2020-05-15 07:50:34 · 1462 阅读 · 0 评论 -
JavaScript模块定义
介绍JavaScript模块定义需要遵循“开闭原则”,即对修改关闭,对扩展开放,下文将从三个不同的层次进行演示说明。目录介绍形态一:自定义对象形态二:自定义函数形态三:自定义模块形态一:自定义对象如代码所示,我们定义一个userObj对象,里面封装了它的属性,这种代码结构更加规范整洁,调用时比流水账式的js代码舒服很多。但是其也有不足之处,就是在外部可以随意修改对象的属性,不符合“开闭原则”,所以我们需要找到更好的写法。<script type="text/javascript">原创 2020-05-15 07:19:49 · 1009 阅读 · 0 评论 -
Swiper轮播器基础结构
Swiper轮播器基础结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/swiper.min.css"> <style> .swiper-container {原创 2020-05-13 23:51:11 · 457 阅读 · 0 评论 -
bootstrap框架结构
目录1、基本结构1.1、常规html结构1.2、栅格主结构2、栅格分类1、基本结构1.1、常规html结构<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt原创 2020-05-13 22:44:45 · 646 阅读 · 0 评论