1.vue3脚手架搭建项目-爱代码爱编程
1.npm设置镜像和安装cnpm C:\Users\Administrator>npm get registry https://registry.npmjs.org/ 输入npm config set registry xxx(镜像源地址)。 C:\Users\Administrator>npm config set registry
74-爱代码爱编程
一. 整体路由设计 1. views新建文件夹 login, layout, article, user 2. 新增路由组件 src\views\article\AtricleChannel.vue src\views\article\AtricleManage.vue src\views\layo
vue学习笔记之自定义指令，插槽_自定义插槽-爱代码爱编程
一：自定义指令： 1.1：代码案例： 1.2：小结： 1.3：案例2： <template> <div class="main"> <div class="box" v-loading="isLoading"> <ul> <li v-f
vue3 子父组件、组件传值、_vue3父组件如何向子组件中传递数据-爱代码爱编程
目录 父组件给子组件传值 子组件给父组件传值 页面index.vue 子组件footer.vue 父组件给子组件传值 index.vue页面 <div class="box"> <!-- 页面使用组件的地方--> <!-- parentData 子组件通过 parent
77-爱代码爱编程
一. 文章分类页面 - [element-plus 表格] 功能需求说明: (1). 基本架子- PageContainer 封装 (2). 文章分类渲染&loading 处理 (3). 文章分类添加编辑[element-plus 弹层] (4). 文章分类删除 1. 定
vue3 vuex的使用_vue3 vuex 使用-爱代码爱编程
引入Vuex 在./stores/vstore文件夹下的index.js中引入createStore，并配置全局的store import { createStore } from "vuex"; 在main.js中引入./stores/vstore import vstore from './stores/vst
-爱代码爱编程
1、正常按照vite的安装教程进行安装，成功运行项目 2、这时候就是一个空项目，需要加入一些其他的补充：vuex\vue-router\axios store.ts配置： import { createStore}
53 -爱代码爱编程
一. 登录页静态布局 1.准备工作 (1). src新建 'styles/common.less'，重置默认样式 // 重置默认样式 *{ margin: 0; padding: 0; box-sizing: border-box; } // 文字溢出省略号 .text-ellipsis-2{ ove
79-爱代码爱编程
一. ChatGPT & Copilot 1. AI的认知 & 两个工具 2. ChatGPT的基本使用(Prompt 优化) 3. Copilot 的基本使用(代码实战，高效编码) 4. 个人中心项目实战 基本资料 更换头像 重置密码 二. AI的认知 & 两个工具
42 -爱代码爱编程
组件缓存 keep-aliv: 问题: 从首页 点到 详情页，又点返回，数据重新加载了 -> 希望回到原来的位置 原因: 路由跳转后，组件被销毁了，返回回来组件又被重建了，所以数据重新被加载了 解决: 利用 keep-alive 将组件缓存下来 1. keep-alive是什么 keep-alive 是 Vue 的内置组件，
vue环境配置（windows）_windows vue-爱代码爱编程
目录 一、node.js安装配置 二、NPM方法安装Vue 一、node.js安装配置 vue的使用需要以node.js为前提，如果您的电脑上已经安装了node.js，可直接跳过这一步。 我们可以在终端（win+r，然后输入cmd打开终端）中输入node -v来查询电脑上是否已经安装node.js以及版本号
moment.js插件统一设置固定时区-爱代码爱编程
项目中遇到使用moment.js插件，在不同的时区获取到的时间是当地时间，但项目中需要要求使用固定的北京时间，从而造成时间展示的问题，由此需要把在任意时区获取时间都需要获取的是北京时间。 1、安装 npm install m
vue 3 关于组件的注册_vue3 注册组件实例-爱代码爱编程
组件的注册有两种方式：全局组件注册、局部组件注册 一个小栗子，全局组件注册： <template> <div class="box"> <div style="padding: 10px;" class="intro">这是个需要在全局注册的组件</div>
vue数据响应式原理_是如何理解 vue 的响应式系统的?-爱代码爱编程
前言 Vue是一个结构的框架,也就是 数据层、视图层、数据-视图层；响应式的原理就是实现当数据更新时，视图层也要相应的更新 响应式实现 基于发布订阅模式和数据劫持实现 1.发布订阅模式：vue使用发布订阅模式来实现数据变动的通知和更新 2.数据劫持：vue通过object.defineProperty对数据进行劫持 Vue2响应式原理 基于j
vue3 ts环境下的proptype_vue3 proptype-爱代码爱编程
简介 在Typscript中，我们可以使用PropType进行类型的推断与验证。在日常的开发中我们常常会遇到下面这样的场景： 我们通过request请求从服务端获取了一条数据，数据是个Array的格式，Array中的每个元素又是一个对象，像下面这样的数据 const intro = [ { title: "标
【vue3】更方便的样式管理方法：全局引入样式_vue3 全局样式-爱代码爱编程
必要性 方便多个组件使用同一个样式，便于管理一次性全局引入，不需要再在每个组件文件里面操心引入的事设计基准样式如_base.scss）和每个页面各自的独特样式（如content.scss），有助于良好的代码风格管理 步骤 确定样式存放的位置： 写作App.scss文件 一般这个文件里面要包括所有要引入的样式文件，且要注意和其他样式文件的目录关
vue入门学习笔记-爱代码爱编程
Vue.js 条件语句 v-if 随机生成一个数字，判断是否大于0.5，然后输出对应信息： 条件判断使用 v-if 指令：在元素 和 template 中使用 v-if 指令： <html> <head> <meta charset="utf-8"> <title>Vue 测试实例</tit
vue强制刷新组件的三种方式：$forceupdate、v-爱代码爱编程
项目中遇到父组件给封装子组件传值，传的值改变后，页面显示没有进行相对的更改，针对解决这个问题进行三种组件刷新方式的使用记录。 1、$ forceupdate() 说明：$ forceupdate()方法是官方提供的方法，
vue3 v-爱代码爱编程
在日常的开发中，我们常常遇到这样的需求：点击一个button改变页面中某个元素的样式，在这样的场景中，我们可以使用v-bind绑定css中的var变量，来动态的切换元素的样式 一个小栗子，在setup语法糖环境下，点击一个button动态切换另一个元素的背景色 <template> <div cla
【vue lottie】lottie在vue项目中的使用心得_lottie vue 图片路径-爱代码爱编程
✨减少依赖体积 ●能用原生实现的动效，就不要切Lottie，提前做好切分 ●使用的时候，不要一股脑的复制粘贴过来，而是应该进行如下步骤的清洗 ○合并同样的图片依赖素材，减小依赖图片的大小 ○一些很大的背景图片（不影响主体内容展示的）可以放在CDN ○将Lottie的json文件格式改为ts格式，以对象的形式导入，从而使其支持相对路径下图片资源的解