- 博客(88)
- 收藏
- 关注
RSS订阅原创 Mac中web前端环境搭建
安装工具node安装，版本中携带npmgit安装nvm安装switchHosts下载visual studio code下载visual studio code 代码格式化https://blog.csdn.net/qq_35321405/article/details/99970755nvm：nodejs 版本管理工具。也就是说：一个 nvm 可以管理很多 node 版本和 npm 版本。nodejs：在项目开发时的所需要的代码库npm：nodejs 包管理工具。在安装的 node
2021-11-24 22:54:55
591
原创 报错：fatal: refusing to merge unrelated histories
一. 问题描述本地仓库在想做同步远程仓库到本地为之后本地仓库推送到远程仓库做准备时报错了，错误如下：fatal: refusing to merge unrelated histories（拒绝合并不相关的历史）二. 问题出现的原因我的项目调整历程：开始直接clone远程仓库到本地，由于仓库命名不规范，又新建了一个仓库；把本地git仓库地址修改成了新改仓库地址，发现不能pull，报fatal: refusing to merge unrelated histories。出现这个问题的最
2020-09-09 17:14:58
1105
原创 摘录文章
红帽子，白帽子，蓝帽子然后换上金帽子，如果这样可以让她高兴；如果你跳得很高，那就为她再跳一次，直到她大声喊“亲爱的爱人，戴着金帽子、跳得高高的爱人，我一定要拥有你！”--------------------------------------------------------------------------------------------------------------------------------------------------------为什么会有那么大差别？说来
2020-09-09 16:13:05
253
原创 hosts文件
一.概述Hosts是一个没有扩展名的系统文件，可以用记事本等工具打开，其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”，当用户在浏览器中输入一个需要登录的网址时，系统会首先自动从Hosts文件中寻找对应的IP地址，一旦找到，系统会立即打开对应网页，如果没有找到，则系统会再将网址提交DNS域名解析服务器进行IP地址的解析。二. hosts文件右键，选择运行c:\windows\System32\drivers\etc三. 管理hosts工具方便切换，修改，管
2020-09-09 15:30:27
392
原创 nginx配置
查看服务日志1. pwd：查看当前所在目录2. 进入存放日志文件目录：cd /export/log3. 开启日志文件：tail –fn200 bull-node_detail.lognginx配置文件1. Linux切换管理员：sudo –s2. Linux nginx配置路径：cd export/servers/nginx/conf/domains/3. 打开nginx配置文件:vim 文件名4. 插入：i5. 保存并退出文件：按键esc退出编辑状态，输入命令:wq!.
2020-09-09 15:06:06
266
原创 2020开启第一篇
好久不写博客了，拖着拖着就没有动笔了，苦命的加班不分昼夜，领导还感觉不足，心在燃烧。心中特气愤，任务跟过山车一样，说什么时间上线就上线，压榨我们开发测试时间强制我们加班完成任务。我的上班作息【早晨9.30到公司，晚上9点/9点30下班/更晚】，没有一点空余时间，现在更可气是要求周末也要来加班。我唯一的幸福就剩周日了，也要给我剥夺，天理何在。让我周末加班理由更可气，给我一个任务要这个时间端开发完，只能周末来加班。内心一阵不好，哎哎哎。我是我，他们是他们，他们来我就要来吗，平时都够累的了，还要求我们加班
2020-09-09 14:20:31
128
原创 vue-cli3项目在IE浏览器打开兼容问题
一.问题描述vue打包的项目在ie浏览器上，不能打开。找了一天的解决方案，解决一个又报一个兼容错误，一步一坑一步一填，终于解决了问题????。我们需要了解的ie浏览器支持版本大于ie8。二.方案第一步：安装babel-polyfill依赖解决es6语法的兼容问题npm install babel-polyfill --save-dev在main.js 文件中引用这个库，import ...
2020-01-10 16:39:38
7504
2
原创 vue项目中实现的全屏功能
一. 引入全屏功能库npm install screenfull -s二. 使用方法<template> <div class="home"> <p class="chart-title" @click="toggleFullscreen">全屏</p> </div></template><...
2019-11-07 10:47:20
1707
2
原创 vue-cli3引入less预处理语言
一. 引入lessnpm install less less-loader --save-dev二. 引入样式资源处理器在style资源中注入css / sass / scss / less / stylus这些内容。主要作用导入一些公共的样式文件，避免在每个样式文件中手动的@import导入。vue add style-resources-loader选择CSS Pre-proc...
2019-11-06 18:16:43
894
原创 vue-cli3中使用svg-sprite-loader方法
一. 引用步骤npm install svg-sprite-loader -D 或 yarn add svg-sprite-loader -D在src目录下新建svg文件夹，这里存放所有svg文件。在vue.config.js文件中配置加载svg文件对应svg-sprite-loader规则const path = require('path')function resolve(...
2019-08-21 17:36:28
3201
1
原创 Visual Studio Code+vue项目格式化代码配置方法
一. 概述使用Visual Studio Code开发工具，多人开发vue项目，为了统一代码格式风格问题，配置格式化文件模板。给我们多人开发提供了很多便利，能快速找到项目中未使用到的方法，变量，多引用的组件。提醒我们及时处理这些多余的代码。二. 使用插件格式化js代码插件：ESLint格式化html、标准css、标准js、vue文件：Vetur区分html，js，css模块不同属性使用...
2019-08-21 16:29:00
5390
原创 vue项目中使用element-ui封装菜单树
一. 效果图底层使用el-menu菜单组件，项目中要求动态获取菜单树，并且层级不固定。所以就在el-menu组件基础上封装了一下。二. 实现代码SideBar.vue 文件<template> <el-aside width="200px" style="background-color: #F3F6F9"> <el-menu :...
2019-08-20 15:20:13
3257
原创 nginx同域名下部署多个vue项目
一.需求想要在同一个域名下部署多个前端项目，通过不同url来区分调用相应前端项目。比如：部署项目a，项目b。想要效果如下。浏览器输入：http://localhost:8082/a/，展示项目a。浏览器输入：http://localhost:8082/b/，展示项目b。二. 本地下载nginx服务器http://nginx.org/en/download.html三. nginx常用...
2019-07-16 15:16:53
6845
2
原创 window10下搭建vue前端开发环境
一. 运行环境：nodejs下载网址：http://nodejs.cn/download/根据自己系统选择对应的安装包，我的系统window10 ，64位。二. 下载vue开发环境相关的依赖项打开cmd终端，输入node -v，查看nodejs版本号，来检查nodejs是否安装成功了。安装vue：npm install vue安装vue脚手架：npm install -g @v...
2019-07-10 14:57:07
667
原创 微信小程序适配方案
一. 概述习惯了写pc端项目，会经常考虑到适配的问题，写响应式布局。拿到微信小程序的设计图时候，有点懵，不知道px和rpx是如何规则转换的，写的很慢，感觉没有找到法门，不顺手。又仔细阅读了文档规则，大彻大悟，很简单。二. 名词物理分辨率 = 设备像素 = 物理像素逻辑分辨率 = 逻辑像素 = css像素 = 独立像素 ，肉眼感知尺寸设备像素比 = 物理分辨率 / 逻辑分辨率...
2019-06-27 11:10:52
8259
原创 echarts图表横屏展示
一. 概述项目环境：vue + vuex + echarts实现图表的横屏效果。二. 效果图横屏效果三. 方案废弃方案：在图表的外层添加一个div，添加css旋转属性，宽/高=100%，设置图表的高=屏幕高，图表的高=屏幕宽废弃方案的结果：效果同样能达到横屏效果，但是提示文本有问题，有些区域点击无法弹出提示文本，pass了这个写法。也琢磨了一下为什么部分区域点击无效呢，...
2019-06-21 18:06:14
6712
11
原创 设置echarts图表(饼图，折线图，柱状图)点击事件
一. 概述vue+echarts 开发环境，echarts API提供默认了点击事件，但是有一些需求，要求我们改良一下点击事件。比如：柱状图，默认事件只有点击图表柱子，才可以触发点击事件。有时候数据比较小，柱子不容易点击，但是我们还想看点击后的效果，只能扩大触发点击区域的方法。 this.line = this.$echarts.init(document.getElementById(th...
2019-06-20 18:03:58
5704
原创 css实现元素不可见的5种方法
概述用纯css方式控制一个元素的隐藏，不可见。<div class="disappear"></div>方法1. display注意：设置none后，不占据页面空间。.disappear{ display:none;}方法2. z-index 层级注意：z-index属性需要搭配positon属性一块使用，不然设置了不起作用。.disappear{...
2019-06-20 15:36:56
10112
转载 分析vue双向绑定原理（MVVM）
Vue的响应式原理，也可以叫双向绑定原理，MVVM模式原理。一、MVVM 理解MVVM分为Model、View、ViewModel三者。Model 代表数据模型，数据和业务逻辑都在Model层中定义；View 代表UI视图，负责数据的展示；ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；Model 和 View 并无直接关联，而是通过 V...
2019-06-18 16:55:46
529
原创 vue项目升级
一、需要升级的依赖包项目中使用的依赖包版本比较旧，在新的版本中一些指令被废弃了，也添加了一些新的指令用法，修复了之前版本存在的局限性。如果不定期升级版本，后期维护起来会很麻烦。依赖包旧版本号新版本号升级命令vue2.5.162.6.10npm update vuevue-router3.0.13.0.3npm update vue-routerv...
2019-06-06 18:13:36
6103
转载 vue-小知识
一、Vue中给data中的对象添加一个新的属性时会发生什么，如何解决。// 假如data中有一个obj对象，申明方式如下。obj={name:'xudanfeng'}// 通过这种方法添加age属性，属性添加成功，但是视图并未立马更新。this.obj.age = 12// 这种方法添加的属性，在视图中会立马刷新。this.$set(this.obj,'sex','女')原因在于在...
2019-06-05 14:37:07
173
原创 vue-计算属性和侦听属性
一、计算属性computed计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。对比普通函数方式，每次访问都需要执行一遍函数。计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter 。例子<script>// @ is an alias to /srce...
2019-06-04 18:14:55
383
原创 Vue Cli下环境变量和模式
一. 模式Vue Cli 项目中有三种模式：development（开发模式）、production（生产模式）、test（测试模式）。注意模式不同于NODE_ENV，一个模式可以包含多个环境变量。1. 通过pageage.json下scripts配置打包命令。development： 对应的命令 vue-cli-service serveproduction：对应的命令 vue-cli...
2019-05-31 17:59:07
2238
原创 vue-插槽使用
一. 概述项目开发中想封装一个好用的列表组件，思考到怎么在一个组件中实现不同的样式和细微差别呢，想到了vue插槽功能符合我的预想。遇到了一个问题入坑了
2019-05-30 18:31:31
8216
原创 正则表达式使用（判断是否符合规则和提取满足规则数据）
一. 正则表达式规则符号描述()标记一个子表达式的开始和结尾位置，要匹配(、)，前面加转义字符 \[]标记一个中括号表达式的开始和结束，要匹配[、]，前面加转义字符 \[字符集]比配单个字符{n}n 是一个非负整数。匹配确定的 n 次{n,m}m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次+匹配前...
2019-05-29 15:22:42
17596
转载 ES6-数组
一. 数组创建概述Array.of(x,…) ：将参数中所有值作为元素形成数组Array.from(x,fn) ：将类数组对象或可迭代对象转化为数组类数组对象：必须含有lenght属性，且元素属性名必须是数值或者可转换数值的字符使用方法// 1.创建数组let arr1 = Array.of(1,2,'xu') // [1, 2, "xu"]let arr2 = new Arr...
2019-05-16 16:43:07
1266
原创 ES6-字符串扩展新方法
一. 字符串重复repeat函数概述repeat（s,n）：表示将字符串重复指定次数返回新的字符串。基本用法let a = 'xu'.repeat(2)let b = 'dan'.repeat(2.6)// -0.2会进行取整运算，等同重复次数0，返回""let c = 'feng'.repeat(-0.2)// NaN 等同重复次数0，返回""let c = 'feng'.re...
2019-05-15 18:06:52
383
原创 Math对象中常用几个函数ceil，floor，max，min，trunc，
一. Math.trunc(x)概述用于返回数字的整数部分，数字符号位也会返回。函数参数分为两大种类：能转化为数值，返回数字的整数部分；无法转化为数值的返回NaN基本用法let a = Math.trunc(12.2)let b = Math.trunc('13.1')let c = Math.trunc(-1.2)let d = Math.trunc('aaa')let e = ...
2019-05-15 14:44:55
1546
原创 ES6-Symbol
Es6 Symbol概述基本用法使用场景函数概述原始数据类型，表示独一无二的值。基本用法let sy = Symbol(‘name’)相同参数的symbol()返回的值也不相等不能使用new命令创建变量，因是原始数据类型，不是对象。使用场景作为对象属性名，保证对象属性名不重复let syName = Symbol('name')let syAge = Symbol('a...
2019-05-15 13:33:00
114
原创 js某时间戳距离当前时间转化成几分钟前几天前几月前几年前
一. 效果刚刚，1秒前，1分钟前，1天前，1周前，4周前，1月前，1年前，2年前。二. 展示逻辑公式：n < 60秒，结果：n秒前 公式：1分钟 <= n < 60分钟，结果：n分钟前 公式：1天<= n < 7天，结果：n天前 公式：7天 <= n < 7 *x，结果：x周前，注意7*x小于31 公式：31天 <= n &l...
2019-05-10 18:43:52
1132
原创 vue--封装日历，周历，月历，季历组件
一. 效果图 二. 实现功能时间快捷键对应的时间段获取方法封装，需要注意本周，上周，采用的是周一到周日日历模版去的间隔。 日历网上找的一个demo，改装成自己项目中要求的样子。限制了未来月份不能切换，最小切换月份2018年1月。 日历展示样子有两种模版：周一到周日，周日到周六。 月历，季历设置了未来时间段不可点击。注意：安卓，ipone手机...
2019-05-07 10:19:47
7072
6
原创 vue-按需加载引用echarts中组件
目录第一步：引用echarts组件库第二步：main.js中全局配置主模版第三步：封装echarts折线图line组件第四步：在需要使用页面中引用line组件。项目中我们一般会全局引用echarts组件库，开发起来方便。发现项目文件体积过大，首屏加载也会慢。为了解决首屏加载速度问题，项目体积大的问题。方法1：这就要求我们要采用按需加载的模式。没有使用到的echarts中组件不要...
2019-04-28 19:13:19
10581
原创 Vue-cli3 + webpack搭建vue项目流程以及打包发布流程
目录1.命令行初始化项目2. 分析项目目录3. vue.config.js多环境打包配置4. 发布项目5.参考文章1.命令行初始化项目bogon:vue xudanfeng$ vue create vue-cli-projectVue CLI v3.0.2? Please pick a preset: Manually select features? C...
2019-04-26 14:31:10
5362
原创 Vue-cli2 + webpack搭建vue项目流程以及打包发布流程
目录1.1 命令行初始化项目1.2 分析项目目录1.3 运行项目1.4 多环境配置打包发布一. vue-cli2 + webpack搭建项目流程以及打包发布流程最近升级到vue-cli3，发现vue-cli2搭建项目命令不能用了，两者搭建开发环境项目内容也发生了变化。vue-cli2搭建项目环境的命令：vue init webpack vue2-webpack-proj...
2019-04-25 18:41:28
5107
原创 vue-路由篇页面跳转和页面参数传递
简介：路由文件内容介绍目录简介：路由文件内容介绍一 . 页面跳转二. 页面传参，获取页面传递过参数三. 路由导航待整理定义了需要跳转的文件位置映射关系，每一个路由对应一个组件。/** * @file 主路由配置页 */import Vue from 'vue'import Router from 'vue-router'// 懒加载，可以节省收屏加载时间c...
2019-04-19 18:50:51
1685
原创 js监控页面浏览时长和记录页面某一个图形浏览时长
需求：pm要求实现一个记录用户停留这个页面时长，后台记录，通过这些记录总结用户的习惯。比较坑的就是pm又提出了第二个需求，记录页面中某一个图表浏览时长。无语了，第一反应是不可能实现第二个需求。我们系统环境：vue，听到第一个需求的时候，脑子里有一个想法，应该不难实现，就是定时器的功能。第二个需求懵了，想象脑壳疼，挺麻烦的。聪明的我还是奋战几天实现了
2019-04-19 17:10:33
4879
原创 css知识点整理
1. 单位px（pixel），含义像素，绝对单位。适合场景：pc端 em（the font size of the element），相对单位，相对于父元素的字体大小的单位。适合场景：pc端 rem(the font size of the root element)，相对单位，相对于根元素html的字体大小的单位。适合场景：web app2.屏幕适配方案流式布局：通过百分比来定义宽...
2019-02-18 14:39:20
119
2
原创 祈祷落幕时
2019年读完的第一本书。不知道怎么来梳理这个感受。一幕一幕的画面还在脑海中，不知道从那里开始写。害怕不能写出一份好的读后感。我也是一个挺纠结的人，特别在意他人的看法。很多时候就因为胆小的自己，放下了手中的笔。想想也只是自己看，就不害怕了，随便写了。博美父亲活下去欲望就是博美幸福，好好生活。上天开了一个玩笑，博美和父亲踏上了逃难的道路。绝望无奈的博美父亲打算走上死亡之路，博美发现了父亲的意图，...
2019-01-29 18:07:05
1550
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人