任磊

解决报错：无法使用 JSX,除非提供了 “--jsx“ 标志

出现这个问题，就是你vue文件里面导入的方法或者其他的东西更不存在，确认文件的相对路径是否正确，可以解决此问题如我的

最近要做一个走马灯形式的效果，是多个卡片式的效果。于是，想到了 vue-awesome-swiper这个插件。这是插件是基于swiper的。首先，安装插件npm install swiper vue-awesome-swiper --save # oryarn add swiper vue-awesome-swiper全局引入import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper' // im

使用绝对路径

今天做uni-app项目时发现去年用HBuilderX真机调试iPhone还可以，如今下载最新版HB上手发现点击真机运行直接不显示设备了。按照网上说的什么覆盖dll文件也都没卵用，后台看教程说使用iTunes去连接调试，但是还是没搞成。最后看到一篇《win10下HBuilderX真机调试iPhone不显示》后搞成。特此记录一下：1.利用数据线连接电脑，手机上若弹出是否信任，点击信任2.下载安装iTools43.打开iTools，会自动安装驱动，如果安装失败，会弹出修复窗口，点击"是"将会自动修复4

1.业务需求：vue项目使用Echarts进行数据看板绘制，当数据发生改变时，需要重新进行图形绘制。2.解决方案：目前网上流传的方法：myChart.setOption(option,true)亲测无效，因此重找了资料找到了解决方法（Echarts在图形绘制时会在容器创建Echarts实例并创建’echarts_instance’属性，这个属性是实例ID，当Echarts绘制时会先对这个属性进行匹配，如果没有就会重新实例化）：// myChart：图形绘制容器document.getEle

最近做一个vue项目遇到了一个问题，项目打包上线发现chunk-vendors.js文件也太大了点，第一次加载页面需要将近30s，这肯定是无法容忍的，于是‘调研’了一番，记录下解决方法第一步：先下载这个插件npm install --save-dev compression-webpack-plugin第二步：修改vue.config.js配置文件，如果没有vue.config.js，在根目录自己创建一个，下面是配置文件的代码在vue.config.js中添加const path

在vue项目当中，有时会遇到为文本输入框或者button按钮绑定键盘事件，最常见的就是在enter回车事件。按照vue官网给出的方法是：v-on:keyup.enter简写：@keyup.enter如果是绑定在组件上的话，需要加native修饰符 <el-input v-focus :placeholder="$t('enterPoolName')" v-model.trim="strPool"

在vue项目当中实现对某个数据的复制，运用插件是十分方便快捷的vue-clipboard2安装npm install --save vue-clipboard2main.jsimport Vue from 'vue'import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard)实现方式<template> <div class="container"> <inpu

利用vue-json-viewer插件，利用这个插件，可方便快速实现高亮，JSON折叠，copy 三种功能！！！官网地址：https://www.npmjs.com/package/vue-json-viewer效果展示需要展示的JSON数据：{ "Data": { "Body": "ew0KICAgICJuYW1lIjogIlN5c3RlbSIsDQogICAgImNvbmRpdGlvbnMiOiAiQ29udHJhY3RDb25kaXRpb25zKFwiQDFEu...

在前端开发的项目当中，与后端进行数据交互，请求后端数据是一个必不可少的工作。当前前端开发工作中，通常使用axios插件向后端拿数据。Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。axios有很多的有点，这里就不一一一一熬述，有兴趣的读者可以自行搜索。如果直接使用axios，比如：npm install axiosoryarn add axios需要对axios的请求、响应进行二次封装， 会多一道工作。作为一名程序员，切记不要重复..

