![](https://img-blog.csdnimg.cn/22b3e627bc2d45979e13914dd9876a75.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
vue学习进程
小沐°
想做好前端的卑微小程序猿
展开
-
vue-根据不同的环境配置基地址
本地测试时会把设置为时会把设置为production。原创 2024-05-09 16:53:16 · 402 阅读 · 0 评论 -
vue3-在内置事件中除自带参数外额外传递自定义参数
第二种写法中传递的自带参数必须写成$event,否则报错。原创 2024-02-08 18:03:11 · 432 阅读 · 0 评论 -
vue3-elementPlus部分组件样式修改
前提:在语言下使用/deep/;在sass语言下使用 ::v-deep 替换 /deep/但::v-deep的写法已经废弃,建议使用:deep(css选择器)原创 2024-01-24 11:02:37 · 1936 阅读 · 0 评论 -
vue-打包
说明:vue脚手架只是开发过程中,协助开发的工具,当真正开发完了=>脚手架不参与上线打包的作用:1)将多个文件压缩合并成一个文件2)语法降级3)less sass ts语法解析打包后,可以生成,浏览器能够直接运行的网页=>就是需要上线的源码。原创 2024-01-04 17:45:38 · 621 阅读 · 0 评论 -
vue-mixins混入处理
mixins(混入):一种分发 Vue 组件中可复用功能的非常灵活的方式,mixins 是一个 js 对象,它可以包含我们组件script中的任意功能选项,如:data、components、methods、created、computed 等等。我们只要将公用的功能以对象的方式传入 mixins 选项中,当组件使用 mixins 对象,所有 mixins 对象的选项都将被扩展到该组件本身的选项中来,这样就可以提高代码的重用性,并易于后期的代码维护。原创 2024-01-04 16:07:55 · 554 阅读 · 0 评论 -
vue-vuex持久化处理
在src/utils文件夹下,创建storage.js文件。然后在store中的js文件中调用即可。原创 2024-01-02 14:44:36 · 547 阅读 · 0 评论 -
vue-vant组件库
组件库:第三方封装好了很多很多的组件,整合到一起就是一个组件库。vant支持vue2,也支持vue3;vant2支持vue2,vant3、vant4支持vue3。原创 2023-12-28 18:00:29 · 925 阅读 · 0 评论 -
vue3-封装日期格式化函数
在src/utils文件夹下创建format.js。在.vue文件中使用时,先导入再使用。原创 2023-12-27 11:50:42 · 462 阅读 · 0 评论 -
vue3-v-model原理
v-model为:modelValue和@update:modelValue的简写v-model等价于v-model:modelValue,其中modelValue可以被换成其他的变量名,同样内部的子组件的相关变量名也要跟随更改。原创 2023-12-26 17:45:24 · 1102 阅读 · 0 评论 -
vue2-使用axios获取外网ip
报错:一直info There appears to be trouble with your network connection. Retrying...1.安装axios=>npm i axios 或者yarn add axios 或者pnpm i axios */2.引入axios:import axios from 'axios'3.使用axios调用接口http://api.ipify.org或。原创 2023-12-12 12:42:06 · 552 阅读 · 0 评论 -
vue2-elementUI部分组件样式修改
前提:在less语言下使用/deep/;在sass语言下使用 ::v-deep 替换 /deep/但::v-deep的写法已经废弃,建议使用:deep(css选择器)原创 2023-12-11 17:32:39 · 1887 阅读 · 0 评论 -
vue2-安装elementUI时警告
原因:core-js的版本低了。原创 2023-12-11 11:50:31 · 1059 阅读 · 0 评论 -
vue2-使用vue-i18n搭建多语言切换环境
注意:用这种方法在data(){}中获取的变量存在更新this.$i18n.locale的值时无法自动切换的问题,需要刷新页面才能切换语言。与langs文件夹同级,创建index.js:用于配置i18n,并导出i18n。}中,不要写在data(){return{…在新文件夹i18n中新建langs文件夹,里边放语言文本文件.js。注意:vue2.0要用8版本的,使用9版本的会报错。zh.js:存放所有的中文显示内容。en.js:存放所有的英文显示内容。在src目录下,新建i18n文件夹。原创 2023-12-07 11:02:58 · 1347 阅读 · 0 评论 -
vue2-省市县三级联动选择框
【代码】vue2-省市县三级联动选择框。原创 2023-12-05 17:49:31 · 699 阅读 · 0 评论 -
vue-设置元素高度与屏幕高度相等
【代码】vue-设置元素高度与屏幕高度相等。原创 2023-12-05 17:39:12 · 571 阅读 · 0 评论 -
vue-去除页面自带的margin空白
在项目列表中找到index.html文件(vue2项目的在public文件夹中),添加如下代码。原创 2023-12-05 17:18:58 · 737 阅读 · 0 评论 -
Vue3-数据交互请求工具设计
在src/utils文件夹下新建request.js,封装axios模块。2.利用axios.create创建一个自定义的axios来使用。请求成功会自动执行后面的语句,请求失败会提示错误信息。在src/api文件夹下创建js文件。根据实际api的需求来填充配置。文件里可以封装多个接口。原创 2023-11-30 10:26:09 · 702 阅读 · 0 评论 -
Vue-Pinia仓库统一管理
在src/stores文件夹下创建index.js文件,将main.js中关于pinia的语句放到index.js中。在src/stores文件夹下新建一个文件夹modules,把仓库相关的JS文件放到其中。在src/stores文件夹下的index.js中编写。App.vue文件里的导入仓库语句。在mian.js文件中写入。原创 2023-11-29 10:50:53 · 525 阅读 · 0 评论 -
Vue3-ElementPlus
(1)rule 当前校验规则相关的信息(2)value 所校验的表单元素目前的表单值(3)callback 无论成功还是失败,都需要 callback 回调--callback()校验成功--callback(new Error(错误信息)) 校验失败默认是实时触发,要修改成失焦触发if (value!callback(new Error('两次输入的密码不一致'))} else {callback() //校验成功,也需要callback},原创 2023-11-28 16:58:15 · 1648 阅读 · 0 评论 -
Vue3-路由
向前兼容vue2语法,比如在模板中使用$router.push('路径')也可以跳转,但是在js中使用this.$router.push('路径')不可以跳转,因为vue3中获取不到this。在vite.config.js文件中配置base设置import.meta.env.BASE_URL。import.meta.env.BASE_URL:vite中的环境变量。首先需要提前设计好整个项目的架子,搭建好一级路由、二级路由等的架子。在src/router/index.js中配置路径。原创 2023-11-28 16:10:05 · 1546 阅读 · 0 评论 -
Vue3-目录调整以及引入scss文件全局生效
在src文件夹下创建两个新文件夹,一个叫api(请求模块的封装),一个叫utils(工具函数相关的封装)默认生成的目录结构不满足我们的开发需求,所以这里需要做一些自定义改动。4.拷贝全局样式和图片到assets文件夹里,然后安装预处理器支持。安装sass预处理器(没有安装的话,scss文件无法生效)验证生效:在main.js中导入,尽量往下放,保证优先级。3.新增调整我们需要的目录结构。1.删除一些初始化的默认文件。2.修改剩余代码内容。原创 2023-11-28 15:22:55 · 870 阅读 · 0 评论 -
Vue3-基于husky的代码检查工作流
husky是一个git hooks工具(git的钩子工具,可以在特定时机执行特定的命令)代码检查背景:想要使代码上传到git仓库前进行代码检查,所以提前下载好git打开项目终端,点击右上角选择进入Git Bash控制husky是一个git hooks工具(git的钩子工具,可以在特定时机执行特定的命令)如果项目中有代码不符合规范,在提交到仓库时就会有报错提示问题:pnpm lint是全量检查,耗时问题(文件量大时),历史问题(前期代码并没有使用规范)暂存区eslint校验(解决上面问题,企业级原创 2023-11-28 14:19:24 · 611 阅读 · 0 评论 -
Vue3-Eslint配合prettier完成代码风格配置
prettier风格配置官网:https://prettier.ioEslint:代码纠错,关注于规范prettier:专注于代码格式化的插件,让代码更加美观两者各有所长,配合使用优化代码生效前提:1)禁用格式化插件prettiervue组件名称多单词组成(忽略index.vue)vue组件名称要求必须由多单词组成,但是有时候需要设置index'no-undef': 'error' //添加未定义变量错误提示,create-vue@3.6.3关闭,这里加上是为了支持下一个章节演示。原创 2023-11-28 12:01:14 · 820 阅读 · 0 评论 -
Vue3-pnpm包管理器创建项目
创建项目时,不要往磁盘根目录去创建项目,最好是创建一个新文件夹,往新文件夹中创建项目,不然容易爆权限不够的错误。在新文件下点击左上角的文件,点击以管理员身份打开Windows PowerShell。npm升级到yarn再升级到pnpm(速度更快)安装方式:npm install -g pnpm。启动项目(vscode代码终端中先装包,再启动)一些优势:比同类工具快2倍左右、节省磁盘空间。创建项目:pnpm create vue。原创 2023-11-27 17:59:31 · 1145 阅读 · 0 评论 -
Vue-Pinia
JS文件中编写语句定义数据,export导出仓库,仓库里的变量要return出去才能去使用仓库变量名=use+仓库名+Store//定义store//defineStore(仓库的唯一标识,()=>{...})//声明数据state//声明操作数据的方法 action(普通函数)//声明基于数据派生的计算属性 getters(computed)return {count})使用数据(在App.vue和子组件中都是如此)原创 2023-11-24 17:59:15 · 546 阅读 · 0 评论 -
Vue3-新特性defineOptions和defineModel
为了解决这一问题,引入了defineProps与defineEmits这两个宏,但这只解决了props与emits这两个属性。如果要定义其他的平级属性,还是得回到最原始的用法--就再添加一个普通的标签。在Vue3中,自定义组件上使用v-model,相当于传递一个modelValue属性,同时触发update:modelValue事件。问题:用了后,就无法添加与其平级的属性了,比如定义组件的name或其他自定义的属性。我们需要先定义props,再定义emits。原创 2023-11-24 15:00:38 · 3080 阅读 · 0 评论 -
Vue3-provide和inject
但是底层组件不能修改顶层组件传递过来的数据,所以我们可以在顶层组件中跨层传递函数,给子孙后代传递可以修改数据的方法。既可以传递普通数据,也可以使用ref传递响应式数据(顶层组件修改数据后可以响应过去)作用和场景:顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信。这样就可以把父组件里的count改为1000了。1.顶层组件通过provide函数提供数据。2.底层组件通过inject函数获取数据。原创 2023-11-23 18:00:26 · 927 阅读 · 0 评论 -
Vue3-模板引用(获取组件)和defineExpose()
这样在父组件里通过ref拿到这个子组件的value时,也可以访问到里面被暴露出去的变量和方法。通过ref对象.value即可访问到绑定的元素(必须渲染完成后,才能拿到)给父组件访问的,所以可以通过defineExpose编译宏。概念:通过ref标识获取真实的dom对象或者组件实例对象。指定哪些属性和方法允许访问,显式暴露组件内部的属性和方法。默认情况下在语法糖下。组件内部的属性和方法是不开放。原创 2023-11-13 00:11:11 · 202 阅读 · 0 评论 -
Vue3-组合式API下的父传子defineProps和子传父defineEmits
由于script上写了setup,所以无法直接配置props选项,所以需要借助于“编译器宏”函数接收传递的数据。defineProps原理:就是编译阶段的一个标识,实际编译器解析时,遇到后会进行编译转换。js中访问传递的数据:props.变量名。1.父组件中给子组件标签通过@绑定事件。2.子组件内部通过emit方法触发事件。2.子组件内部通过props选项接收。1.父组件中给子组件绑定组件。模板中:{{变量名}}原创 2023-11-11 18:04:47 · 543 阅读 · 0 评论 -
Vue3-组合式API生命周期函数
如果有些代码需要在mounted生命周期中执行,并且写成函数的调用方式可以调用多次,并不会冲突,而是按照顺序依次执行。一进入页面的请求一律放在setup中执行。原创 2023-11-11 14:32:57 · 170 阅读 · 0 评论 -
Vue3-组合式API基本函数
本质:是在原有传入数据的基础上,外层包了一层对象,包成了复杂数据类型,底层包成复杂数据类型之后,再借助reactive实现的响应式。vue当中默认的数据并不是响应式的,可以使用reactive或ref函数处理为响应式数据。计算属性基本思想和Vue2的完全一致,组合式API下的计算属性只是修改了写法。2.在模板(template)中,不需要加.value,直接使用变量名即可。2.执行watch函数传入要侦听的响应式数据(ref对象)和回调函数。作用:侦听一个或者多个数据的变化,数据变化时执行回调函数。原创 2023-10-25 12:51:50 · 125 阅读 · 0 评论 -
vue-浏览器安装Vue开发者工具
然后点击chrome浏览器的右上角三个点的按钮在里面找到扩展程序这个选项,然后点进去管理扩展程序,进入后开启右上角的开发者模式。极简插件:下载->开发者模式->拖曳安装->插件详情允许访问文件。网址:https://chrome.zzzmh.cn/index。将刚刚解压的CRX文件拖拽到扩展程序里。点击详情,开启允许访问文件网址。搜索Vue Devtools。可以把vue拖拽到前面。下载下来的安装包先解压。原创 2023-11-01 16:03:33 · 331 阅读 · 0 评论 -
vue-访问本地json文件
注意:此方法只可以在本地访问,如果打包上线后,将不能使用文件数据将json文件放在public文件夹中(json文件要以英文命名)用fetch可以直接访问public下的文件。原创 2023-10-29 21:31:49 · 1867 阅读 · 0 评论 -
Vue3-使用create-vue创建项目
create-vue是Vue官方新的脚手架工具,底层切换到了vite(下一代构建工具),为开发提供极速响应。将创建实例进行了封装,保证每个实例的独立封闭性。这一指令将会安装并执行create-vue。已安装16.0或更高版本的Node.js。createRouter()创建一个路由。createStore()创建一个仓库。createApp()创建一个实例。将Vetur禁用,是vue2使用的。安装volar,vue3使用。2.创建一个Vue应用。原创 2023-10-24 21:52:29 · 478 阅读 · 0 评论 -
Vue-3.5vuex分模块
尽管已经分模块了,但其实子模块的状态,还是会挂到根级别的state中,属性名就是模块名。子模块的映射mapGetters('模块名',['xxx'])-需要开启命名空间。子模块的映射mapState('模块名',['xxx'])-需要开启命名空间。1)直接通过模块名访问$store.getters['模块名/xxx']1)直接通过模块名访问$store.state.模块名.xxx。默认根级别的映射mapGetters(['xxx'])默认根级别的映射mapState(['xxx'])原创 2023-10-16 20:55:59 · 633 阅读 · 0 评论 -
Vue-3.4Vuex
vuex是一个vue的状态管理工具,状态就是数据。Vuex是一个插件,可以帮我们管理vue通用的数据(多组件共享的数据)例如:购物车数据、个人信息数据。原创 2023-10-15 22:10:21 · 518 阅读 · 0 评论 -
Vue-3.3ESLint
JavaScript Standard Style规范说明https://standardjs.com/rules-zhcn.html。如果不认识命令行中的语法报错是什么意思,根据错误代码去[ESLint规则表]中查找其具体含义。基于vscode插件ESLint高亮错误,并通过配置自动帮助我们修复错误。如果你的代码不符合standard的要求,ESlint会跳出来提醒。比如:在mian.js中随意做一些改动,添加一些分号,空行。代码规范:一套写代码的约定规则。根据错误提示来一项一项手动修正。原创 2023-10-15 21:24:06 · 406 阅读 · 1 评论 -
Vue-3.2自定义创建项目
其实就是mode模式,之后再去修改就可以,history和hash。无分号规范(标准化),目前最流行的。基于VueCli自定义创建项目架子。是否为未来创建的项目保存该设置。将配置文件放在单独的文件中。空格选中,再空格取消。原创 2023-10-15 20:51:08 · 315 阅读 · 0 评论 -
Vue-3.1缓存组件keep-alive
问题:从首页卡片点到详情页,又点返回,数据重新加载了->希望回到原来的位置原因:路由跳转后,组件被销毁了,返回回来组件又被重建了,所以数据重新被加载了解决:利用keep-alive将组件缓存下来。原创 2023-10-15 20:12:26 · 650 阅读 · 1 评论 -
Vue-3.0路由
生活中的路由:设备和ip的映射关系路由就是一种映射关系Vue中路由:路径和组件的映射关系,根据路由就能知道不同路径的,应该匹配渲染哪个组件VueRouter的介绍作用:修改地址栏路径时,切换显示匹配的组件说明:Vue官方的一个路由插件,是一个第三方包官网:https://v3.router.vuejs.org/zh/VueRouter的使用(5+2)5个基础步骤(固定)1)下载:下载VueRouter模块到当前工程,版本3.6.5在终端中输入2)引入3)安装注册4)创建路由对象。原创 2023-10-14 14:41:44 · 915 阅读 · 0 评论