VUE3

安装 nvm 略 安装 node 略 使用 Vite创建项目 vite3.x 文档：https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project 使用 NPM: $ npm create vite@latest 使用 Yarn: $ ......

使用.env加后缀的方式来建立某个模式下的环境变量， 例如：项目根目录新建两个环境变量文件（development开发环境和production生产环境）： .env.development .env.production 在新建的两个环境变量文件中设置相同的环境变量名： VUE_APP_BASE_ ......

codepen体验地址 github地址 安装、引入 npm install vue-input-directive --save import Vue from 'vue' import inputValidate from 'vue-input-directive' Vue.use(inputV ......

vue3 环境变量 在Vue3中，可以通过环境变量来管理应用程序中的配置。这些配置可以包括后端API的URL、API key、跟踪ID等等。在不同的开发、测试、生产环境中使用不同的配置是非常有用的。Vue3允许使用.env、.env.local、.env.[mode]和.env.[mode].loc ......

在Vue项目中实现以下功能： 功能1. 在页面中显示代码，并将其中的关键字高亮显示。 功能2. 允许对代码块进行编辑，编辑时代码关键字也高亮显示。 功能3. 可在编辑器中添加多个代码块，动态渲染代码关键字高亮。 Step1: 安装所需插件(本文使用npm安装，若需使用其他方式请查阅官方文档) 安装代 ......

这里fileChange第二个参数，不可也用fileList会污染已经定义的响应式变量fileList <script setup> const fileList = ref([]) const fileChange = (file,fileList) => { fileList.value = f ......

问题原因是路径不对，加上一行代码就可完美解决问题。 在vue.config文件中加上 publicPath:'./' 即可解决问题。 问题如图所示： 如何解决问题呢？ ......

devServer 是一个用于配置开发服务器的选项对象。它可以用来配置服务器的各种选项，例如代理，端口号，HTTPS 等。 以下是一些常用的 devServer 参数和设置： port：指定开发服务器的端口号，默认为 8080。 host：指定开发服务器的主机名，默认为 localhost。 htt ......

在vue2中我们通常会在全局的接口请求里面设置拦截器，如果登录失效或者说其他情况需要跳转到登录页面或者说其他页面的，我们就使用this.$router.push实现vue3中同样使用改方式： import { useRouter } from 'vue-router'; const router = ......

这文章写的很好 Compiler模块：编译模板系统。主要职责是将template编译成虚拟节点。 Runtime模块：也可以称之为Renderer模块，真正负责渲染的模块。主要职责是将虚拟节点渲染成真实元素，然后显示到浏览器上。 Reactivity模块：响应式系统。主要职责是监听响应式的数据，然后 ......

可以将Axios拦截器封装成一个单独的request文件，以便在整个应用程序中重复使用。 以下是一个示例，展示如何将Axios拦截器封装成一个request文件： 1、创建一个名为request.js的新文件，并导入Axios： import axios from 'axios'; 2、创建一个名为 ......

Vue3 入门（ref） let name = ref('jack') 首先我们得明白，ref函数返回的是一个RefImpl对象的实例，所以此时name的值是一个复杂数据类型Object，它里面有个value属性，就是它的值，而其它的属性皆是下划线开头的，我们不关注，因为这类属性一般不是给我们开发用 ......

本篇通过万字长文详细介绍 vue3-element-admin v2 版本从 0 到 1，相较于v1版本增加了对原子CSS(UnoCSS)、按需自动导入、暗黑模式等功能的支持以及重构优化。v2 版本发布也标志着有来开源组织的 SpringBoot3 + Vue3 前后端分离开源项目到达新的里程碑，希... ......

今天学了啥-23/03/28 vue提供slot机制让组件可以接收模板片段，来渲染模板片段。比如最常见的button组件，基本是如下这样使用。 <FancyButton> Click me! <!-- 插槽内容 --> </FancyButton> FancyButton 组件则是这样： <butt ......

在Vue.js 3中，使用Axios与Vue.js 2.x中类似，但是需要进行一些修改和更新，下面是Vue.js 3中Axios的定义和使用方式： 首先，你需要安装Axios和Vue.js 3.x，可以使用npm或yarn等包管理工具安装： npm install axios vue@next 然后 ......

Vue3 日历组件的实现 以下是一个基于 Vue 3 实现的简单日历组件的代码示例。这个日历组件包含了前一个月、当前月、下一个月的日期，并且可以支持选择日期、切换月份等功能。 <template> <div class="calendar"> <div class="header"> <button ......

Vue3 watch 监听对象数组中对象的特定属性 在 Vue 3 中，可以使用 watch 函数来监听对象数组中对象的特定属性。可以通过在回调函数中遍历数组来检查对象的特定属性是否发生变化，并在变化发生时执行相应的操作。 一、监听对象的特定属性 例如，假设有一个名为 items 的对象数组，其中每 ......

需要对一个弹窗组件进行改造，使其能用 JS 调用，并实现关闭弹窗组件时销毁组件 原始弹窗组件 Popup.vue <template> <van-overlay :show="visible" > <div class="overlay-wrapper"> <div class="container ......

在使用 Express 搭建后端服务时，主要关注的几个点是： 路由中间件和控制器 SQL处理 响应返回体数据结构 错误码 Web安全 环境变量/配置 路由和控制器 路由基本上是按模块或功能去划分的。 首先是按模块去划分一级路由，各个模块的子功能相当于是用二级路由处理。 简单举个例子，/article ......

在 Vue 3 中，Element Plus 的 ElButton 组件提供了多种按钮类型和属性，可以用于实现不同的交互效果。下面是 ElButton 常用的作用和属性： 作用： 用于在页面上添加交互按钮，比如提交按钮、取消按钮等。 常用属性： type：按钮类型，可以取值为 primary、suc ......

在 Vue 3 中，Element Plus 也提供了 ElRow 和 ElCol 组件，用于实现栅格布局。 ElRow 组件的常用属性： gutter：栅格间距，默认为 0。 type：布局模式，可选值为 flex、justify 和 align。默认值为 flex。 tag：组件标签，默认为 d ......

在 Element Plus 中，el-form 是一个表单组件，用于创建表单以便用户填写和提交数据。它提供了许多内置的验证规则和验证方法，使表单验证更加容易。 使用 el-form 组件，您可以将表单控件组织在一起，并对表单进行验证，以确保提交的数据符合预期的格式和要求。该组件具有以下特性： 支持 ......

SCSS和SASS都是CSS预处理器，它们的主要目的是简化CSS的编写，增加可维护性，并提供更丰富的功能。下面是它们与普通的CSS的区别： 语法：SCSS和SASS都具有比普通CSS更丰富的语法。其中，SASS使用缩进来表示嵌套，而SCSS则使用类似于CSS的花括号语法。因此，SCSS更易于CSS开 ......

本篇介绍如何将vue3项目打包发布到服务器上，然后在微信公众号上打开。 vue3发布之前需要对项目进行编译，编译时会在项目根目录下创建 dist 文件夹，编译后的文件会存放在这里。 在编译之前，我们在public目录下建一个 config.js 的文件，里面放如下的代码： const config ......

视频 2.readonly 与 shallowReadonly readonly: 让一个响应式数据变为只读的（深只读）。 shallowReadonly：让一个响应式数据变为只读的（浅只读）。 应用场景: 不希望数据被修改时。 #components ##Demo.vue <template> < ......

视频 三、其它 Composition API 1.shallowReactive 与 shallowRef shallowReactive：只处理对象最外层属性的响应式（浅响应式）。 shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。 什么时候使用? 如果有一个对象数据， ......

1.新增依赖 "vue-clipboard2": "^0.3.3" 2.main.js导入和使用依赖 import VueClipBoard from "vue-clipboard2"; createApp(App) .use(VueClipBoard) .mount("#app"); 3.导入sy ......

视频 直接用ref是创建新的对象 10.toRef 作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。 语法：const name = toRef(person,'name') 应用: 要将响应式对象中的某个属性单独提供给外部使用时。 扩展：toRefs 与toRef功能一致， ......

视频 9.自定义hook函数 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。 类似于vue2.x中的mixin。 自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。 #components ##Demo.vue <templ ......

element-ui 升为 element-plus 首先建议参考element-plus官方站点： https://element-plus.org/zh-CN/ 部分组件标签直接变更 如 el-submenu 变更为 el-sub-menu 浏览器提示 ElementPlusError: [El ......