爱学习的大雄的博客

在使用element-ui的table组件时，使用树形结构，并使用了懒加载，可出现了一个问题，在对当前节点添加一个子节点数据，或删除一个子节点数据时，当前节点的子节点数据并不自动刷新出来。这条代码上，那原因就是我res.data.dataMap.menuListPage.list中的数据有问题，接口返回了查询了错误的子节点数据，明明当前节点下的所有子节点只有2条，却查出了10多条，所以报内存溢出。修改后端bug后，查出正确的子节点list，刷新子节点就没问题了。本人采用第三种解决方案。

路由的hash模式与history模式打包时差异如下，hashpublicPath配置为./打包完成后可以直接运行dist包下的index.html且有界面显示部署时直接使用宝塔部署即可，无需配置其它historypublicPath配置为或项目在服务器根下路径打包完成后不可直接运行dist包下的index.html，必须要部署到服务器才行部署时还需要自己去配置nginx，实现服务端的映射。

如下图所示，element-admin中引入的阿里巴巴的图标库的icon可以在系统中去控制他的颜色，但是不知道为什么我从阿里巴巴图标库中下载下来的icon有些可以改变颜色有些不能改变颜色，于是我就开始在网络上寻找资料。这个问题在我第一次使用element-template进行开发的时候并没有发现，是在写毕设的过程中发现的该问题。本来没打算记录该问题，但是今天又遇到了这个问题，然后我又有点忘记是怎么解决的了，故做记录方便查询。，就是这个参数导致了我们在系统中无法进行渲染，只能使用他固定的颜色。

避免进坑，亲测4.9版本正常，5.0版本不支持因为官方移除了地图数据和map文件夹china.js。经过百度后，发现可以使用echart来完成该功能，但对echart的版本版本有要求。java后端我完成该需求使用的是redis存储数据来实现。main.js中引入echarts以及china.js。新建组件echars_china.vue。安装echarts@4.9版本。

在解决问题后要及时记录，才能让自己在以后遇到同样问题的时候更快解决。

学会async和await的使用能够让我在开发vue项目的时候更加灵活，之后在遇到axios异步请求冲突的时候可以参考本篇文章进行解决。

在开发基于element-template的vue管理系统中，我需要使用到element-ui的描述列表，但是写入代码后没有相关样式。在idea的vue文件中，打代码的时候没有element-ui的代码提示，如下图，没有红色框框内的代码提示。插件，安装完成并且重启idea后发现确实有代码提示了（但与之前不太一样）经过查询资料后发现可能是由于element-ui的版本较低导致，虽然这个代码提示和出问题之前显示的不太一样，但是总归是有提示可用。在网上查询资料后我的解决方案是，在idea中安装。

在使用vue开发注册页面的时候，需要完成获取邮箱验证码，然后获取按钮进入一分钟倒计时无法点击的需求。

发送axios请求文件下载的接口，那么是不会去进行自动下载文件的，必须要在a标签中去进行调用，才会自动下载文件，所以我们在axios请求完成后，在js中去调用a标签即可。经过寻找资料，发现vue通过axios请求后是不会自动下载文件的，需要我们自己去做一些配置（只能通过a标签去进行文件的下载）去进行请求接口，请求接口后返回的状态码是200，但是就是不会自动下载文件。在我后端文件下载接口开发完成后，使用vue前端去进行对接时出现了问题。，则我们判定它有需要下载的文件，然后我们调用a标签来进行下载。

安装vue-router新建router文件夹，router文件夹下新建文件中引入vue-router的实例，以及Vue实例中挂载路由实例基本步骤完成创建路由组件配置路由映射使用路由显示显示测试点击点击路由的默认值修改history的修改修改完成后，url路径显示tagreplaceactive-class建议使用方式三,前两种只是用来比较方式一直接在该vue的文件中创建style的，class的名字是方式二我们可以修改单个标签上的class的名字为我

因为没有批量导入购物车，所以一般情况下需要一个一个去点，太浪费时间，那么请在控制台输入以下代码，批量导入。在项目src -> assets 目录下，新建一个icon 文件夹。把下载下来的项目里面的文件拷贝到icon文件夹(拷入如下文件即可)选择一个自己喜欢的icon库，将里面的图标加入购物车中。打开在阿里icon的项目，复制你需要的图标代码。在main.js里边把css引进来，全局引入。修改inconfont.css文件。进入阿里icon，新建项目。添加icon到项目中。

