前端散打王-CSDN博客

原创在 vue 路由懒加载中给 Webpack Chunks 命名

最早的路由定义方式import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'import About from '../views/About.vue'import Login from '../views/Login.vue'Vue.use(VueRoute...

2020-04-22 20:21:38 2368

原创 vue-cli3创建的项目中，默认集成的 webpack 配置

直接上代码vue-cli3 创建好的项目，已经帮我们做了下面的事情通过「mini-css-extract-plugin」将 css 打包成单个文件添加「@」别名，指向「src」目录通过「TerserWebpackPlugin」来压缩 js 代码在打包时，将引入的第三方插件或库，打包到「chunk-vendors」中查看项目中的默认 webpack 配置，执行下面的命令vue in...

2020-04-09 15:03:04 2082 3

原创 vue-codemirror 最全踩坑之路

1. npm i vue-codemirror --save-D2. 在组件中使用公共的配置文件 setting.jsimport 'codemirror/lib/codemirror.css'// require active-line.jsimport 'codemirror/addon/selection/active-line.js'// styleSelect...

2019-12-29 10:35:55 23803 3

原创 vue 生命周期钩子函数

环境：vue@2.6.10vue 有八个生命周期钩子函数，这在 vue 官方文档中也是有写到，我们可以在钩子函数中做一些我们想要的操作，但是选择哪个钩子函数确实是很头疼的事，比如：进入一个组件时，我们要做一些初始化的获取数据操作，是选择 created 还是 mounted 钩子呢？下面我们先来看代码和输出结果：<div id="app"> <p>{{...

2019-05-25 17:27:21 497

原创关于 JavaScript中 this ，看这一篇就够了

首先「this」指当前执行代码的环境对象一、在全局执行环境中，this 指向全局对象；在浏览器中全局对象是「window」，在「node」环境中全局对象是「global」：var first_name = 'this_ex';console.log(this.first_name);console.log(first_name);console.log(this === wind...

2019-05-15 22:45:10 544

原创小程序报 Error: errCode: -502005 database collection not exists；TypeError: Cannot read property '_id' of

如图，云函数报这个错，或者报「Error: errCode: -502005 database collection not exists」，那么如下操作在app.js中添加云环境IDwx.cloud.init({ traceUser: true, env: 'XXXXX'})onLaunch: function () { if (!...

2019-03-05 18:09:23 10470 5

原创小程序下拉刷新上拉触底加载数据

1. 下拉刷新下拉刷新主要用到「onPullDownRefresh」函数，我们在新建目录然后新建page之后在wxml文件中会自动生成很多生命周期函数，其中就会生成「onPullDownRefresh」函数，所以没注意的同学会发现我写了「onPullDownRefresh」函数，但是没起作用的情况当然我们最先要做的是开启此功能，在「app.json」文件「window」对象中加入...

2019-03-01 11:16:16 6193

原创 Vue轻量级富文本编辑器-Vue-Quill-Editor

先看效果图：女神镇楼下载Vue-Quill-Editor npm install vue-quill-editor --save 下载quill（Vue-Quill-Editor需要依赖） npm install quill --save 代码 <template>...

2018-09-04 19:51:35 133825 30

原创 Webpack 4 学习之路（上）

Webpack simple以下均在 Webpack 4.42.1 版本环境下mkdir webpack-simplecd webpack-simplenpm initnpm i --save-dev webpack webpack-clitouch index.htmltouch webpack.config.jsmkdir srccd srctouch main.js在...

2020-04-08 14:25:46 549

原创 vue-cli3 下通过 axios-mock-adapter 模拟接口，以及通过 mockjs 模拟数据

在前端开发中，我们总是需要模拟请求或者数据来做一些简单的调试，或者验证逻辑代码，下面我将用「axios-mock-adapter」插件来模拟请求首先我们先用「vue-cli3」创建一个项目「axios-mock」，按默认配置，回车就行。vue-cli3vue create axios-mock进入目录，执行命令，引入插件「axios」和「axios-mock-adapter」：...

2019-05-04 20:41:16 1957

转载 Webpack学习笔记（一）

现在前端框架隐约是Angular、React、Vue三足鼎立的态势，今天不谈框架，谈一下Webpack。Webpack是一个打包模块化 JavaScript 的工具，在 Webpack 里一切文件皆模块，通过 Loader 转换文件，通过 Plugin 注入钩子，最后输出由多个模块组合成的文件。Webpack 专注于构建模块化项目。安装Webpack在用 Webpack 执行构建任...

2018-06-22 16:01:20 291

转载阻止事件冒泡和组阻止默认事件和return false的区别

今天来看看前端的冒泡和事件默认事件如何处理1.event.stopPropagation()方法这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，2.event.preventDefault()方法这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会

2017-09-16 10:52:45 2373

转载跨域解决方案 & 使用angularJS和jQuery进行Ajax请求的差异

转载自时间被海绵吃了：跨域解决方案前端同学李雷和后台同学韩梅梅分别在自己电脑上进行开发，后台接口写好的时候，李雷改动完就把前端代码上传到gitlab，然后在测试机上从gitlab上拉下来，然后在测试机上移动最新代码，最后回到本机刷新页面。有时候碰到网速不好的情况传个Git传了半天，或者李雷刚上传完发现少写了一个单词，加上再传上一看尼玛单词又写错了。对于实时需要改动代码的李雷同学而言

2017-08-08 18:02:05 479

转载 Angular移除不必要的$watch之性能优化

双向绑定是Angular的核心概念之一，它给我们带来了思维方式的转变：不再是DOM驱动，而是以Model为核心，在View中写上声明式标签。然后，Angular就会在后台默默的同步View的变化到Model，并将Model的变化更新到View。双向绑定带来了很大的好处，但是它需要在后台保持一只“眼睛”，随时观察所有绑定值的改变，这就是Angular 1.x中“性能杀手”的“脏检查机制”($

2017-07-26 14:47:33 563

转载理解 Angular 中的 $digest() 和 $apply()

$digest()和$apply()是AngularJS中的两个核心并且有时候容易引人误解的部分。我们需要深入理解这两者是如何运作的，从而才能理解AngularJS本身是如何运作的。本文的目的就是为了和你解释，在你的日复一日使用AngularJS编写代码的过程中，$digest()和$apply()是如何确确实实的对你有用的。$digest()和$apply()的探索Ang

2017-07-25 14:44:08 485

原创 angularjs在js代码中改变了model的值，但是页面上没有变化

1.场景重现在controller中我们先默认给定model的值，然后调用了一个外部函数改变这个model的值，页面上没有变化，还是显示默认值。2.原因分析AngularJS只会关心在AngularJS的执行上下文中的发生的数据模型(model)的变化(比如，改变数据的代码在$apply()里面)。AngularJS内建的指令也会自动触发$digest循环所以任何数据模型(model)

2017-07-25 14:23:41 7689

转载 require.js在angular中的应用

一、为什么要用require.js?一般的情况下，我们的angularjs项目所有的javascript文件和CSS文件的引用都是写在index.html中的，只要加载这一个文件就够了。后来，引用的文件越来越多，网页会出现卡顿的情况。下面的网页代码，相信很多人都见过。　　这段代码依次加载多个js文件。这样的写法有很大的缺点。首先，加载的时候，浏览器会停止网页渲

2017-07-24 10:41:44 1331

原创 angularJs搭建web项目

1.前言angularjs作为现在大火的前端框架很是受欢迎，现在已经发布了2.0版本，我在这里介绍的是我学习1.2.X以上版本的一些成果，2.0版本LZ也在学习中，等学成归来再与大家一起交流学习。 2.简单介绍AngularJsAngularJS的官方文档是这样介绍它的。完全使用JavaScript编写的客户端技术。同其他历史悠久的Web技术（HTML、CSS和JavaScrip...

2017-07-21 11:32:56 10940 7

原创 requirejs解决angular中按需加载的需求

1.案例说明angularjs在做一些小型项目时没有什么大的问题，但是项目迭代越多的时候会发现项目加载index.html的时候很慢，这是因为我们的架构有问题，加载index.html的时候会加载其下面所有引用的js、css文件，这是一个很费时间的过程，所以我们要引入requirejs让它按需加载。 requirejs-api2.代码解释2.1 index.html做如下改造。

2017-07-20 17:09:39 1890

VITAMIN的博客