1.vue-cli3构建的项目目录中有public,该目录下的favicon.ico就是指图标，index.html文件里面可以链接该图标。2.首先将favicon.ico文件修改为自定义的logo，名称不变。以下代码为inde.html中的内容，红色边框中的代码即可链接自己的logo,蓝色边框的代码用于修改标题4.在vue.config.js里面加入以下代码module.exports={ pwa:{iconPaths:{f...

图像大小通常可以减少多达60％，但这并不是唯一的事情@aceforth/nuxt-optimized-images：通过在构建过程中优化图像来减小图像大小。 通过提供渐进式图像（用于支持它的格式）来提高加载速度。 内联小图像以保存HTTP请求和其他往返。 在文件名中添加内容哈希，以便可以长时间在CDN级别和浏览器中缓存图像（这是Nuxt.js的默认行为）。 多个构建中的相同图像URL可以长时间缓存。 提供查询参数，以进行特定于文件的处理/设置。 JPEG / PNG图像可以即时转换WebP为

首先下载babel-plugin-transform-remove-console插件npm install babel-plugin-transform-remove-console --save-dev2在nuxt.config.js添加外面判断生产环境还是开发环境let remove_console= []if(process.env.NODE_ENV === 'production'){ remove_console.push("transform-remove-con

我们开发过程中经常会使用很多 less 全局样式，但是 vue 文件中想使用 less 变量，就需要挨个引入，极其麻烦。现在我来揭秘：1. 定义一个 themes.less 文件，将你想用的全局变量装入其中@primary-color: #32b642; // 全局主色@link-color: #32b642; // 链接色@warning-color: #faad14; // 警告色@error-color: #f5222d; // 错误色@font-size-base: 14px;

一、完整引入Echarts 下载安装echarts包 npm install echarts -S or yarn add echarts 定义图表显示的容器，并进行渲染 <template> <div id="myChart" ref="myChart"></div> </template> <style> #myChart { width: 95%;

一、 命令行形式生成打包报告安装依赖vue-cli-service build --report1.通过vue-cli的命令选项可以生成打包报告2.--report选项可以生成report.html以帮助分析报告内二、 在vue控制台生成打包报告1.点击任务->build->运行2.运行完毕, 点击右侧分析，控制台面板查看报告3.通过控制台和分析面板，可以方便的看到项目中存在的问题...

vue项目在谷歌打开没有问题，在360和2345浏览器打不开，控制台报错：SCRIPT5009: “Promise”未定义，原因是360、2345的内核和 IE 都是一根绳上的蚂蚱。解决办法：一、安装：npm installbabel-polyfill --save-dev1二、在main.js中引入import "babel-polyfill"1 （如果有用vuex在store中的index.js中也最好引入一下）三、在build文件中的...

如果从vue2.x升级到vue3.x时候出现，项目无法启动，并出现如下报错命令的时候：这个是由于vue的版本与vue-template-compiler不一致导致的，输入命令：yarn upgrade –latest vue-template-compiler将vue-template-compiler更新到最新版本。Yarn 更新模块 将包更新到指定版本： yarn upgrade [pkg-name]@ver # jquery从2.1.4更新到3.0.0版本：

我在a页面写一个定时，让他每秒钟打印一个1，然后跳转到b页面，此时可以看到，定时器依然在执行。这样是非常消耗性能的。如下图所示：解决方法1：首先我在data函数里面进行定义定时器名称：data() { return { timer: null // 定时器名称 } },然后这样使用定时器：this.timer = (() =>

在近期我们发布的《Vue 3 最值得期待的五项重大更新》中，我们了解了 Vue 3 将带来的性能提升，知道了使用新版 Vue 编写的应用程序在性能表现上会很出色。但性能并不是最重要的部分，对于开发人员而言，最重要的是新版本将如何影响我们编写代码的方式。如你所料，Vue 3 带来了许多激动人心的新功能。值得庆幸的是，Vue 团队主要针对当前 API 做了添加和改进，没有引入多少重大更改。因此，熟...

什么是Proxyproxy翻译过来的意思就是”代理“，ES6对Proxy的定位就是target对象(原对象)的基础上通过handler增加一层”拦截“，返回一个新的代理对象，之后所有在Proxy中被拦截的属性，都可以定制化一些新的流程在上面，先看一个最简单的例子。const target = {}; // 要被代理的原对象// 用于描述代理过程的handlerconst ha...

vue-cli3相对vue-cli有很多重要的更新。首先说一些vue-cli这些工具的初衷吧: 这些工具就是为了让开发者能够开箱即用快速地进行应用开发而开发的，它们秉承的是“约定大于配置”思想，简单说就是"能不配置的就不配置，你就按照我的方式来，也不要去争论这个好不好，快速进行业务开发才是正经事". 它们不建议你去配置，但也不会拦着你去配置。另外Webpack对初学者并不是十分友好，‘又长...

       从很久之前就已经接触过了angularjs了，当时就已经了解到，angularjs是通过脏检查来实现数据监测以及页面更新渲染。之后，再接触了vue.js，当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面。今天，就我们就来一步步解析vue.js响应式的原理，并且来实现一个简单的demo。      首先，先让我们来了解一些基础知识。    基础知识    Ob...

第一步：首先，需要安装vue-cil。命令如下：$ sudo npm install -g vue-cli这个命令只需要运行一次就可以了。安装上之后，以后就不用安装了。下面，我们来用vue-cil构建一个项目。首先，我们在终端中把当前目录定位到你准备存放项目的地方。如我是准备放在~/Sites/MyWork/这个目录下面，那么我的命令如下：$ cd ~/Sites/MyWork第二步：进入到目录之...