晴天有点孤单

【代码】fs结合new_node_modules二次开发，有则覆盖node_modules内对应路径的文件。

ios兼容问题

最终实现如下：模块化开发，最大化利用公共组件/资源，又能模块化打包资源，做到不互相影响，能够实现 单独打包部分模块 npm run build moduleName1 打包全部模块 npm run build-all请移步项目资源 vue-multipage...

懒加载：又叫延时加载，即在需要的时候进行加载，随用即载import ：是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法需要新加的配置项1.webpack.base.conf.js2. router.js

xss攻击是很常见的一种攻击方式，下面简单讲一下前端如何防御。讲之前简单涉及一点后端防御的方案：在前后端交互的时候做好特殊符号的转义下面重点是前端使用js-xss防御npm install xss --savemain.js引用import xss from 'xss' Vue.use(xss); Object.defineProperty(Vue.prototype, '$xss', { value: xss })// click事件被过滤3.html 中防御<p

在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。批量注册指令，新建 directives/index.js 文件import copy from './c

无 history 时 置灰 不可点击<template> <div v-show="showNavigate" class="dt-navigation-box"> <div class="dt-navigation-btn" @click.stop="clickPrev"> <span class="dt-navigation-arrow"> <i class="iconfont">&#xe6.

在开发过程中，有时发现当数据变动后，视图并未更新。那么下面是一些常见示例的和解决办法

话不多说先上图使用前 npm i vue-quill-editor代码片demo<template> <div> <p> vue-quill官网： <a href="https://quilljs.com/docs/quickstart/">https://quilljs.com/docs/quicksta...

项目结构├── node_modules # 项目依赖包目录├── build # 项目 webpack 功能目录├── config # 项目配置项文件夹├── src # 前端资源目录│ ├── images # 图片目录│ ├── components # 公共组件目录│

