项目vue3 vue

今天用户反馈使用页面的时候，有时候点击没反应，排查下来，是因为发布版本的时候，用户那边没有加载最新的文导致的，然后根据思路，做了这个自动更新的功能 效果预览 http://demo.webwlx.cn/#/update 实现思路 1. 把当前版本的编译时间，通过环境变量的方式保存起来 打开 vite ......

node打包耗时分析 插件安装 cnpm i hard-source-webpack-plugin 官方地址 https://www.npmjs.com/package/hard-source-webpack-plugin 配置之后初次打包会觉得没什么差异,主要是会先写编译文件到磁盘中（相当于第一次 ......

在面向组件化开发中，我们会把整个项目拆分为很多业务组件，然后按照合理的方式组织起来，那么自然会存在组件之前切换的问题，vue 中有个动态组件的概念，它能够帮助开发者更好的实现组件之间的切换。但是在面对需求频繁的变化，切换组件时，动态组件在切换的过程中，组件的实例都是重新创建的，而我们需要保留组件的状 ......

（webpack中文地址：https://www.webpackjs.com/loaders/） 1、第一步：新建一个空文件夹 （此处以 webpacktwotest文件夹、vscode编辑器为例） 2、第二步：安装 1）在编辑器中打开文件夹（webpacktwotest 打开命令行快捷键Ctrl+ ......

路由：Vue-router（vue路由插件） 先了解下 route、routes、router三者之间的区别 （加$只是为了区别其它变量） router：一般指的是路由实例 ，如：vue的编程式导航 this.$router.push() routes：指创建 vue-router 路由实例的配置项 ......

路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个 ......

mixins: [混入变量名称] 说明：不需安装，直接使用， 作用：多用于 提取公共 类似的数据和方法，和组件<script/>中书写一样，data、methods、钩子函数 使用：引入之后，同组件使用 script 中的数据和方法一样使用 功能点：引入之后，相当于mixins下的数据、方法和钩子函 ......

以下均已父组件为例：<my-box></my-box> <slot></slot> （无需安装，直接使用，使用组件时需引入对应组件） 说明：插槽就是内容分发API，将 <slot></slot> 作为承载内容分发的出口；简单的讲就是使用了插槽后就可以将<my-box>文本、HTML</my-box> ......

@vue/cli安装存在以下两种： npm install -g @vue/cli vue --version or vue -V(注意是大写)查看版本 vue create 项目名称cd 项目名称npm installnpm run serve 1、默认安装 安装上面的步骤，一路回车即可 2、手动 ......

const path = require('path'); function resolve (dir) { return path.join(__dirname, dir) } module.exports = { chainWebpack: (config)=>{ config.resolve. ......

1、vue+webpack搭建得项目结构 ......

封装代码： <!-- * @Descripttion：图表组件--> <template> <div class='YxkEcharts'> <VEcharts :params="echartsObj"></VEcharts> </div> </template> <script> // 图表 co ......

过滤器 filters： 作用：按照设定的代码，返回过滤后的数据，如：取整、保留小数、大写、添加等 注：num 会作为过滤器函数的第一个参数，过滤器函数之后的参数依次作为 第 2个 ...第 n 个 示例： ......

动态组件： 动态组件：即组件是否展示需要根据条件判断，该组件即为动态组件 作用：多用于 tap 切换时某个板块展示对应组件内的内容 功能点：点击一级 tap 时，展示一级 tap 对应板块内容（一级组件）；点击二级 tap 时，展示二级tap对应的板块内容（二级组件） 示例图： 创建组件; 最外层包 ......

简介： vuex：多个文件公共状态管理 vuex五个属性： state：数据存储 getters：数据提取，对数据进行提取，不更改原数据，和vue计算属性computed一样，实时监听state值的变化（最新状态），并把最新数据扔进vue.store里；如提取对象数组中id不为0的数据 mutati ......

组件代码： <el-button v-print="{id: 'print-content'}" icon="el-icon-printer">打印</el-button> // 插件 vue-print-nb 示例： ......

1、下载组件 npm install vue-quill-editor –D 2、在需要的组件内引入富文本 import { quillEditor } from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/ ......

1、swiper设置height：auto 2、设置swiper-itemposition：static <swiper-item v-for="(item, index) in list" :key="index" :style='selected_index==index?{position: ......

// 使用说明查看 README.md let commonJs = {} // 1、深拷贝 commonJs.deepMerge = (target, source) => { // 判断被拷贝对象是Object // 陷阱！！typeof(null) 'object' true if (type ......

封装代码： <!-- * @Descripttion：表格组件--> <template> <div class='YxkTable'> <el-table :data="data" v-bind="tableBind" v-on="this.$listeners"> <ELTableColumn ......

组件代码： <!-- * @Descripttion：搜索组件--> <template> <div class='YxkSearch'> <el-form :model="form" :ref="$attrs.formRef" v-bind="$attrs"> <!-- 搜索项 --> <temp ......

<!-- Excel表格导入/上传组件，滑到底部可查看详细说明，--> <template> <div class="ImportExcel"> <el-form> <el-upload action="" :accept="excelObjData.accept" :limit="excelObj ......

组件代码： <!-- 拖拽组件，使用说明见 README.md，--> <template> <div class='YxkDrag'> <VDraggable v-bind="dragBind(dragObj)" @start="dragStart" @end="dragEnd" v-on="th ......

Iframe嵌入页自适应方法 /* iframe自适应 config: { iframeId: '', // iframe id/class iframeBodyId: '', // iframe内 包裹元素 id/class bodyId: '.main-container', // 包裹ifra ......

前言 技术栈是 Vue 的人，在面试中难免会被问到 Vue2 和 Vue3 的相关知识点的实现原理和比较，面试官是步步紧逼，一环扣一环。 Vue2 的响应式原理是怎么样的？ Vue3 的响应式原理又是怎么样的？ Vue2 中是怎么监测数组的变化的？ Vue3 中又是怎么监测数组的变化的？ 在问完 V ......

Vue3 的 Provide / Inject 的实现原理其实就是巧妙利用了原型和原型链来实现的，所以在了解 Vue3 的 Provide / Inject 的实现原理之前，先复习一下原型和原型链的知识。 原型和原型链的知识回顾 prototype 与 __proto__ prototype 一般称 ......

组件代码： <!-- * @Descripttion：表单组件--> <template> <div class='YxkForm'> <el-form :model="form" :ref="$attrs.formRef || 'ruleForm'" v-bind="formBind(formOb ......

什么是模板引用 ref ？ 有时候可以使用 ref attribute 为子组件或 HTML 元素指定引用 ID。 <template> <input ref="input" /> </template> <script> import { defineComponent, ref } from " ......

所谓 watch，就是观测一个响应式数据或者监测一个副作用函数里面的响应式数据，当数据发生变化的时候通知并执行相应的回调函数。 Vue3 最新的 watch 实现是通过最底层的响应式类 ReactiveEffect 的实例化一个 reactive effect 对象来实现的。它的创建过程跟 effe ......

实现原理（简单文字） slot 又名插槽，是 Vue 的内容分发机制，组件内部的模板引擎使用 slot 元素作为承载分发内容的出口。插槽 slot 是子组件的一个模板标签元素，而这一个标签元素是否显示，以及怎么显示是由父组件决定的。slot 又分三类，默认插槽，具名插槽和作用域插槽 实现原理：当子组 ......