夏天的博客

本文将带你从零开始，深入了解 Pinia 的基础知识，开启 Vue 状态管理的精彩之旅。

软件项目脚手架在软件开发过程中扮演着至关重要的角色。它主要具有加速开发流程、统一开发标准、简化依赖管理、支持快速原型制作、提高可扩展性和可维护性、促进团队协作、集成自动化工具、降低学习成本等作用。OpenHarmony 项目发展迅速，项目社区活跃、开发工具链高效，也有了相对丰富的软件开发脚手架，但是与Android 相比，脚手架模板还不够丰富。

必知的 Vue3 组件传值技巧：解锁组件交互新姿势

经过多年的不断演进，Vue 已经构建了一个极为丰富且强大的生态系统，今天就来盘点 Vue 官方生态系统中那些好用的工具！

Tree shaking是一种通过清除多余代码方式来优化项目打包体积的技术，专业术语叫 Dead code elimination

"Vue3与Vue2：前端进化论，从性能到体验的全面革新"

实例讲解Vuex的应用，带你深度理解Vuex

项目package.json的配置太低，用最新版的node运行不起来。1.卸载node16 ，重新下载安装 node v12.13.1。node已经安装好了，运行命令 npm install。

vue常用的三种传值方式有：父传子、子传父、非父子传值父组件向子组件进行传值：父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息，在子组件写props接收父组件的值。父组件：<template> <div> 父组件: <input type="text" v-model="name"> <!-- 引入子组件 --> <child :abc="name"></child>

vue 当中的 @click.native.native–侦听组件根元素上的原生事件作用： 给组件绑定原生事件@click是我们在vue开发中经常用到的事件绑定，而@实际上是 v-on 的简写，而 v-on 则是对 vue 的事件体系封装之后的 API接口也就是说，在处理DOM原生事件的场合中需要添加额外的标识符比如：如果使用router-link标签，加上@click事件，绑定的事件会无效，因为router-link的作用是单纯的路由跳转，会阻止click事件，如果不加 .native, 事件是

听说还有童鞋还不会与后端对接口，这篇文章将详细的教你如何对接口。http://10.1.240.200:8080/swagger-ui.html 接口文档