前几天ts+vue3.0+view-design撸了一个项目，然后总感觉哪里不对劲，今天终于醒悟了原来是热更新没开在vue.config.js中配置以下选项const IS_PROD = ['production', 'test'].includes(process.env.NODE_ENV);css: { // 是否使用css分离插件 ExtractTextPlugin...

原因是 less但是没有转译，就会报错。解决方案有两种一是降低less版本，二是开启JavaScript装 3.0以下版本的less 即可解决 比如2.7// vue.config.jsmodule.exports = { // 选项... css: { loaderOptions: { less: { ...

// 全局前置守卫router.beforeEach((to: any, from: any, next: any) => { LoadingBar.start(); // 网页加载状态 console.log(to, from); if (to.meta.title) { document.title = to.meta.title; ...

最近有一个微信分享的功能，恰逢疫情期间远程办公，然后家里的笔记本比较拉闸本地环境不完善，然后远程办公只能推代码到测试环境调试，博主也是比较难受，日渐憔悴，一周没对接好的问题，好在到了公司一下午就调试好了，废话不多说了分享成功失败的对比微信截图如下在这之前主要代码 getShareInfo (tit, fxUrl) {//如果分享的内容会根据情况变化，那么这里可以传入分享标题及url ...

场景 失焦的时候关闭 选择列表 但是同时 点击列表的时候会触发 bulr 事件 然后 click事件失效解决办法 click 换 mousedown （ tips：事件优先执行顺序 mousedown > bulr > click）如果是移动端 同理 touchstart > bulr > touch...

效果rt：（左右切换滚动，左侧菜单联动，支持同路由多个页面：可根据项目需求自行配置）话不多说上代码---------------我是美丽的分割线***---------------------：需要修改的文件文件1.工具类需要用到的方法都在这里了文件2：路由导航文件文件3：入口页面引用（为了兼容多项目，这里做了入参封装处理，使用的时候按需改变一下）下面是各文件代码文件1：imp...

一、事件冒泡方法一、使用event.cancelBubble = true来阻止冒泡&lt;div @click="show2()"&gt;    &lt;input type="button" value="按钮" @click="show1($event)"&gt;   &lt;/div&gt;   methods:{       show1:function(ev

demo如图 自动生成的路由： 文件夹： Nuxt.js 集成了以下组件/框架，用于开发完整而强大的 Web 应用：Vue 2Vue-RouterVuex (当配置了 Vuex 状态树配置项 时才会引入)Vue-Meta压缩并 gzip 后，总代码大小为：28kb （如果使用了 Vuex 特性的话为 31kb）。另外，

import Vue from 'vue'import VueRouter from 'vue-router'import HelloWorld from '@/components/HelloWorld'import Sass from '@/pages/sass'import Filter from '@/pages/filter'import Store from '@/pages...

import axios from 'axios'; import qs from 'qs'; import Vue from 'vue'; import Element from 'element-ui'; import stroage from '~/plugins/utils/localstroage'; Vue.use(Element); // let baseURL = ; ...

filter.js内封装的工具类/* eslint-disable */import moment from 'moment';import Vue from 'vue';// eslint-disable-next-lineDate.prototype.Format = function(fmt) { //author: meizz var o = { 'M+': t...

&lt;template&gt;&lt;div class="box"&gt; &lt;h1&gt;vuejs之css过渡与css动画&lt;/h1&gt; &lt;p class="p"&gt; 过渡的类名 在进入/离开的过渡中，会有 6 个 class 切换。 &lt;br&gt;v-enter：定义进入过渡的开始状态。在元素被插入之前生效

什么是跨域？ 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域：1.) 资源跳转： A链接、重定向、表单提交 2.) 资源嵌入： &lt;link&gt;、&lt;script&gt;、&lt;img&gt;、&lt;frame&gt;等dom标签，还有样式中background:url()、@font-face()等文件外链 3.) 脚本请求...

在vue的配置文件.eslintrc.js中配置以下选项 这样只需要右键格式化以下文件夹，大部分eslint规则报错就会被干掉了module.exports = { root: true, parser: 'babel-eslint', parserOptions: { sourceType: 'module' }, env: { browser: tru

一. 标签实现新窗口打开：官方文档中说 v-link 指令被 组件指令替代，且 不支持 target=”_blank” 属性，如果需要打开一个新窗口必须要用标签，但事实上vue2版本的 是支持 target=”_blank” 属性的(tag=”a”)，示例如下：&lt;router-link tag="a" target="_blank" :to="{name:'searchG...

html&lt;template&gt; &lt;div class="loading"&gt; &lt;Spin class="img"&gt; &lt;Icon type="load-c" size=38 class="demo-spin-icon-load"&gt;&lt;/Icon&gt; &l

错误示例 this.leftColumn = {...this.Columns}; this.rightColumn = {...this.Columns};正确示例 this.leftColumn = JSON.parse(JSON.stringify(this.Columns)); this.rightColumn = JSON.parse(JSON....

浅拷贝这里就不讲了，我们直接讲深拷贝正常的数组/对象拷贝可以直接用const cloneObj = JSON.parse(JSON.stringify(Obj));这种方式可以解决相当多一部分的赋值问题，但是一些特殊属性除外（undefined/function）在vue 或者js 中有时需要对一些特殊数据处理，比如VUE中的table等…这个时候就需要用到第二种方法处理数据附代码：...

正常 js 页面处理方式window.onbeforeunload = function (e) { e = e || window.event; // 兼容IE8和Firefox 4之前的版本 if (e) { e.returnValue = '关闭提示'; } // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+ r...

Vue.nextTick(callback)，当数据发生变化，更新后执行回调。Vue.$nextTick(callback)，当dom发生变化，更新后执行的回调。示例：&amp;lt;ul id=&quot;demo&quot;&amp;gt; &amp;lt;li v-for=&quot;item in list&quot;&amp;gt;{{item}}&amp;lt;/div&amp;gt;&amp

在Vue中为了更好的操作DOM元素，其内置了一些指令，比如v-model、v-if、v-show、v-text、v-html、v-for和v-bind等。除此之外，Vue也允许注册自定义指令创建自定义指令，在Vue中一个指令定义对象可以提供下面几个钩子函数，而这几个钩子函数都是可选的： bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置 inse