UserGuan的博客

注意：项目中的路由均写在中，其中默认包含数组，这是固定路由，无论用户是什么角色，都需要显示这些路由内容(即导航栏)。为了根据权限来动态的生成路由，我们需要添加数组，这里面的内容将根据用户角色权限动态生成路由内容(即导航栏)。实现方法：① 在中，通过分析里面的角色权限和当前用户所拥有的角色权限，生成用户可查看到的路由列表。② 在中，遍历显示菜单栏。

这是因为有时候 vue 无法监听到数据的变化，导致数据变化但是视图没有变化，也就是数据更新了，但在页面上没有显示出来。

二进制文件是一种计算机文件格式，它的数据以二进制形式存储，与文本文件不同。二进制文件可以包含任意类型的数据，例如图像、音频、视频、可执行文件、压缩文件等，而文本文件则仅仅包含 ASCII 码或其他编码的字符数据。二进制文件的底层原理是将数据以二进制形式存储在文件中。在计算机中，所有的数据都是以二进制形式表示的，包括数字、字符、图像、音频、视频等。二进制文件通过按照特定的格式将这些二进制数据存储在文件中，以便在需要时能够正确地读取和使用。

/ 跳转到指定 url 路径，并向 history 栈中添加一个记录，点击后退会返回到上一个页面// 跳转到指定 url 路径，但是 history 栈中不会有记录，点击返回会跳转到上上个页面(相当于直接替换了当前页面)// 向前或者向后跳转 n 个页面，n 可为正整数或负整数。

true：无论值是否发生改变，时刻都会监听false：常规用法，只有值发生改变才会监听true：监听到对象属性内部的改变false：监听不到对象属性内部的改变。

指在同一个浏览器窗口中的多个标签页之间进行数据交流和信息传递的过程。通常情况下，每个标签页都是一个独立的浏览器上下文，它们之间是相互隔离的，无法直接访问对方的数据或进行通信。跨标签页通信的目的是允许这些相互隔离的标签页之间进行信息共享和交互。通过跨标签页通信，可以实现数据的共享、状态的同步、消息的传递等功能。例如：在一个标签页中进行了某个操作，希望其他标签页能够及时获得相关的变化和通知，就需要使用跨标签页通信机制来实现这种交互。

但由于原来的 node_modules 里面的依赖没有被删掉，所以原工程运行是正常的。复制一份出来后，我们重新对 package.json 里面的依赖列表进行 npm install 恢复，他就恢复不了之前已经被删掉的东西了，当依赖没有被完全恢复，我们再 npm run serve 就会报错。我们再进行依赖检查时，他还会告诉你除了缺失的依赖外，还有一些情况也最好处理一下，比如这里红框圈出来的这些依赖。，表示说在 package.json 里面写了这个依赖，但在代码里面没有用到，最好把这些没有到的依赖删掉。

在 vue 中，component 可以作为一个占位符使用，就像 template 一样。不同的是 component 是组件的占位符，主要用于展示不同的组件，即 component 就是一个动态组件一样。:def-dist、@addMarkFun、@flyInit 都是自己定义的，和普通组件一样。:is 属性：指定要展示的组件名称，根据is的值来动态渲染组件。component 的使用方法与使用普通组件一样。

list.slice(list.length - 4, list.length) // 获取列表最后 4 条数据输出：标题7、标题8、标题9、标题10

/ --save-dev 将依赖包名称添加到 package.json 文件 devDependencies 下，开发时候依赖的东西。npm install xxx --save // 简写：npm install xxx -S 或 npm install xxx。npm install xxx --save-dev // 简写：npm install xxx -D。npm install 包名称 --global // 简写：npm install 包名称 -g。

【代码】babel-plugin-component 按需引入组件时报错 Parsing error: Cannot find module 'babel-preset-es2015' 的解决办法。

以下为 pnpm 镜像。

1、在 App.vue 中加入 body 样式，并修改默认样式（使背景图片四周不留空白）2、在需要背景图的页面里加入样式3、在原有代码中的 div 外再套一层 div 并引入第二步的样式

