ICode9

一、创建Vue3项目：基于构建工具webpack vue create 项目名称 基于webpack的项目编译慢 --> 使用vite vite优势：提升开发效率 二、创建Vue3项目：基于vite npm init @vitejs/app 项目名称 yarn global bin yarn global dir yarn config set global-folder "D\yarn\global" yarn conf

如果接入的项目是使用vue3构建的，需要额外进行以下两项更改： 首先，在实例instance赋值时，务必确保是 createApp 函数的返回值赋值给instance，若后续有链式调用，先完成instance赋值操作后再进行链式调用。 正确的方法： instance = createApp(currentApp); instance.use(store)      ...

实现按需加载，主要用到两个插件 1. 按需自动加载UI组件:   unplugin-vue-components 该插件主要作用是省去每次使用一个自定义组件，或UI组件库的组件时对组件的引入。兼容不同UI组件库，需要在安装对应UI组件库的前提下，并引入对应UI组件库的 resolvers。 安装 npm i unplugin-vue-

vue3 ref 和 reactive 函数 前言 上一篇博文介绍 setup 函数的时候，最后出现一个问题，就是在 setup 函数中，编写一个事件，直接去修改定义的变量，发现页面上没有更新成功，并且控制台报错，那这篇博客就是讲解遇到的这个问题应该如何处理。 ref 函数介绍 ref 作用就是将基础数据转换为响应

Vue3 setup 函数 vue2 和 vue3 开发的区别 首先，目前来说 vue3 发布已经有一段时间了，但是呢，由于还处于优化完善阶段，对于 vue3 开发项目的需求不是很高，主要还是以 vue2 开发为主，但是相信，vue3 进行项目开发是大势所趋。 vue2 开发项目过程中，会存在代码冗余和结构杂乱问题，这是 vue3 主

父组件 <template> <el-button type="primary" @click="faEvent">父组件</el-button> <hr /> <!-- 父2子 步骤 1. 定义ref --> <!-- 子2父 步骤 3. 父组件创建自定义事件 --> <SonCpt ref="sonRef" @childEvent=&quo

前言 vue3中使用了全新的组合式API： https://v3.cn.vuejs.org/ vuex从4.x版本开始也对应的提供了适配vue3的api：https://vuex.vuejs.org/zh/ pinia是新出现的状态管理工具，相对于vuex更加精简： https://pinia.vuejs.org/ pinia 注意： pinia 合并了 mutation 和 action，包括异步 无需通

vue3.0中的响应式原理 解决了vue2中存在的问题 新增属性，删除属性，界面不会更新 直接通过下标修改数组，界面不会更新 实现原理： 通过Proxy(代理)：拦截对象中任意属性的变化，包括：属性值的读写，属性的添加，属性的删除等 通过

