随笔分类 - VUE
摘要：问题：使用Vite2 + Vue3 + TypeScript + Pinia 搭建一套企业级的开发脚手架，第一步就遇到了校验问题，问题如图展示 解决方法：（如下图） 点击设置 =》 搜索vetur =》 然后 Vetur › Validation: Script Validate js/ts in
阅读全文
摘要：MQTT安装 npm install mqtt 或 <script src="./static/mqtt/mqttws31.js"></script> 自行下载引入资源 使用本地引入的方式： <template> <div> <p></p> </div> </template> <script> i
阅读全文
摘要：懒加载：也叫延迟加载，即在需要的时候进行加载。 为什么需要懒加载？ 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 场景：如vue这种单页面应用，如果没有应用懒加载，运
阅读全文
摘要：学习笔记： 我们通常给一个元素添加 v-if / v-show 来做权限管理，但如果判断条件繁琐且多个地方需要判断，这种方式的代码不仅不优雅而且冗余。 针对这种情况，我们可以通过全局自定义指令来处理： 我们先在新建个 utils.js 文件，用于存放相关的全局函数； // utils.js // 判
阅读全文
摘要：摘要： 打包的时候开启gzip可以很大程度减少包的大小，非常适合于上线部署。更小的体积对于用户体验来说 就意味着更快的加载速度以及更好的用户体验。 Vue-cli3.0项目 安装依赖：compression-webpack-plugin npm install compression-webpack
阅读全文
摘要：.map文件作用： 项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。 所以该文件如果项目不需要是可以去除掉 Vue-cli3中配置：（https://cli.vuejs.org/zh/
阅读全文
摘要：安装依赖包：（https://www.npmjs.com/package/babel-plugin-transform-remove-console） npm install babel-plugin-transform-remove-console --save-dev 配置： 查看Vue项目根目
阅读全文
摘要：插件安装： npm i vue-cropper 引入插件： 1.组件内使用 import { VueCropper } from 'vue-cropper' components: { VueCropper, }, 2.main.js中使用 import VueCropper from 'vue-c
阅读全文
摘要：例： 执行npm run build 后生成的包名不是默认dist 而是git的版本号名（包含tag和最后一次提交信息） 使用依赖包：npm install --save-dev git-revision-webpack-plugin 配置vue.config.js文件 本地查看git-descri
阅读全文
摘要：实现: vue按比例裁剪图片 安装：npm i vue-cropper 全局引入：（main.js） import VueCropper from 'vue-cropper' Vue.use(VueCropper) 代码实例： <div class="one-form-item"> <el-uplo
阅读全文
摘要：概述：mixins就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用。 例：定义一个mixin.js 组件中使用：index.vue 注意：
阅读全文
摘要：1.watch监听到数据的变化但页面没有刷新 在数据改动的代码后加 this.$forceUpdate(); 添加this.$forceUpdate();进行强制渲染，效果实现。因为数据层次太多，render函数没有自动更新，需手动强制刷新。 2.没有监听到数据的变化 例如：改变了数组中的某一项或者
阅读全文
摘要：情景描述： 1.点击跳转到另一个路由，使用路由go(-1)回到上一个路由 2.使用路由元数据meta存储分页信息，在点击跳转按钮是保存 3.go(-1)回到上一个路由时取出路由中的分页信息重新渲染页面 问题描述： 从代码中强制将currentPage强制设置为保留数据，可以请求到保留页数据，但是分页
阅读全文
浙公网安备 33010602011771号