一、环境变量配置 官网https://cn.vitejs.dev/guide/env-and-mode.html#intellisense 1. 新建.env开头的文件在根目录 为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码 .env 所有环境默认加载 .env.development 开发模式默认加载 .env.productio
一、Svg配置 每次引入一张 SVG 图片都需要写一次相对路径，并且对 SVG 图片进行压缩优化也不够方便。 vite-svg-loader插件加载SVG文件作为Vue组件，使用SVGO进行优化。 插件网站https://www.npmjs.com/package/vite-svg-loader 1. 安装 pnpm i vite-svg-loader -D 2. vite.config
获取文件后缀 /** * @description：获取附件后缀 * @param {*} file 文件名称 * @param {*} isDot 是否显示点 0: 显示 1: 不显示 */ export const getFileType: (file?: string, isDot?: 0 | 1) => string = (file, isDot = 0) => {
组件功能介绍 上传格式限制 上传大小限制 上传文件数量限制 自定义上传区 上传成功回调 禁用上传开关与点击上传自定义事件 暴露所以上传文件列表（uploadList）与当前文件数据（uploadLatestFile） 组件代码Upload.vue <template> <div> <div> <el-upload
❗️❗️❗️❗️ 写在最前: 本文是根据B站作者 月光分层 视频vue+ts 工程化配置以及作者笔记稍作整理 ??作者B站地址https://space.bilibili.com/14110850 ??视频教程地址vue+ts 工程化配置 接上一篇：从零构建vue3+ts+prettier+stylelint+husky+Lint-staged+Commitlint项目 开始配置之前：清空项目
❗️❗️❗️❗️ 写在最前: 本文是根据B站作者 月光分层 视频vue+ts 工程化配置以及作者笔记稍作整理 ??作者B站地址://../14110850 ??视频教程地址vue+ts 工程化配置 构建 vue3+ts+prettier+stylelint+husky+Lint-staged+Commitlint 项目 vue3 基础插件 一、 安
✨1. 实现功能 ?表单内显示省市县以及详细地址 点击省市县输入框时，打开对应地图弹窗，进行位置选择 选择位置回显入对应输入框 表单内的省市县以及地址输入框同外嵌表单走相同的校验方式 触发校验后点击reset实现清除校验与清空数据 ?地图内展示地址搜索框以及地图坐标图 搜索框展示当前经纬度地址 搜索框可输入自定义地址，下拉菜单展示范围兴趣点和道路信息，点击可进行搜索 ? 单独封装每个
一、Git配置文件 1、Husky Husky 是一款管理 git hooks 的工具，可以帮助我们触发git提交的各个阶段：pre-commit、commit-msg、pre-push， 有助于我们在项目开发中的git规范和团队协作。 .husky文件通常包含以下内容： pre-commit：在提交代码前运行的脚本，可以用于代码格式化、代码检查等操作； pre-push：在推送代码前运行的脚本
一、命名规范 市面上常用的命名规范： camelCase（小驼峰式命名法 —— 首字母小写） PascalCase（大驼峰式命名法 —— 首字母大写） kebab-case（短横线连接式） Snake（下划线连接式） 1.1 项目文件命名 1.1.1 项目命名 全部采用小写方式， 以短横线分隔。 正例：mall-management-system 反例：mall_management-sys
Proxy响应式原理 1.Vue2的响应式 实现原理： 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持） 数组类型：通过重写更新数组的一系列方法来实现拦截，（对数组的变更方法进行了包裹） Object.defineProperty(data, 'count', { get(){}, set(){} }) 存在问题： 新增属性、删
Vue3新组件 【Teleport】 什么是Tepeport: -- Teleport是一种能够将我们的组件html结构移到到指定位置的技术 比如弹窗，我们在父组件中引入了弹窗，但是由于父的容器加了特殊的css，导致我们弹窗的position:fixed受到了影响，不会以浏览器窗口为基准了，这就不会满足我们的需求，此时就需要用到Teleport <template> &l
其它 API 【shallowRef 与 shallowReactive】 shallowRef 作用：创建一个响应式数据，但只对顶层属性进行响应式处理。 用法： let myVar = shallowRef(initValue) 特点：只跟踪引用值的变化，不关心值内部的变化 shallowReactive 作用：创建一个浅层响应式对象，只会使对象的最顶层属性变成响应式的，
【slot】 插槽：简单说就是父组件内部使用了子组件，但是子组件内部某些结构需要使用者自行定义，此时就需要用到插槽实现 默认插槽 默认插槽的name是default 父组件 <template> <div> <Child> <h3>默认插槽</h3> </Child
组件通信 Vue3组件通信和Vue2的区别： 移出事件总线，使用mitt代替。 vuex换成了pinia。 把.sync优化到了v-model里面了。 把$listeners所有的东西，合并到$attrs中了。 $children被砍掉了。 常见搭配形式： props 概述：props是使用频率最高的一种通信方式，常用与 ：父 ↔ 子。 若 父传子：属性值是非函数。 若 子传父：
pinia案例gitee地址 1. pinia 准备一个效果 【搭建 pinia 环境】 安装pinia: npm install pinia/yarn add pinia 第二步：操作src/main.ts import { createApp } from 'vue' import App from './App.vue' /* 引入createPinia，用于创建pinia
1. 路由 【对路由的理解】 【基本切换效果】 Vue3中要使用vue-router的最新版本，目前是4版本 路由配置文件代码如下： // 创建一个路由器，并暴露出去 // 第一步：引入createRouter import { createRouter, createWebHistory } from 'vue-router' // 引入一个一个可能要呈现组件 import H
1. 生命周期 概念： Vue组件实例在创建时要经历一些列的初始化步骤，在此过程中vue会在合适的时机，调用特定函数，从而让开发中有机会在特定阶段运行自己的代码，这些特定的函数统称为：生命周期钩子 规律： 生命周期整体分为四个阶段：分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后 Vue2的生命周期 创建阶段：beforeCreate、created 挂载阶段：befo
1. 标签的ref属性 作用：用于注册模板引用 用在普通DOM标签上，获取的使DOM节点 用在组件标签上，获取的是组件实例对象 用在子组件上，父组件想要访问子组件内的数据，需要使用defineExpose暴露 用在普通DOM标签上： <template> <div> <h2>哈哈</h2> <h2 ref=&
1. computed计算属性 作用：根据已有数据计算出新数据（和Vue2中的computed作用一致）。 2. watch监视与watchEffect 1. watch 作用：监视数据的变化（和Vue2的watch作用一致） 特点：Vue3中的watch只能监视以下4种数据： ref定义的数据 reactive定义的数据 函数返回一个值（getter函数） 一个包含上述内容的数组
1. ref和reactive ref创建：基本类型的响应式数据 作用：定义响应式变量 语法：let xxx = ref(初始值) 返回值：一个RefImpl的实例对象，简称ref对象或ref,ref对象的value属性是响应式的 注意点： JS中操作数据需要xxx.value,但模板中不需要.value,直接使用即可 对于let name = ref('张三')来说，name不是响应式的
1. OptionsAPI与CompositionAPI Vue2的API设计是Options(配置)风格的 Vue3的API设计是Composition(组合)风格的 Options API的弊端： Options类型的API，数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求,就需要分别修改：data、mothods、compute
1. Vue3简介 性能的提升 打包大小减少41% 初次渲染快55%，更新渲染快133% 内存减少54% 源码的升级 使用Proxy代替defineProperty实现响应式 重写虚拟DOM的实现和Tree-Shaking 拥抱TypeScript Vue3可以更好的支持TypeScript 新的特性 Composition Api(组合Api) setup ref和rea
1. 介绍 理解： 一个路由（route）就是一组映射关系（key-value）, 多个路由需要路由器（router）进行管理 前端路由： key是路径,value是组件，通俗的将就是通过一个路径key，可以访问vue的组件，实现组件的访问与跳转以及传参 2. 基本使用 安装vue-router, 命令npm i vue-router 应用插件：Vue.use(vueRouter) 编写ro
1. vuex是什么 概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。这个怎么理解呢？可以暂时理解成全局事件总线、消息订阅与发布一样的道理，把vuex当成是外部的一个储存空间，内部储存着方法和状态。看一下图： 其中呢： state：是一个对象，目的是保存具体的数据 ac
1. nextTick下一次更新结束后执行指定的操作 语法： this.$nextTick(回调函数) 作用：在下一次DOM更新结束后执行其指定的回调 什么时候用： 当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行 举个栗子：例子中有updated生命周期和nextTick同时输出，都是触发组件更新的函数，两者有和异同呢？ 首先我们看App.vue
写在最前：父组件引用子组件，如何能在应用子组件内容的同时，还能在自定义内容呢？ 1. 插槽 作用： 让父组件可以向子组件指定位置插入html结构，也是一种组件通信的方式，适用于父组件===>子组件 分类： 默认插槽，具名插槽，作用域插槽 使用方式： 默认插槽 父组件中： <MyContainer> <div>html结构</div> </
抛出问题:我们多级组件，或者任意不想关的子组件如何传递数据呢？ 1. 全局事件总线（$bus） 一种组件间通信的方式，适用于任意组件间通信 全局事件总线示意图： 安装全局事件总线： new Vue({ .... beforeCreate(){ Vue.prototype.$bus = this // 安装全局事件总线，$bus就相当于vm
1. ref属性 被用来给元素或子组件注册引用信息（id的替代者） 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（VC（VueComponent）） 使用方式： 打标识<h1 ref="xxx">.....</h1>或者<School ref="xxx"></School> 获
1. 文件分析 1. 补充： 什么叫单文件组件？ 一个文件中只有一个组件 vue-cli创建的项目中，.vue的文件都是单文件组件，例如App.vue 2. 进入分析 1. package.json: 项目依赖配置文件： 如图，我们说主要的属性： name: 项目的名称 version: 项目版本 scripts: 脚本入口 serve: 启动项目命令 build: 打包项目命令
1. 安装node 网址：https://nodejs.org/en 下载LTS版本表示长期支持版本 说明： node是一个基于Chrome V8引擎的javascript运行环境,让JavaScript 运行在服务端的开发平台 vuecli创建的项目必须运行在node环境中， npm为node自带包管理工具，用于下载三方依赖包和运行项目打包等操作 npm官网https://www.npmj
Copyright © 2005-2024 51CTO.COM 版权所有 京ICP证060544号