导出功能源代码 exportExcel() { //导出条件，不符合条件则return if (!this.form.date[0] || !this.form.date[1]) { this.$message.info("请输入查询时间范围"); return; } if (!this.form.selectedOptions[2]) { this.$message.info("请选择具体监测点");

1.vue文件<template> <!-- 支付对账管理 --> <div class="Paybill"> 支付对账管理 </div></template><script src="./Paybill.js"></script><style lang="less" scoped>@import './Paybill.less';</style>2.js文件e

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。

错误描述：启动vue项目的时候，出现You may use special comments to disable some warnings. Use // eslint-disable-next-line to …错误原因ESLint 对语法的要求过于严格导致编译的时候报上图那些错误。要知道，这并不是代码有异常，而是代码格式有问题，这些错误并不会影响代码的执行结果。解决方法很简单，既然是ESLint 语法错误，那就取消ESLint验证规则。方法1：如果你的项目是vue脚手架工程，那么找

1.先安装node.js环境，查看环境是否已经安装好，输入以下命令2.安装vue-cli，使用淘宝镜像下载输入命令：npm --registry https://registry.npm.taobao.org install cluster输入命令：npm install cnpm -g --registry=https://registry.npm.taobao.org3. 全局安装vue-cli输入命令：cnpm install -g vue-cli安装成功则输入命令，进行查看4

最近在做的项目是智慧屏项目，用于公司的电视屏展示，它采用的技术栈是vue+js+sass,项目很多采用的都是组件化，用组件化的优点就是可复用性高，减少代码冗余，组件化的思想在开发中很常见也很重要。下面将这次项目中自己做的不足的点以及需要注意的点列举出来。感兴趣的朋友可以看看。1.页面展示2.组件化思想3....

地图检索组件需要覆盖下面的按钮样式需求：地图组件打开需要覆盖下面的按钮的样式存在的问题：按钮样式显示在地图组件的上方，并且改变层级没有用我的思路：一直在用那个z-index，想改变样式。但是就是改变不了解决方案：是在按钮添加v-show,里面定义一个变量，接着设置bm-local-search里面的方法，方法里面写与设置的变量相反的值。思路差异：我一直在纠结的是z-index层级的变化，而不是换一个思维去考虑按钮的显示，还有就是没考虑是这个组件bm-local-search的调用方法，这是我没有想

效果实现：源代码：百度地图组件： https://dafrok.github.io/vue-baidu-map/#/zh/start/usage<!-- 地图弹出框 --> <el-dialog :visible.sync="mapDialogVisible" :show-close="true" width="50%" height="650px" > <div class="map-se

1.分析：什么时候要写组件呢？举例如下图，一个页面中被反复引用的东西，可以将它提取出来写成一个组件。2.组件怎么写？1.index.vue文件(主页)<template> <view class="Policy-page"> <listItem /> </view></template><script src="./Policy.js">import listItem from './componen

在平时项目开发中，经常会使用到v-if和v-show这两个条件渲染，下面讲讲它们的区别。v-if和v-show的区别v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换，来控制元素的显示和隐藏。根据应用场景选择v-if 有更高的切换

选中后超过80%的显示红色，没有则显示黄色，没有百分比的不变颜色。1.A思路：用的是获取dom节点，每切换一次就获取dom节点，然后给它变色；但是这样子的缺点就是有时候切换就会不显示颜色，这个原因是它捕获不到最新的dom节点。2.B思路：用的vue里面的:class，并且就是设置一个变量，如果这个变量为true就是红色，否则就是false黄色，但是这样子不能正确显示百分比出来。3.C思路：就是在外面蒙一层div，符合这个条件就给它颜色。.........

前端写代码流程1.本项目使用的技术栈：看store的index.js文件

1.原因

1.项目结构目录2.项目结构说明1、 Common 公共字体图标和样式表2、 Components 项目公共组件3、 Mixin 前端混入可以省很多代码(高类聚低耦合)，还方便维护4、 Roter 路由跳转配置5、 Services 项目所有的API都在services统一管理6、 Store : vuex 是vue的状态管理 ,它的属性包含State、types、mutations、getters 、action7、 main.js 系统总入口8、 vue.config.js 是可更

1.Active.vue<template> <view class="Active-box_wrapper"> <view class="item" v-for="(v, idx) in data" :key="idx" @click="subActive(v, true)"> <image :src="localImg.activity.war" class="img-arr" v-if="v.status == '未开始'">&

vue子组件调用父组件的3种方法

el-poppver组件的使用

在前端面试过程，vue的生命周期为一道必问题，那怎么回答这个问题呢，以下是为笔者自己认为比较令人满意的回答。1.vue的生命周期是什么？vue实例从创建到销毁的过程称之为vue的生命周期。2.vue的创建过程是什么样的？beforeCreate 实例创建前：这个阶段实例的data、methods是读不到的created 实例创建后：这个阶段已经完成了数据观测，属性和方法的运算， watch/event 事件回调。mount挂载阶段还没开始，$el 属性目前不可见，数据并没有在DOM元素上.

需求：改变货架编号，显示出对应的监控层数。并且初次渲染的时候，也要展示货架编号的对应监控层列表。我的难点在于不知道将对应的层数怎样将它展示出来这个后端给的结构是这样的思路：定义一个选中的变量，然后里面从this.shelvesList.filter过滤掉，里面的shelvesSn 就是change里面的val,然后让 v-for里面的this.deviceCameras[index].levelList = selectedShelf[0].levels意思就是绑定的=选中的层数...

1.报错简述：在子模块less文件中引入全局default.less文件报错，说全局文件注释有错误。2.将原来的//注释改成/**/

<el-date-picker v-model="form.date" value-format="timestamp" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" > </el-date-picker>data(){ return{ .

1.错误显示2.错误原因我的项目安装了eslint规范，ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。3.解决办法在package.json文件内加入如下代码：然后保存重启项目。"rules": { "generator-star-spacing": "off", "no-tabs":"off", "no-unused-vars":"off", "no-console":"off", "no-irre

v-bind指令用于设置HTML属性：v-bind:href 缩写为 :hrefv-on 指令用于绑定HTML事件 ：v-on:click 缩写为 @click

构建vue项目后的第一步就是创建文件夹了，下面将详细的介绍一下文件夹分别是什么意思。文件夹图示：文件夹说明：node_modules文件夹 npm install 安装的依赖代码库build 构建相关src文件夹 是项目源码│ ├── api // 接口│ ├── assets // 主题 字体等静态资源│ ├── components // 全局公用组件│ ├── directive // 全局指令│ ├── filtres // 全局 filter│ ├── icons

1.它们分别是什么？watchcomputedComputed 本质是一个具备缓存的 watcher，依赖的属性发生变化就会更新视图。适用于计算比较消耗性能的计算场景。当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理。Watch 没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开 deep：true 选项，2.它们的使用场景？watch举例：物料清单中的必须要先选择物料，才能点击“下一步”。..

vue路由跳转

1.效果图2.解决方案在该处是为引用的公司封装的组件，因此可以直接去组件那里调整一下它的宽度。上传组件<template> <view class="Upload"> <u-upload style="width: 100rpx;height:100rpx;" class="upload-box" :action="baseUrl" ref="uUpload" deletable="false"

强烈推荐哔哩哔哩教程视频：https://www.bilibili.com/video/BV1v7411R7mp

输入cmd,先打开命令行控制窗口1.先检查是否安装了node环境：node-v下载地址：https://nodejs.org/2.安装脚手架：npm install -g vue-cli3.切换到放文件名的目录：cd /d 目录路径4.vue项目初始化：vue init webpack 创建的项目文件夹名称5.安装项目依赖：npm stall6.运行命令：npm start 或 npm run dev...