在vue中echarts仪表盘实时数据 彩笔一枚，简单记录一下。 业务场景：通过websocket实时推送数据，将数据渲染到仪表盘中。 第一步： 基于准备好的dom，初始化echarts仪表盘实例。 第二步： 我是通过父子组件传值把数据接收过来，在data中定义upPressure参数，并将接收来的devicePressure参数赋值给它，便于后面将值传入到echarts中。 父组件中 <d…
Vue发axios请求，数据成功拿到，但是不能渲染到页面的问题。 昨天还还好的项目，今天开服务器代理报错。一开始以为代理有问题，就各种搜，无效。 最后竟然发现是接口出了问题！！！ 找到新的接口后，拿到数据，但是还是无法渲染到页面，又是各种搜。。。 最后看工具，发现JSON数据获取的是对象，我按着数组处理的，肯定不对啊。。。太蠢了。。以下是我修改的过程，希望可以帮到你 查看JSON数据格式 获取到的…
路由router注册 router目录下的 index.js 配合 permission.js 是整套vue前端项目的权限判断核心. index.js 里面的path 配置都是一些不会与权限挂钩的路由,例如: 404、登录页面路径等. permission.js 中的 router.beforeEach 是路由拦截,在访问某个链接之前会进行权限判断,但是如果你注释掉这部分代码,然后再去访问某个路径…
keep-alive包裹的动态组件会被缓存，它是一个抽象组件，它自身不会渲染一个dom元素,当组件在 keep-alive内被切换，组件里的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 如keep-alive包裹两个组件：组件A和组件B。当第一次切换到组件A时，组件A的created和activated生命周期函数都会被执行。在切换到组件B，这时组件A的…
如何搭建一个vue3.0基础项目？ 一、我们要确保vue/cli版本在4.5.0以上，才能更好的支持3.0 //安装最新vue/cli yarn global add @vue/cli //或 npm install -g @vue/cli 用 vue -V 查看安装的版本号检验是都成功安装。 二、通过 vue/cli3 创建我们的第一个项目 vue create my-project ? Ple…
由于时间太晚了，我早已是睡眼朦胧，不多说了，直接上代码。 大家都知道vuex的state、getters、mutations、actions吧，不知道的也没关系，官网走一波。 先看整体目录结构： 下面我们来看看每个文件中是怎么操作的： index.js: import Vue from 'vue' import Vuex from 'vuex' import state from './state…
一、升级Vue-clidao 3.0 全局更新Vue-cli版本 yarn global add @vue/cli@next # OR npm install -g @vue/cli@next 输入 vue -V (大写的V)查看版本 @vue/cli 4.5.4 二、创建3.0版本的Vue项目 如图，使用 vue create vue-demo 创建项目，会有如下提示，选择中间项可以直接创建3.…
文章目录 前言 一、封装element ui 第一步：创建 第二步：设置 第三步：导入 二、封装api 第一步：创建 第二步：设置 接着 最后 总结 前言 封装起来不仅便于我们进行统一的管理，也便于修改，同时按需导入，减少导入没有必要的，减小所占的内存。 一、封装element ui 我们往往并不是需要用到所有的 element ui 的所有组件，如果我们按照我们用到的进行导入就能减小所占的内存！…
antd结合vue写监听输入框的数据让table表格增加数据，并且输入的数值不能超过选中这条数据的总和。 当选择某一条数据后，请求后端就会给我们返回这条数据的总数，当我们在红色输入框内输入的数字大于蓝色下拉框返回的总值时就会提示。让用户重新选择。（如下图） 输入数字会在右侧表格追加数据。（如下图） 那么接下来那就让代码演示一下吧 <a-table :columns="columns" :da…
vue create 命令构建vue项目 创建vueapp目录，用来方式 你的vue项目。 步骤： vue create 项目名称 例如：vue create vueshop1 手动配置一下选项 进入项目 cd shopapp 启动项目 npm run serve cd vueshop1 使用doc命令，切换进入到你的项目中 npm run serve 启动项目 在黑窗口中，选中地址文本，单…