卡尔特斯

【代码】Vue 禁止输入框输入空格。

有个h5需要加入播放器，发现在微信浏览器中无法自动播放，在移动端普通浏览器中也无法正常自动播放ios浏览器中（微信或者其他浏览器），每次刷新进入网页首次需要手动点击播放，下次会自动播放。安卓在微信浏览器中是随便怎么样都不会进入自动播放，在其他浏览器中会进入自动播放。ios平台可以通过微信官方的jweixin插件来解决，但是安卓就暂时无任何办法，限制太严重，只能通过诱导用户点击屏幕进行播放。

【代码】npm install 报错 'proxy' config is set properly. See: 'npm help config'

Vue 使用 mockjs (返回数据、get、post 请求)

完美解决 - 前端发版后浏览器缓存问题（发版后及时拉取最新版本代码）

一、区别防抖与节流的相同点: 为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。函数防抖(debounce): 短时间内连续触发事件后 n 秒内函数只会执行一次，如果 n 秒内事件再次被触发，则重新计算时间，所以短时间内的连续动作永远只会触发一次。函数节流(throttle): 短时间内连续触发事件，但在 n 秒内只会执行一次，也就是说即预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期，所以节流会

安装$ npm install --save vue-clipboard2配置import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)使用<div v-clipboard:copy="url" v-clipboard:success="copySuccess" v-clipboard:error="copyError"></div>methods: { // 复..

自定义 antdv 主题配置时，报错:ERROR Failed to compile with 1 error 上午11:35:54error in ./node_modules/ant-design-vue/dist/antd.lessSyntax Error: // https://github.com/ant-design/ant-motion/issues/44.be..

Vue 通过 贴贴 事件监听，拿到 图片、视频、文件、文件夹，可以上传之后使用，也可以先展示后上传。<template> <div> <input @paste="pasting"> <img :src="url"> </div></template><script>export default { data () { return { // 贴贴图片地址 ..

在使用 compression-webpack-plugin 插件时报这个错误，原因是版本问题。ERROR TypeError: Cannot read property 'tapPromise' of undefinedTypeError: Cannot read property 'tapPromise' of undefined安装插件的时候默认最新版本，但是可能脚手架还不支持这个版本，所以需要降低插件版本进行使用，这边在安装的时候最新版本为 v9.2.0，降到 v6.1.1 进行使用..

DZMRefresh-Vue支持不够一屏数据自动进入加载，窗口变化内容不够自动进入加载，默认不开启。支持元素 slot 自定义。

安装 lodash# Yarn$ yarn add lodash# NPM$ npm install lodash --save使用// 第一个是回调函数，第二个是防抖动的时间毫秒数，第三个是配置// 一般配置前两个参数即可_.debounce(func, [wait=0], [options={}])<template> <!-- 输入框 --> <input type="text" @input="onChange"/>&l...

在 main.js 中导出 vue 实例const vue = new Vue({ router, store, render: h => h(App)}).$mount('#app')export default vue在需要用到的页面导入 @/main 获得 vue 对象import vue from '@/main'// 使用vue.$message.success('导入成功')...

$ npm run dev 提示如下错误:Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.原因：node-sass 版本过高，卸载重装低版本1、卸载：$ npm uninstall node-sass2、安装：$ npm install node-sass@4.12.03、运行：$ npm run dev...

node 版本升级后，运行报错：Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (64) For more information on which environments are supported please see:解决方案一（推荐）：1、卸载$ npm uninstall --save node-sass2、清除缓存$ ..

收藏一波方便后面选框架！Vue 移动端框架Vue PC框架React 移动端框架React PC框架

报错: Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.原因是浏览器开启了 阻止第三方 Cookie 访问，一般 隐身模式 会默认开启阻止。Chrome 在 隐身模式 下手动开启一下 设置 -> 隐私设置和安全性 -> Cookie 及其他网站数据 -> 允许所有 Cookie...

原因是 nodejs 版本太低了，还不支持 zlib，所以需要将 nodejs 升级到 >= v10.16.0 版本。nvm 管理 node 版本

一、chunk-vendors.js 简介顾名思义，chunk-vendors.js 是捆绑所有不是自己的模块，而是来自其他方的模块的捆绑包，它们称为第三方模块或供应商模块。通常，它意味着（仅和）来自项目 /node_modules 目录的所有模块，会将所有 /node_modules 中的第三方包打包到 chunk-vendors.js 中。将所有的第三方包集中到一个文件，自然也会出现文件过大的问题。二、chunk-vendors.js 文件大小分析新创建一个 vue 项目，

主篇 Vue 打包 chunk-vendors.js 文件过大导致页面加载缓慢解决方案。根据主篇内容继续通过 compression-webpack-plugin 插件处理 chunk-vendors.js 文件过大的问题。创建 vue.config.js 文件，后续配置都需要用到配置文件。前端将文件打包成 .gz 文件，然后通过 nginx 的配置，让浏览器直接解析 .gz 文件，可以大大提升文件加载的速度。安装插件npm 安装// 安装报错的话看下面注释，用下面的版本..

1、通过 npm run build 进行打包，获得 dist 文件夹2、安装 Nginx 之后，并在配置文件中添加下面的 server 配置，专门针对 vue 的配置，注意调整根目录。server { # 监听端口 listen 8088; # 主机名称 # server_name www.xyq.com; # 根目录 root /usr/local/var/vue/chunk/dist; # 匹配协议 location / {..

一、mouseover 和 mouseenter 的区别mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是 mouseoutmouseenter:当鼠标移入元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡。对应的移除事件是 mouseleave通过图片进行分析 冒泡 情况hover 事件调用顺序mouseover -> mouseenter -> mousemove(hover进去之后移动会触发) -&gt

在 Vue 中路由报错 NavigationDuplicated: Avoided redundant navigation to current location: "/"，原因是路由重复。解决方案在 router 文件夹下的 index.js 中加入下面代码，解决！const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location) { return origi..

一、简介Sass 和 Less 语法严谨，Stylus 相对自由。因为 Less 长得更像 css，所以它可能学习起来更容易。Sass 和 Stylus 都具有类语言的逻辑方式处理：条件、循环等，而 Less 需要通过 When 等关键词模拟这些功能，这方面 Less 比不上 Sass 和 Stylus。Less 在丰富性以及特色上都不及 Sass 和 Stylus，若不是因为 Bootstrap 引入了 Less，可能它不会像现在这样被广泛应用。Less 环境较 Sass 简单。

Dart Sass 是 Sass 的主要实现，这意味着它在其他实现之前先获得了新功能，它快速，易于安装，并且可以编译为纯 JavaScript，从而可以轻松集成到现代 Web 开发工作流中。Sass 官方目前主力推 dart-sass，最新的特性都会在这个上面先实现。相同点：都是用来将 sass 编译成 css 的工具。区别：node-sass 是用 node (调用 cpp 编写的 libsass) 来编译 sass。dart-sass 是用 drat VM 来编译 sass。..

配置全局样式安装 Less// 一起安装$ npm i less less-loader -D// 分开安装$ npm i less -D$ npm i less-loader -D// 指定版本安装$ npm i less@3.0.4 -D$ npm i less-loader@5.0.0 -D安装 less-loader 如果报错 unable to resolve dependency tree，是因为安装版本过高，降低版本即可，附带 解决方案安装成功之后就..

一、简介安装 Less// 一起安装$ npm i less less-loader -D// 分开安装$ npm i less -D$ npm i less-loader -D但是在安装 less-loader 的时候失败，报错：npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency treenpm ERR! npm ERR! Found: webpack@4.46.0npm ERR! n

一、简介在使用 ant-design-vue 时，需要修改一下全局的主题颜色，按照官方的配置流程配置失败，应该是版本问题。二、安装 antdv安装 ant-design-vue$ npm i --save ant-design-vuemain.js 中配置，完整引入import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'/

一、简介在样式引入时，对于变量的引入，需要在每个文件里都要引入一遍，为了避免每次使用时都需要单独引入一遍的问题，采用了 style-resources-loader。在确保安装指定 CSS 解析器 插件（less、less-loader | stylus、stylus-loader …）后。这里以 less 举例，新建一个 reset.less (文件名随意)，路径为 @/assets/reset.less。单页面导入示例：<style lang="less" scoped

FaceApi GitHubB站教程技术博客模型文件加载存放需要注意：方式一：模型文件放到服务器，通过 URL 进行加载，走代理方式二：如果直接加载本地文件，需要通过 服务器 进行访问！否则会报错： URL scheme must be "http" or "https" for CORS request小程序集成失败1、错误：TypeError: Cannot read property ‘mark’ of undefined，勾上 增强编译2、错误：getEnv..

在通过 JSX 写的标签代码时，怎么调用 Vue 事件？Home.vue<script>export default { methods: { touchClick () { console.log('点击成功') } }, render () { return ( <div onClick={this.touchClick}>页面内容</div> ) }}</script&g..

在使用 a-select 的时候，有时候需要支持搜索，这个时候需要跟选项框中的内容进行匹配。这个是要就需要使用到 filterOption 这个属性了<template> <a-select showSearch :filterOption="filterOption" :getPopupContainer="(triggerNode) => triggerNode.parentNode" style="width: 200px" ..

Github 下载地址：DZMLuckyDraw。网盘下载：DZMLuckyDraw。下载项目后，通过浏览器打开 主入口，然后导入名单即可使用，也可以自定义奖项名称，内定中奖人员，不用担心误关窗口。自定义奖项设置人员名单配置，内定配置规则可导出中奖名单（如果不小心误关抽奖窗口、刷新网页都不会导致丢失用户名单、中奖名单、剩余未中奖用户名单、奖项配置等，所以误操作也没事，可以重新在同一个浏览器中打开，再次进入抽奖页，继续操作即可，流程保持不变）。这里有一个优化版本，是由 shatinGitHub 进行优

导入 iconfont，按照官方配置完成之后。正常使用<span class="icon iconfont">&#xe64f;</span>动态设置vue:<span class="icon iconfont" v-html="testIcon"></span>js:data () { return { // 测试 iconfont testIcon: '&#xe651;' }}..

一、简介Vue 自定义组件实现 v-model 数据双向绑定在使用 Antdv 中 Form 表单的时候，有时候需要官方自带的组件未必够用。这个时候需要使用到自定义的一些组件，自定义的组件需要支持数据双向绑定，也需要支持 v-decorator 的数据效验，或者默认值设置等等。二、自定义相关组件CustomInput.vue：自定义一个输入框来举例<template> <!-- 包装一个 input，让它支持数据双向绑定 v-model，同时也支持 fo

Antdv 中 a-date-picker 自定义 footer 之后点击按钮 手动关闭 时间弹窗，默认是不支持的，而且通告官方给出的 open 属性也是无法做到的，因此需要下面的操作：```<template> <a-range-picker ref="range-picker"> <template slot="renderExtraFooter"> <div @click="touchHide">手动关闭</div&gt

一、简介通常在开发的时候，随处使用到 v-model 进行数据双向绑定<input v-model="name">等价于<input :value="name" @input="value = arguments[0]">这里通过 计算属性 的 get() 、 set() 实现数据的双向绑定1、组件内部可以接收并同步父组件传入的 value 值2、组件内部可以在该双向绑定值修改时 emit 一个 input 事件二、JS 实现自定义组件 v-model

今天打包 Vue 项目，突然蹦出一个告警：Browserslist: caniuse-lite is outdated. Please run:$ npx browserslist@latest --update-db或者$ npm update按照提示操作，运行上面 npx browserslist@latest --update-db 能解决问题。但是有的版本会报错提示运行 npm update，但是运行 npm update 不能解决问题。于是查询了一下 npm 手册..

在 Vue 开发中自定义组件之后，需要往组件身上添加 click 之类的一些操作事件，但是加上之后会无效。原因是因为没有加上 native,官网对于 native 的解释为:.native - 监听组件根元素的原生事件。因此正确的写法是：// 无效写法<custom @click="touchCustom"></custom>// 正确写法<custom @click.native="touchCustom"></custom>..

有时候局部使用 Vue 进行开发，需要用到 vue.min.js，方便导入使用。1、打开 Vue Git 地址 下载。2、下载的 Vue 项目中找到 dist 文件，该文件中就有 vue.js(未压缩)、vue.min.js(压缩) 文件，拖出来使用即可。3、(附带) 也可以从当前已有的 Vue 项目中拿到第 2 步中的文件，node_modules -> vue -> dist，该文件跟第 2 步一样。...