Web
文章平均质量分 73
不睡觉的怪叔叔
行胜于言
展开
-
统一资源定位符(URL)详解
一、统一资源定位符概念 统一资源定位符,又叫URL(Uniform Resource Locator),是专为标识Internet网上资源位置而设置的一种编址方式,我们平时所说的网页地址指的即是URL。 统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎...转载 2018-06-12 16:02:55 · 26874 阅读 · 0 评论 -
canvas绘制重复图案
canvas的createPattern()可以用于绘制重复图案,它可以接收image元素、canvas元素或video元素作为图案参数,并且可以传入如何重复图案的字符串参数:repeat —— 为整个区域绘制重复图案 repeat-x —— 只在x方向绘制重复图案 repeat-y —— 只在y方向绘制重复图案 no-repeat ——...原创 2019-08-16 10:24:20 · 4023 阅读 · 0 评论 -
webpack教程六:Entry与Output的基础配置
目录一、多入口打包的配置二、设置公共路径一、多入口打包的配置 webpack支持多入口的打包操作吗?答案是肯定的! 让我们修改webpack.config.js: webpack.config.js:const path = require('path');const HtmlWebpackPlugin = require('html-webpac...原创 2019-05-29 09:22:30 · 698 阅读 · 0 评论 -
webpack教程八:构建简单web服务器
目录一、观察模式二、webpack-dev-server三、webpack-dev-middleware + express 在前面文章的介绍使用webpack的过程中,我们每次需要打包源代码时,都需要在命令行中手动运行npm run bundle(脚本命令)进行打包。也就是每改一次源代码,都需要手动打包一次,这样就很麻烦。 那么webpack有没有帮我们自动打包的...原创 2019-06-12 09:28:14 · 896 阅读 · 0 评论 -
Stylus基本使用
本文转载自:https://www.jianshu.com/p/5fb15984f22d一、介绍 这个哥们儿学名叫 stylus,是 CSS 的预处理框架。 CSS 预处理,顾名思义,预先处理 CSS。那 stylus 咋预先处理呢?stylus 给 CSS 添加了可编程的特性,也就是说,在 stylus 中可以使用变量、函数、判断、循环一系列 CSS 没有的东西来...转载 2019-05-28 18:04:10 · 1546 阅读 · 1 评论 -
webpack教程七:source map
目录一、source map简介二、使用source map一、source map简介 现在先让我们清理原先的src文件夹,只留下index.js和template.html: 并且修改index.js: index.js:consele.log('hello world!'); 很明显这是一个错误语句,因为console写成了con...原创 2019-06-03 09:55:17 · 6338 阅读 · 0 评论 -
webpack教程五:插件
目录一、插件介绍二、HtmlWebpackPlugin三、CleanWebpackPlugin一、插件介绍 首先,插件(Plugins)的目的在于解决loader无法实现的其他事。 webpack提供了许多的插件以支持打包时进行更多的操作。另外,除了webpack提供的原生插件,许多第三方插件也使我们的打包更加便捷。 现在我们来看两个实际打包过程中会经...原创 2019-05-28 09:40:41 · 417 阅读 · 0 评论 -
webpack教程二:webpack的安装
目录一、安装node环境二、全局安装三、本地安装一、安装node环境 webpack需要在node环境下才能运行,所以需要首先安装最新版本的node.js: 直接傻瓜式下一步、下一步就可以完成安装了。 安装完成后使用node -v就可以查看当前本机安装的node的版本: npm也会随着node的安装时一同安装,所以,也可以用npm -...原创 2019-05-13 14:21:22 · 528 阅读 · 0 评论 -
Webpack教程四:Loader
目录一、什么是Loader二、打包图片2.1、file-loader2.2、url-loader2.3、file-loader和url-loader的比较三、打包CSS文件3.1、style-loader和css-loader3.2、sass-loader3.3、postcss-loader3.4、处理sass文件中引入另外sass文件的情况3.5、CS...原创 2019-05-24 10:12:10 · 514 阅读 · 0 评论 -
webpack教程三:使用webpack的配置文件
目录一、使用webpack的配置文件二、使用NPM脚本三、打包输出内容介绍一、使用webpack的配置文件 进入上一节创建的webpack-demo目录,再新建一个src文件,放入以下几个文件: header.js:function Header(){ var webContent = document.getElementById('web...原创 2019-05-15 09:53:38 · 958 阅读 · 0 评论 -
webpack教程一:什么是webpack?
目录一、面向过程的前端开发二、面向对象的前端开发(代码模块化)三、使用webpack打包器四、webpack究竟是什么呢?一、面向过程的前端开发 首先,让我们来看一段面向过程的前端开发的代码: dits.html:<!DOCTYPE html><html lang="en"><head> <meta...原创 2019-05-10 10:25:01 · 759 阅读 · 0 评论 -
手把手教你用vue-cli搭建vue项目
本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子。使用vue-cli搭建项目最开始我也是看网上的教程一步步搭下来,所以其中的一些步骤说法为了表达正确会进行一定参考。一、 项目使用技术、框架简单介绍我们使用vue-cli来搭建整个项目,vue-cli就是一个脚手架,步骤很简单,输入几个命令之后就会生成整个项目,里面包括了w...转载 2019-02-21 08:48:15 · 2912 阅读 · 0 评论 -
npm是什么?
一、npm是什么 npm(node package manager)为你和你的团队打开了连接整个JavaScript天才世界的一扇大门。它是世界上最大的软件注册表,每星期大约有30亿次的下载量,包含超过600000个包(即代码模块)。来自各大洲的开源软件开发者使用npm互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。 下面是关于npm的快速介绍: npm由三个独立的部分组成...转载 2018-07-10 09:34:46 · 40100 阅读 · 2 评论