- 博客(136)
- 收藏
- 关注
RSS订阅原创 v-model绑定vuex中state状态
废话不多说上代码vuexconst state = { value: 1};const mutations = { SET_VALUE: (state, value) => { state.value= value; },};const actions = {};const getters = { value: state => state.value,};export default { namespaced: true,
2020-09-03 08:48:01
1955
原创 js算两个日期中的所有年份月份(经过测试)
这个比较准确经过测试 原文忘记在哪了 有知道的老铁可以在底下评论getMonthBetween(start, end) { var result = {}; var s = start.split('-'); var e = end.split('-'); var minyear = new Date(); var maxyear = new Date(); minyear.setFullYear(s[0]);// 开...
2020-08-28 14:41:30
820
转载 cnpm没反应的解决办法 (自己收藏)
cnpm命令无任何反应的解决办法在家办公 家里电脑搭的环境 cnpm命令没有任何反应 困扰了好几天 查网上说要删除.npmrc文件 但是windows 根本就解决不了 后来在一篇文章里豁然开朗 终于找到解决办法上代码console里 执行 npm config set registry http://registry.cnpmjs.org完美解决。...
2020-06-10 08:45:54
1804
转载 vue-cli3.0 环境变量解释(自己收藏)
1.配置npm run 的模式在项目的根目录编辑package.json，分为开发 测试 生产 甚至更多。"scripts": { "dev": "vue-cli-service serve --mode dev", "test": "vue-cli-service build --mode test", "prod": "vue-cli-service build --mode prod"},2.创建环境配置文件在项目的根目录新建以下文件.env.dev .env...
2020-06-02 10:48:07
290
原创 Vue-cli3 开启gzip压缩
开启 gzip 压缩gzip 是 GNUzip 的缩写，最早用于 UNIX 系统的文件压缩。HTTP 协议上的 gzip 编码是一种用来改进 web 应用程序性能的技术，web 服务器和客户端（浏览器）必须共同支持 gzip。目前主流的浏览器，Chrome，firefox，IE等都支持该协议。常见的服务器如 Apache，Nginx，IIS 同样支持，gzip 压缩效率非常高，通常可以达到 7...
2020-04-24 11:00:47
644
转载 cnpm命令没有反应(并不报错)的处理办法(收藏)
就像上图一样学webpack的时候要安装镜像cnpm镜像安装完成之后,想要cnpm -v查看版本信息，整个界面毫无反应，并不报错。在网上搜了很多方法：①设置环境变量——没用②删除C盘用户目录下的.npmrc文件——也没有用③重装node——没用④重启——还是没用最后在这儿找到了答案：https://blog.csdn.net/lilinchao97/article/d...
2020-04-18 10:09:39
931
转载 VScode官方历史版本下载 包含 32位 64位(个人收藏)
VScode 官方历史版本下载地址https://code.visualstudio.com/updatesVScode 在github上的release列表https://github.com/Microsoft/vscode/releases其实vscode的下载地址中的一串超级长的哈希码就是commit id。其下载地址就是就这样拼接来的。以下是我使用 js 拼接来的部分版...
2020-02-14 13:02:11
23110
3
转载 vue中axios实现下载
前端项目实现请求后台步骤一：安装axios组件，一般使用命令：npm install axios --save步骤二：为了项目规范整洁，把一些常用的请求方式放在了一个文件中包括GET、POST等等，以及配置请求后台统一前缀，代码如下(文件在src/libs/axios)import axios from 'axios';// 统一请求路径前缀，这个是后台接口地址var base...
2020-01-08 16:02:36
3934
原创 在element中使用@blur无效
@blur.native="isVal"// 不好使@blur.native.capture="isVal()" // 好使VUE里面使用.capture是啥意思?<!-- 添加事件侦听器时使用 capture 模式 --><div v-on:click.capture="doThis">...</div>大佬的回答:这个涉及到了j...
2019-12-18 17:50:22
7938
原创 vue父组件向子组件传值子组件用的是v-mode报的错误
错误解决了图就不截了直接开始正文.首先你要知道Vue组件间传值，默认遵循单向下行绑定原则子组件代码我简写了子组件叫ceshi: <input v-model="backContentData"/> props: { backContentData: { type: String, default: null ...
2019-12-18 16:40:19
915
1
原创 vue json验证插件
直接上截图:依赖包安装:cnpm install --save-dev vue2-ace-editor组件引入:<template> <div> <editor v-model="content" @init="editorInit" lang="json" theme="chrom...
2019-12-10 19:54:00
1225
原创 解决 vue 项目一直出现 sockjs-node/info?t=1554978****问题
首先先上图看到很多人都是这么干的:1. 找到/node_modules/sockjs-client/dist/sockjs.js 2.找到代码的 1605行 try { // self.xhr.send(payload); 把这里注掉 } catch (e) { self.emit('finish', 0, ''); self._clea...
2019-11-29 10:16:49
9668
2
原创 vue中 方法名:function() {} 和 方法名() {}区别
区别是区别是methods: {name:function() {}, // es5写法name() {} // es6写法}//也就是简写
2019-11-27 16:46:32
9669
转载 基于cytoscape.js 、 d3.js实现的关系图谱初级版本 (收藏)
这个老哥感觉是全博客中写的比较全的了前面的文章已经介绍了cytoscape.js 、 d3.js的安装及简单demo，现在展示从html页面转移到vue项目下的最初版的demo效果图： <template> <div style="width: 100%;height: 100%;"> ...
2019-10-31 10:07:56
3841
3
原创 cytoscape.js制作数据展示网络图
开始直接上效果图不墨迹直接上代码html<!DOCTYPE html><!-- This code is for demonstration purposes only. You should not hotlink to Github, Rawgit, or files from the Cytoscape.js documentation in you...
2019-10-30 16:59:29
3084
3
原创 vue-admin-template改成中文
直接开始有些人git clone下来发现他都是英文然后就开始百度改成中文发现都是这样的博客看下面代码如果有人要做国际化可以去element官网国际化看看写的很详细import locale from 'element-ui/lib/locale/lang/en' // lang i18nimport locale from 'element-ui/lib/locale/lang/z...
2019-10-29 13:56:21
12656
1
转载 Vue3.0 中的数据侦测
在10月05日凌晨Vue3的源代码正式发布了，来自官方的消息：目前的版本是 Pre-Alpha ， 仓库地址： Vue-next， 可以通过 Composition API了解更多新版本的信息， 目前版本单元测试相关情况 vue-next-coverage。文章大纲：Vue 的核心之一就是响应式系统，通过侦测数据的变化，来驱动更新视图。实...
2019-10-08 17:44:18
1401
1
转载 cnpm 安装yarn
cnpm 安装yarn一句命令搞定cnpm install -g yarn --registry=https://registry.npm.taobao.org再配置下源yarn config set registry https://registry.npm.taobao.org -gyarn config set sass_binary_site http://cdn...
2019-10-08 17:24:23
2535
转载 彻底搞懂Vue中keep-alive
彻底搞懂Vue中keep-alive的魔法(上)上一节最后稍微提到了Vue内置组件的相关内容，从这一节开始，将会对某个具体的内置组件进行分析。首先是keep-alive，它是我们日常开发中经常使用的组件，我们在不同组件间切换时，经常要求保持组件的状态，以避免重复渲染组件造成的性能损耗，而keep-alive经常和上一节介绍的动态组件结合起来使用。由于内容过多，keep-alive的源码分析将...
2019-09-23 17:45:46
6694
1
翻译 JS实现Virtual Dom && Diff
前言文章开篇，我们先思考一个问题，大家都说virtual dom这，virtual dom那的，那么virtual dom到底是啥？首先，我们得明确一点，所谓的virtual dom，也就是虚拟节点。它通过JS的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM节点。其次我们还得知道一点，那就是virtual d...
2019-09-18 11:10:11
191
转载 Vue 组件数据通信方案总结
背景初识 Vue.js ，了解到组件是 Vue 的主要构成部分，但组件内部的作用域是相对独立的部分，组件之间的关系一般如下图：组件 A 与组件 B 、C 之间是父子组件，组件 B 、C 之间是兄弟组件，而组件 A 、D 之间是隔代的关系。那么对于这些不同的关系，本文主要分享了他们之间可以采用的几种数据通信方式，例如 Props 、$emit / $on 、V...
2019-09-17 09:18:27
155
转载 5分钟搭一个企业级脚手架
1 写在前面的话搭一个脚手架，考验了你的 nodejs 水平、工程化能力、以及工具服务的设计能力，是前端进阶不可或缺的过程笔者在开发 cli 的过程中，调研流行的 cli 并形成最佳实践，本文旨在用最短的篇幅实现主要功能，揭露核心原理，同时提供 demo 仓库与大家学习探讨。通篇阅读大约需要 10 分钟，基于本教程自己撸一个 cli 大约需要花费 15 分钟仓库清单：文章博客 |...
2019-09-17 09:17:18
211
转载 如何让你的 JS 写得更漂亮
网上有不少关于JS编写优化建议，这里我根据自己的经验提出一些比较有用的意见。1. 按强类型风格写代码JS是弱类型的，但是写代码的时候不能太随意，写得太随意也体现了编码风格不好。下面分点说明：（1）定义变量的时候要指明类型，告诉JS解释器这个变量是什么数据类型的，而不要让解释器去猜，例如不好的写法：var num, str, obj;声明了三个变量，但其实没什么...
2019-09-17 09:10:01
172
转载 一文搞懂 Webpack 多入口配置 (收藏)
最近在做项目的时候遇到了一个场景：一个项目有多个入口，不同的入口，路由、组件、资源等有重叠部分，也有各自不同的部分。由于不同入口下的路由页面有一些是重复的，因此我考虑使用 Webpack 多入口配置来解决这个需求。再一次，在网上找的不少文章都不合我的需求，很多文章都是只简单介绍了生产环境下配置，没有介绍开发环境下的配置，有的也没有将多入口结合 vue-router、 vuex、 Element...
2019-09-17 08:51:57
319
转载 JS异常函数之-箭头函数
在JS中，箭头函数可以像普通函数一样以多种方式使用。但是，它们一般用于需要匿名函数表达式，例如回调函数。下面示例显示举例箭头函数作为回调函数，尤其是对于map(),filter(),reduce(),sort()等数组方法。const scores = [ 1, 28, 66, 666];const maxScore = Math.max(...scores);scores....
2019-09-12 10:03:01
630
转载 vuex中state,getter,mutation,action,module的用法与理解
一.State:{count: 0}保存着所有的全局变量组件中获取：computed:{ ...mapState({ //es6的对象展开运算符 count: state => state.count //es6箭头函数 'count' //如果名字与state中的名字一致，可这样简写 })}二.Getter： 对st...
2019-09-12 09:53:31
406
原创 Avue表格应用自定义
官方地址:https://avuejs.com/doc/crud/crud-doc首先要知道avue是在element-ui的基础上做的二次封装所以element里的所有东西avue都支持先上图上代码:html<avue-crud :data="data" :option="option" v-model="obj" :before-close="beforeOpen"...
2019-09-12 09:36:12
11404
2
转载 用纯 JavaScript 实现的 MVC 程序
我想用model-view-controller架构模式在纯 JavaScript 中写一个简单的程序，于是我这样做了。希望它可以帮你理解 MVC，因为当你刚开始接触它时，它是一个难以理解的概念。我做了这个todo应用程序，这是一个简单小巧的浏览器应用，允许你对待办事项进行CRUD（创建，读取，更新和删除）操作。它只包含index.html、style.css和script.js三个文...
2019-08-16 11:25:44
1181
转载 Vue项目优化
在日常的Vue项目开发中，随着业务的日渐复杂，代码量的日益增加，随之带来的问题就是打包后的vendor.js体积过大，导致加载时空白页时间过长，给用户的体验太差。为此我们需要减少vendor.js的体积，从本质上来解决这种问题。这里大概例举几个在项目中实际用到过的方法，优化后的js大概缩小了50%左右，效果还是挺明显的。1，webpack externals为什么要配置external...
2019-08-16 11:17:38
184
原创 WebSocket断线重连
$scope.timeout = 10800,//3分钟发一次心跳$scope.timeoutObj = null,$scope.serverTimeoutObj = null,$scope.init = function() { $scope.lockReconnect = false, $scope.wsUrl = "wss://xxx:8888"; // 监听窗...
2019-08-06 17:47:42
2044
转载 什么是 Proxy
这是在浏览其他博客看到的有营养的文章分享给大家。什么是 Proxy通常，当谈到JavaScript语言时，我们讨论的是ES6标准提供的新特性，本文也不例外。 我们将讨论JavaScript代理以及它们的作用，但在我们深入研究之前，我们先来看一下Proxy的定义是什么。MDN上的定义是：代理对象是用于定义基本操作的自定义行为（例如，属性查找，赋值，枚举，函数调用等）。换句话说，我们可...
2019-08-05 11:58:07
4263
2
原创 element ui 滚动条插件
<el-scrollbar></el-scrollbar>用的时候加个高度就行了不喜欢用这个用下面这个 在一个博客看到的还不错!先张贴一张效果图：说明：这里会出现横向滚动条，是因为默认是开启横向滚动条的，并且内容区域高度超出了外层盒子的宽度下面介绍使用方法：1、安装vue-happy-scroll推荐使用npm安装，这样...
2019-07-17 14:51:55
3248
原创 vue-cli3.0中大屏使用rem做响应式(引入rem.js)
因为目前有px转换rem的插件但是我不想用感觉费劲首先我们先找一段rem.js引入到vue的index.html中上代码:<script type="text/javascript"> /* * @ pwidth 设计稿的宽度 * @ prem 你要1rem比多少px 我的是1rem比100px * */ ...
2019-07-17 10:32:58
3616
2
原创 vue组件在一张页面引入多个 传入相同的数据出现的bug
上图:当我点击的时候这两个tree的状态同时变这是我遇到的问题是什么原因导致的,上代码this.treeList= []这个是树的数据this.treeList1 = this.treeList;this.treeList2 = this.treeList;我给他俩同时赋值导致状态一样的问题在来一张图我解决好的:我解决好的,上代码this.treeLis...
2019-07-16 13:34:01
1775
1
翻译 Vuex持久化存储之vuex-persist
Vuex 的状态存储并不能持久化。也就是说当你存储在 Vuex 中的 store 里的数据，只要一刷新页面，数据就丢失了。引入vuex-persist插件，它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中。具体用法如下：安装：npm install --save vuex-per...
2019-07-13 14:03:43
12234
原创 vue-cli3.0 打包空白 无任何报错(解决方法)
npm run build打包之后上传到服务器后，index.html打开一片空白，vue-cli2.0是这么解决的:assetsPublicPath: './', 就多加个点就行但是vue-cli3.0的时候得自己配置代理文件这个时候百度找了好多不好使可能是我太菜了,最后还是去的vue-cli官方找的,但是问题是打包空白什么都没有报错也没有,以下是我的解决办法:第一步://配...
2019-07-12 09:53:17
2983
转载 前端如何面试的时候拿到offer
一、直接回答题主的问题1、确实很缺前端，而且不管哪里，哪家公司，都很缺前端。2、找不到工作，说明没有达到公司的用人要求。二、展开来说第二个问题1、公司招人的目的是什么，是做项目。公司的用人要求，就是能做项目。而作为前端的角色，要做的就是与后端对接，做出符合要求的页面。2、为了能做出符合要求的页面，就要求应聘者用友符合要求的能力。三、一个合格的前端需要哪些能力？...
2019-07-04 08:54:53
4218
翻译 在vue中使用高德地图
问题来源项目需要是使用到地图，并不是所有页面都用到，所以采用异步加载当时引入地图开始在vue项目目录下创建plugins文件夹，并在里面创建amap.js 文件/* * 异步创建script标签 */export default function MapLoader (key) { return new Promise((resolve, reject) =>...
2019-06-26 11:53:37
3032
转载 vue-cli3.0代理 打包 (收藏)
module.exports = { baseUrl: "./", //1.默认为 "/":部署在一个域名的根路径上 ; 2. "./":所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径 outputDir: "dist", //默认为 "dist",指打包后的资源放置的路径，放在dist文件夹下 assetsDir: "static", //默认为:'' ,放置...
2019-06-25 17:56:45
2219
转载 vue-cli3.0 目录结构 收藏
实际项目结构：整体文件结构基于vue-cli3.0脚手架搭建的项目结构，下面来介绍下每个目录做什么事情项目详细介绍
2019-06-24 12:12:19
5425
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人