- 博客(52)
- 资源 (2)
- 收藏
- 关注
RSS订阅转载 Vue爬坑之路三：Nginx部署
上回我们披荆斩棘用Vue终于开发了一个小系统现在来爬最后一个坑——项目打包部署测试环境从来没部署过项目的小白在一脸懵逼的努力尝试虚拟机配了一遍测试环境配了一遍坑也踩了一遍一. 连接主机我们的目的是在测试环境的主机上先配置一个Nginx服务器。先在本地安装Xshell与Xftp。准备.png打开Xshell，输入主机名，用户名，密码，点击OK登录。Note1：主机名一般管运维的小哥哥要地址就可以，如果没有可以在虚拟机vmware中装个linux系统（centOS之类的）作测试服.
2020-10-20 16:40:07
957
转载 vue-cli browserslist浏览器兼容性
1. 介绍你会发现有 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件)，指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。Autoprefixer : PostCSS插件解析C...
2019-11-12 10:34:29
1918
原创 create-react-app 执行 npm run eject 报错
报错代码：Remove untracked files, stash or commit any changes, and try again.npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! [email protected] eject: `react-scripts eject`npm ERR! Exit status 1npm ERR!...
2019-09-04 10:40:57
262
原创 Node—01初始化运行
方法如下：1、在cmd窗口下，直接输入命令 nodeD:\node-demo\hello.js，然后回车2、在cmd窗口下，输入node空格，然后把hello.js文件拖进去，然后回车。3、在cmd窗口下，进入hello.js所在的文件夹，输入 “nodehello.js”命令，然后回车然后浏览器运行http://127.0.0.1:8888/创建一个应用...
2019-06-05 16:28:48
304
转载 Sticky Footer，完美的绝对底部
写在前面做过网页开发的同学想必都遇到过这样尴尬的排版问题：在主体内容不足够多或者未完全加载出来之前，就会导致出现（图一）的这种情况，原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部。但是，我们期望的效果是页脚应该一直处于页面最底部（如图二）：笔者最近在项目中也遇到过这样的场景，在寻找最佳解决方案的过程中，了解到了 “Sticky Footer” 这个名词。本文将带大家重新认...
2019-05-15 14:18:13
150
原创 vue 初始化页面引导提示实现
<div class="modal" v-if="modalStep === 1"> <p>第一个对话框</p> <button @click="modalStep =2">下一步</button> </div>
2019-01-31 16:18:23
4587
原创 小程序中点击事件传参方式
<view wx:for="{{listData}}" class="item {{activeStatus === item.id ? 'active':''}}" wx:key="{{index}}" @tap="click({{item.id}})"> <text>{{item.title}}</text></vie
2018-12-21 17:39:26
2354
转载 PostCSS及其常用插件介绍
前几天，PostCSS 6.0 分布了。PostCSS 处理了很多你不必处理的乏味工作。它很巧妙的不同于预处理器，提供了可选的且更简洁的编程语言，来编译成 CSS，如 Sass、Less 与 Stylus。得出这个结论的部分原因是：它的名字。PostCSS 既能在预处理器将源代码编译成 CSS 之前也能在其之后对文件执行操作。 PostCSS 能替代你的预处理器。现在有很多插件实现了一些...
2018-12-14 16:23:26
3551
1
转载 如何使用FormData上传压缩裁剪后的图片Blob对象
在前端页面，我们通常会遇到需要用户上传图片的操作，可能还会在前端进行图片编辑的操作（比如头像的选区裁剪），然后如果图片过大的话，我们还会对图片进行压缩。这些功能我们通常通过Canvas来进行，最后使用Canvas API函数toDataURL来得到图片的Base64字符串，然后当我们要上传到后台的时候，会面临2种选择：直接将图片的Base64字符串Post到后端进行处理和保存 在前端将Bas...
2018-12-06 16:12:31
1299
1
转载 webpack+vuecli打包生成资源相对引用路径与背景图片的正确引用
资源相对引用路径问题描述一般情况下，通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。但当部署到带有文件夹的项目中，这种绝对路径就会出现问题，因为把配置的static文件夹当成了根路径，那么要解决这种问题，就得引用相对路径。解决办法打开webpack.prod.conf.js找到output：增加 publicPath: './', 即可，如...
2018-11-26 12:17:54
169
转载 解决IOSwebview加载H5页面频繁点击会上移
在IOSwebview 我们嵌入H5页面的开发的时候， 在H5的空白页面双击2次页面会上移动(function() { var agent = navigator.userAgent.toLowerCase(); var iLastTouch = null; //缓存上一次tap的时间 if (agent.indexOf('iphone') >= 0 || agent....
2018-08-31 17:36:40
1985
原创 Css3 活动抽奖弹框
style:<style type="text/css">.active-btn { width:60px; height:60px; background:url(images/activtiy-btn-bg.png) no-repeat center; background-size:100% 100%; position:fixed; top:50%; ri...
2018-08-20 13:13:38
470
原创 watch 使用
1、watch监听属性data(){ return { num:0 }},watch(){ num(newValue,oldValue){ console.log('newValue: '+newValue+' ,oldValue: '+oldValue); }}2、watch 监听数组data(){ obj:...
2018-07-23 14:03:44
271
原创 ES6 扩展运算符的应用
（1）复制数组数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组。 //复制数组 const a1 = [1,2]; const a2 = a1; a2[0] = 3; console.log(a1); //[3,2]上面代码中，a2并不是a1的克隆，而是指向同一份数据的另一个指针。修改a2，会直接...
2018-07-23 14:03:01
249
原创 ES6 Promise
1、案例var p = new Promise(function(resolve,reject){ //做一下操作 setTimeout(function(){ console.log('执行完毕'); resolve('执行成的随便数据') },2000)})//在上面的代码中，我们执行了一个异步操作，也就是setTimeout，...
2018-07-23 14:01:57
95
转载 ECharts3中的图表大小自适应
var worldMapContainer = document.getElementById('WorldMap');//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽var resizeWorldMapContainer = function () { worldMapContainer.style.width = window.innerWidth+'px'; worldMapContainer.style.height = window.innerHeight+'p
2018-07-23 14:01:27
623
原创 Es6 中for of 使用
var arr = ['apple', 'banana', 'orange', 'pear']//for in 数组，json 都可以遍历for(var i in arr){ console.log(i) //i 代表的是数组的索引值 console.log(arr[i])}//在Es6中 for of 只能遍历数组，但不能遍历json , 主要是配合 new M...
2018-07-04 14:34:52
2197
原创 Es6 中快速复制数组几种方式
1、第一种通过for循环方式var arr = [1,2,3]var arr2 = [];for(var i =0; i<arr.length; i++){ arr2[i] = arr[i]}arr.push(4)arr2.pop()console.log(arr, arr2) //[1,2,3,4], [1,2]2、第二种通过Es6 Array.from() 方式v...
2018-07-03 17:52:38
18870
1
转载 关于手机端input获取焦点呼起键盘背景图片挤压解决方案
1、解决图片挤压问题可以将背景图片height: 100%改为min-height:100%即可2、解决android下键盘不遮挡input输入框// 处理android 下键盘遮挡input let ua = window.navigator.userAgent; if(ua.indexOf('Android') > -1 || ua.ind...
2018-07-03 15:02:24
1873
转载 关于Vue下组件引入第三方外部Js几种方式
第一种方式：利用Vue的mounted生命周期const oScript = document.createElement('script');oScript.type = 'text/javascript';oScript.src = '//g.alicdn.com/sd/smartCaptcha/0.0.1/index.js';document.body.appendChild(oScr...
2018-07-03 14:55:04
25491
4
原创 使用Flex 弹性布局来实现手机端顶部，底部固定，中间滑动效果
html:<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-sca
2018-06-28 16:38:43
3939
转载 JS_常用的正则表达式
一、校验数字的js正则表达式 1 数字：^[0-9]*$ 2 n位的数字：^\d{n}$ 3 至少n位的数字：^\d{n,}$ 4 m-n位的数字：^\d{m,n}$ 5 零和非零开头的数字：^(0|[1-9][0-9]*)$ 6 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$ 7 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})...
2018-06-26 16:17:37
106
转载 git 上传项目
首先你需要一个github账号，所有还没有的话先去注册吧！https://github.com/我们使用git需要先安装git工具，这里给出下载地址，下载后一路直接安装即可：https://git-for-windows.github.io/1.进入Github首页，点击New repository新建一个项目2.填写相应信息后点击create即可 Repository name: 仓库名称Des...
2018-06-26 15:51:09
147
原创 Css3 浮窗定时左右摇摆
<!DOCTYPE html><!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, mini
2018-06-12 16:38:02
1039
转载 webpack实现开发、测试、生产等环境的打包切换
使用webpack构建的工程，在开发过程中不同环境的配置不同，在各种环境的打包切换过程中需要手动修改相关配置达到预期目的。但是每次都手动修改会比较麻烦，本文简单介绍如何通过对webpack进行配置，实现不同环境打包分类配置； 1.修改build文件夹下build.js文件 添加声明变量 修改前 修改后 ...
2018-04-04 13:59:54
3157
转载 Vue指令总结
今天主要复习一下我们最熟悉vue指令，想要代码撸得快，就要多看书，多看看官方的文档和学习指令，学习编程是一个非常享受的过程，尤其是你不断地去解决问题，获得一项技能，实现薪水的上涨。进行Vue的指令烹饪吧。v-text ：string 用法：更新元素的textContent,更新部分的textContent，需要使用{{Mustache}}插值v-html： string 用法：更新元素的inne...
2018-03-09 08:55:13
384
原创 vux 点击事件进行优化
Vux是基于Vue和WeUI的UI组件库。对于应用vux的项目因为点击绑定的是click事件，自然也存在移动端300ms延迟情况。我们可以用fastclick库来解决这个问题，具体步骤如下： 这里以vue+webpack项目目录为例： 安装方法：npm install fastclick --save-devnpm安装完fastclick 后，本地pac
2017-11-14 09:32:11
1051
原创 vue computed 与 watch 区别
1、watch一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性html: js:return{
2017-10-26 16:41:33
2975
转载 input text的电话号码分割js(如：152-9456-7894)
测试 $(function() { $("#phone").keyup(function() { var phoneNum = $(this).val(); //数字和长度验证 if (!/^[\d|-]*$/.test(phoneNum) || phoneNum.
2017-09-22 10:27:29
1497
原创 vue 倒计时
{{content}} export default { data(){ return { content: '', } }, props:{ endTime:{ type: String
2017-09-12 16:52:26
580
原创 vue router-view详细讲解一
在vue1.0版本的超链接标签还是原来的a标签，链接地址由v-link属性控制而vue2.0版本里超链接标签由a标签被替换成了router-link标签，但最终在页面还是会被渲染成a标签的关于为什么要把a换成router-link还是有原因，比如我们之前一直惯用的nav导航里面结构是（ul>li>a），router-link可以渲染为任何元素，这里可以直接渲染成li标签，同样能实现
2017-09-10 01:07:07
25513
原创 vue.js vue组件中style样式中的css引入背景图路径不对，解决方案
解决vue组件css中背景图片路径报错问题前提是你用了vue-cil，那么在build目录下找到utils.js中的ExtractTextPlugin.extract({}),里面添加下面这个属性就完美解决了publicPath: '../../'
2017-08-22 15:15:52
11636
原创 Vue proxyTable 开发环境下前端和后端真实数据对接问题和解决跨域
当我们前端用Vue开发项目的时候，涉及到前端和后台连调真实数据对接会出现很多问题，比如跨域... .我们需要把本地localhost 地址改为线上访问接口数据地址域名，开发环境API代理设置当前端与现有后端真实数据集成时，通常需要在使用dev服务器时访问后端API。 为了实现这一点，我们可以并行（或远程）运行dev服务器和API后端，并让dev服务器将所有API请求代理到实际的后端
2017-08-22 14:52:50
7390
原创 SVG 案例二
Demo: css:#div1{ width:780px; height:400px; background:#fff; margin:20px auto; overflow:hidden;}body{ background:black;} html: js: var svgNS = 'http://www.w3.org/2000/svg';
2017-05-24 17:01:41
345
原创 AngularJS
简介： AngularJS是为了克服HTML在构建应用上的不足而设计的，但AngualarJS 并不是万能的， AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷 通过双大括号{{}}语法进行数据绑定 通过DOM控制结构来实现迭代或者隐藏DOM片段
2017-03-14 14:06:10
265
原创 JS事件委托
事件委托： 1、什么是事件委托： 什么是事件呢？onclick,onmouseover,onmouseout,onfocus等就是事件 什么是委托呢？就是自己做的事情委托给别人来做，也就是本来事件时加在自己身上，你却把事件加在别人身上，来解决这个事件 优点一：提高性能：Demo1:给每个li 绑定了一个鼠标经过事件 window.onload=functio
2017-03-13 15:07:45
230
原创 DOM优化
1、什么是DOM 用于操作XML和HTML文档的应用程序 DOM节点 DOM树 DOM API整个文档是一个文档节点每个 HTML 元素是元素节点HTML 元素内的文本是文本节点每个 HTML 属性是属性节点注释是注释节点2、DOM与Javascript 浏览器会把DOM和JS独立实现
2017-03-13 09:37:34
288
原创 canvas
简介：是一个可以使用脚本(通常为JavaScript)在其中绘制图形的 HTML 元素.它可以用于制作照片集或者制作简单(也不是那么简单)的动画. 右边的图片展示了一些 的应用,在这个教程后面我们将看到.使用 元素不是非常难但你需要一些基本的HTML和JavaScript知识。 元素不被一些老的浏览器所支持，但是所有的主流浏览器的新近版本都支持。Canvas 的默认大小为300
2017-03-09 10:05:10
371
原创 SVG 案例一
案例一：body{ background:#000;}#demo1{ width:780px; height:400px; background:url(images/bg.jpg) no-repeat; margin:20px auto; overflow:hidden;}/* 中心点 x : 780/
2017-03-06 22:18:21
578
Notepad 安装包
2020-05-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人