查看侧边栏组件src/layout/components/Sidebar/index.vue，可以看到用于呈现菜单的 标签中使用的数据来源是 ，我们在前面整了半天生成的 permission_routes 动态路由并没有被使用。本篇文章是我在做element-admin-template的动态路由时所参考的文章，解决方案非常详细，只要由vue基础，按照这个步骤就可以完成路由的动态权限展示.我在项目中设定了三个用户角色，不同的角色具有不同的权限，也对应着不同的路由，同时侧边栏也需根据不同的权限异步生成。

我解决问题的方式是结合了两种方式，先把环境变量的配置好，然后电脑重启在idea中去执行方式1后进行打包,但是这个时候还是错的，于是我就又执行了，然后再次执行打包，这个时候就没有报错了然后我再次查询我npm的版本，发现由原来的8.*版本升级到了9.1.3。

在图表展示时，我们经常需要使用到柱状图等，其中展示的数据我们一般是从后端获取，我这里遇到的问题就是无法动态展示从后端获取的数据（后端获取后无法展示），在解决完这个问题后，写下该笔记进行记录。在后台管理界面中有图表展示的需求，经过查阅资料，发现echarts较为合适，故使用vue+echarts进行开发图表效果。上，所以就需要先获取数据，数据获取完成后再去进行渲染，否则数据无法渲染到图表中。中进行了，所以我们在初始化前就需要将从后端获取的数据渲染到。**问题的原因是：**图表的初始化是在。

起初想的是不是接口没有及时返回图片url，经过不断的测试，发现如果页面进来的时候只要头像加载成功了，那么再去修改头像，头像是会自动刷新的。然后就去翻看了dom信息，发现当头像加载失败时，dom是没有头像img标签的，加载成功就存在img标签。查看发现有，我就想是不是标签的问题，我同样适用。组件头像作为展示图片，第一页是有图片的，在点击第二页，重新切换为第一页时，发现第一页的图片不展示。示例：刚进页面的时候图片可以显示，但是查询后显示不出来了（下图是我修改完成后的）标签放，发现图片正常显示，那就是。

本文主要讲述如何在vue中使用路由判断简单实现登陆的的拦截。如何实现首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由， 否则就进入登录页面。path: '/Info',meta: { requireAuth: true},component: resolve => require(['../pages/InfoPage.vue'], resolve)定义完路由，main.js中利用vue-r

命令行都需要使用管理员模式运行创建一个名为hello-vue的工程vue init webpack hello-vue创建时全部选no安装依赖可选# 进入工程目录cd hello-vue# 安装vue-routernpm install vue-router@3.5.13 --save-dev# 安装element-uinpm i element-ui -S# 并安装依赖npm install# 并安装SASS加载器//这里的版本建议使用4.0.0版本cnpm

自定义事件内容分发v-bind给组件绑定参数，简写**😗*v-on 绑定事件，简写**@**v-model 数据双向绑定组件内部绑定事件需要使用到this.$emit(‘事件名’,参数);<!--view层 模板--><div id="app"> <todo> <todo-title slot="todo-title" v-bind:title="title"></todo-title> &l

表单双绑和组件表单双绑为什么要实现数据的双向绑定​ 在Vue.js 中,如果使用vuex ，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，Vuejs 的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项,方便跟踪;局部性数据流使用双向，简单易操作。在表单中使用双向数据绑定​ 你可以用v-model 指令在表单 、 及 元索上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖

Axios异步通信官方文档：https://axios-http.com/zh/docs/introgithub地址：https://github.com/axios/axiosCDN:Json数据{ "name": "lzj", "url": "https://blog. kuangstudy.com" , "page ": 1, "isNonprofit": true, "address": { "street": "含光门", "city": "陕西西

项目场景：在vue中安装vue-router问题描述：提示：在安装过程中报错，缺少依赖：PS D:\WebDeplpyer\workspace\Vue_Basic\vue_test> npm i vue-routernpm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency treenpm ERR!npm ERR! While resolving: vue_test@0.1.0npm ERR! Found

VueMVVM架构：view（视图层）、viewModel（双向绑定层）、 Model（数据访问层）idea中使用VUE环境准备官方文档：https://cn.vuejs.org/v2/guide/installation.html#%E5%AF%B9%E4%B8%8D%E5%90%8C%E6%9E%84%E5%BB%BA%E7%89%88%E6%9C%AC%E7%9A%84%E8%A7%A3%E9%87%8A在setting中下载插件（搜索Vue.js）导包开发版本

Vue的七大属性el属性用来指示Vue编译器从什么地方开始解析Vue的语法，可以说是一个占位符。data属性用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。methods属性放置页面中的业务逻辑，js方法一般都放置在methods中template属性用来设置模板，会替换页面元素，包括占位符。render属性创建真正的virtual Dom 用js来渲染组件computed属性用来计算watch属性watch