大屏自适应容器组件，可用于大屏项目开发，实现屏幕自适应，可根据宽度自适应，高度自适应，和宽高等比例自适应，全屏自适应(会存在拉伸问题)，如果是 React 开发者，可以使用 r-scale-screen 方式。一种基于缩放的大屏自适应解决方案的基本方法，一切都是基于设计草图的像素尺寸，通过缩放进行适配，一切都变得如此简单。autofit.js 提供了一种简单而有效的方法来实现网页的自适应设计，尤其适合需要在不同分辨率和屏幕尺寸下保持布局一致性的应用场景。在 main.js 中引入并使用即可。

import 引入方式。

注意：src 的路径一定要正确，不然会报错。

【代码】vue 配置跨域请求。

可以选择创建 vue2 或 vue3 回车即可。

下载需要展示的map数据（全国/省/市[点击省能进入市]）使用 地理坐标/地图 里面的。

代码】vue通过created设置overflow为hidden。

【代码】vue-router删除页面参数或清除地址栏路由参数。

index.vue页面methods: { toEdit() { // 传输当前行数据到form.vue页面 this.$refs.form.editOps(this.selections[0]) }}form.vue页面<template> <div> <el-dialog title="查看图片" ...

<template> <div> <el-dialog title="订单详情" :visible.sync="dialog" width="900px"> <el-form ref="form" :model="formData" size="small" :inline="true" label-width="110px"&g...

<template> <div class="app-container"> <el-button style="margin-top: 6px;" ref="btn" @click="getDOM()">获取DOM元素</el-button> </div></template><script&...

createMap() { // 创建地图 const map = new AMap.Map('map-container', { resizeEnable: true, zoom: 4 }) const _this = this const markers = [] map.on...

第一种：直接整个页面重新刷新location.reload()this.$router.go(0)以上两种都可以刷新当前页面，缺点是相当于按 ctrl+F5 强制刷新的效果，整个页面重新加载，会出现一个瞬间的空白页面，体验不怎么好第二种：provide + inject组合方式首先，要修改下你的App.vue文件，通过声明reload方法，控制router-view的显...

点击选择车队进行搜索查询后弹出框被遮罩层盖住原因一：因为dialog的组件外层div设置了 position: absolute; 属性，所以导致遮罩层会在最上面原因二：因为是 dialog 里面又嵌套了一个dialog，需要在里面的dialog加上:append-to-body="true":append-to-body="true"我的是因为第二个原因导致di...

第一种<!--传的数据类型是form表单类型-->export function create(data) { return request({ url: '/api/create', method: 'POST', // PUT data })}第二种<!--传的数据类型是键值对：{receiveId: "1207"}--&...

给出的问题：选项动态从后台获取，同时要实时获取到用户选中值的idselect框有红，黄，蓝三个值，id分别为1，2，3用户点击红，获取到红的id为1用户点击黄，获取到黄的id为2用户点击蓝，获取到蓝的id为3问题步骤分为三步：1、点击select框，发送请求到后台取到data值，动态渲染到页面上2、点击要选中的值，拿到选中值的id3、获取选中值的id，赋值给定义好的某...

方式一：使用el-popover弹出框<el-table-column label="物品图片" header-align="center" align="center"> <template slot-scope="scope"> <el-popover placement="top-start" trigger="click"> &l...

第一种用法：v-if —— v-else-if ——v-else<el-table-column prop="versionStatus" label="状态"> <template slot-scope="scope"> <p v-if="scope.row.versionStatus=='1'">在用</p&g...

./：表示相对路径，代表当前目录下的同级目录，遵从的是从后往前找文件@：等价于 /src 这个目录，遵从的是从前往后找，是为了避免麻烦又怕写错的相对路径的简写因为在根目录/build/webpack.base.conf.js文件中配置过 @ 的resolve: { extensions: ['.js', '.vue', '.json'], alias: { ......

--save 是在package.json的【dependencies】里面--save-dev 是在package.json的【devDependencies】里面1、进入项目目录下(my-project)，执行一下npm语句，在项目的package.json文件中有"jwt-simple": "^0.5.6"就表示安装成功，如图：npm install --save jwt-si......

安装node.js创建vue项目安装Vue.js的Ajax(axios)Vue.js安装jquery卸载jquery配置跨域请求安装ElementUI前端框架【完整引入】vue项目打包部署--save 是在package.json的【dependencies】里面--save-dev是在package.json的【devDependencies】里面安装...