父组件触发子组件事件   1. 父组件内使用子组件, 并且给出  ref 值 <EditCpts ref="editCptsRef" @refresh="refresh" /> 2. setup 函数中获取引用 const editCptsRef = ref() 3. 需要把引用导出去, 不然会是 undefined setup() { ... return { editCptsRef }

一、创建Vue3项目：基于构建工具webpack vue create 项目名称 基于webpack的项目编译慢 --> 使用vite vite优势：提升开发效率 二、创建Vue3项目：基于vite 第一种：npm init @vitejs/app 项目名称 第二种：yarn 一、创建Vue3项目：基于构建工具webpack vue create 项目名称 基于webpack的项

什么是单文件组件？ 简言之，单文件组件就是一个文件扩展名为.vue的single-file-components(SFC)。是Vue.js自定义的一种文件格式，一个.vue文件，就是一个单独的组件，在文件内封装了组件的相关代码：HTML，CSS，JS。 浏览器本身并不支持.vue文件，所以必须对.vue文件进行加载解析，此时需要vue-loade

批量导入（带信息反馈）： <!-- 批量创建 批量导入 --> <file @refresh="refresh"></file> 组件： <template> <div class="export-wrap"> <el-upload class="upload-demo" action="#" :befor

每天都要开心(▽)哇： 项目开发过程中，我们会遇到一些情况，就是多个组件都可以重复使用的一部分代码逻辑，功能函数，我们想要复用，这可怎么办呢？ VUE2我们是怎么做的呢？ 在vue2 中有一个东西：Mixins 可以实现这个功能 mixins就是将这些多个相同的逻辑抽离出来，各个组件只需要引入mixins，就能

一、代理相关 前言： 参考：https://segmentfault.com/a/1190000014474361?utm_source=channel-hottest  或 https://blog.csdn.net/huangjianfeng21/article/details/92005441（推荐比较详细） 注意：代理的匹配越精准 越好，不然 如果页面的url 也匹配到 到，就会把 页面url 也给转发了。

vue简介 Vue是一套用于构建用户界面的渐进式框架。与其它大型框架（比如Angular），不同之处在于，Vue被设计可以自底层向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有的项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的

Vue3 的父子组件传值、绑定表单数据、UI库的二次封装、防抖等，想来大家都很熟悉了，本篇介绍一种使用 Typescript 的方式进行统一的封装的方法。 基础使用方法 Vue3对于表单的绑定提供了一种简单的方式：v-model。对于使用者来说非常方便，v-model="name" 就可以了。 自己做组件 但是当

<script lang="ts" setup> // 定义需要传入的props类型 interface PropsType { optins?: opertionBtns[] name: string } // 导入withDefaults父默认值 import { withDefaults } from 'vue' // 定义props const props = withDefaults(define

Vue3 teleport官方文档地址：https://vuejs.org/guide/built-ins/teleport.html Vue3中的teleport API极大方便了在Vue3业务逻辑中操作移动Dom位置。 简单举例 <script setup lang="ts"> // 控制节点 let teleportToTarget = ref<string>('#idtest'); </script> &l

项目从vue2 升级vue3，VueI18n需要做适当的调整。主要是Vue I18n v8.x 到Vue I18n v9 or later 的变化，其中初始化： 具体可以参看：https://vue-i18n.intlify.dev/guide/migration/breaking.html Vue I18n v8.x: import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(

全局变量挂载 vue2 Vue.prototype.$lm = {} vue3 const app = Vue.createApp({}) app.config.globalProperties.$lm = {}     声明类型 使用 ts 的情况下，挂载完全局变量后，在 vue 文件中，通过 this 对象 . 出来不来提示的。 什么是声明文件? 声明文件就是给js代码补充类型

defineComponent函数，只是对setup函数进行封装，返回options的对象  export function defineComponent(options: unknown) { return isFunction(options) ? { setup: options } : options } defineComponent最重要的是：在TS下，给予了组件 正确的参数类型推断      搜索    

第一步： 　　新建2个文件夹，分别在下面安装vue2vue3;  这里注意的是，不要 -g 全局安装； vue2 安装：npm install vue-cli@2.9.6 vue3 安装：npm install @vue/cli   第二步：  　　在各自的文件下会生成node_modules依赖包文件夹；然后在node_modules/.bin/  文件夹下，点击右键      

在使用单文件组件<script setup>创建一个子组件时，可能遇到父组件需要调用子组件的方法，或者访问子组件的变量，在使用vue2或仅<script>标签中只需要子组件上写一个ref='xxx'变量，父组件通过this.$refs['xxx']就可以直接访问子组件的方法或变量。实现如下： 如子组件有一个方法clear()，vue

项目中有个比较麻烦的需求： 一个表格： 能手动向表格第一行增加一行 每一行的每一列在点击某一格时要能输入 每个表单控件需要有校验功能 支持多选 可以删除所选行 保存后需要前端做一个仅前端部分的查询 原型如下： 上面这些要求看起来就很麻烦。但是更麻烦的是，这个原

最近需要在不使用UI框架的情况下封装一个简单的表格，由于对antd-vue比较熟悉，所以仿照了antd-vue的样子写了个简化版的Table组件。 使用技术：VUE3、SCSS 用过antd-vue的都应该知道table组件主要的传参是两个：columns和dataSource，分别对应表头信息和表格的数据信息。 1.表头数据columns