weixin_46479909的博客

【代码】vue-弹窗。

【代码】vue-scss、less安装总结。

本地测试时会把设置为时会把设置为production。

第二种写法中传递的自带参数必须写成$event，否则报错。

前提：在语言下使用/deep/；在sass语言下使用 ::v-deep 替换 /deep/但::v-deep的写法已经废弃，建议使用:deep(css选择器)

说明：vue脚手架只是开发过程中，协助开发的工具，当真正开发完了=>脚手架不参与上线打包的作用：1）将多个文件压缩合并成一个文件2）语法降级3）less sass ts语法解析打包后，可以生成，浏览器能够直接运行的网页=>就是需要上线的源码。

mixins（混入）：一种分发 Vue 组件中可复用功能的非常灵活的方式，mixins 是一个 js 对象，它可以包含我们组件script中的任意功能选项，如：data、components、methods、created、computed 等等。我们只要将公用的功能以对象的方式传入 mixins 选项中，当组件使用 mixins 对象，所有 mixins 对象的选项都将被扩展到该组件本身的选项中来，这样就可以提高代码的重用性，并易于后期的代码维护。

在src/utils文件夹下，创建storage.js文件。然后在store中的js文件中调用即可。

组件库：第三方封装好了很多很多的组件，整合到一起就是一个组件库。vant支持vue2，也支持vue3；vant2支持vue2，vant3、vant4支持vue3。

在src/utils文件夹下创建format.js。在.vue文件中使用时，先导入再使用。

v-model为:modelValue和@update:modelValue的简写v-model等价于v-model:modelValue，其中modelValue可以被换成其他的变量名，同样内部的子组件的相关变量名也要跟随更改。

报错：一直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或。

前提：在less语言下使用/deep/；在sass语言下使用 ::v-deep 替换 /deep/但::v-deep的写法已经废弃，建议使用:deep(css选择器)

原因：core-js的版本低了。

注意：用这种方法在data(){}中获取的变量存在更新this.$i18n.locale的值时无法自动切换的问题，需要刷新页面才能切换语言。与langs文件夹同级，创建index.js：用于配置i18n，并导出i18n。}中，不要写在data(){return{…在新文件夹i18n中新建langs文件夹，里边放语言文本文件.js。注意：vue2.0要用8版本的，使用9版本的会报错。zh.js：存放所有的中文显示内容。en.js：存放所有的英文显示内容。在src目录下，新建i18n文件夹。

【代码】vue2-省市县三级联动选择框。

【代码】vue-设置元素高度与屏幕高度相等。

在项目列表中找到index.html文件（vue2项目的在public文件夹中），添加如下代码。

在src/utils文件夹下新建request.js，封装axios模块。2.利用axios.create创建一个自定义的axios来使用。请求成功会自动执行后面的语句，请求失败会提示错误信息。在src/api文件夹下创建js文件。根据实际api的需求来填充配置。文件里可以封装多个接口。

在src/stores文件夹下创建index.js文件，将main.js中关于pinia的语句放到index.js中。在src/stores文件夹下新建一个文件夹modules，把仓库相关的JS文件放到其中。在src/stores文件夹下的index.js中编写。App.vue文件里的导入仓库语句。在mian.js文件中写入。

(1)rule 当前校验规则相关的信息(2)value 所校验的表单元素目前的表单值(3)callback 无论成功还是失败，都需要 callback 回调--callback()校验成功--callback(new Error(错误信息)) 校验失败默认是实时触发，要修改成失焦触发if (value!callback(new Error('两次输入的密码不一致'))} else {callback() //校验成功，也需要callback},

向前兼容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中配置路径。

在src文件夹下创建两个新文件夹，一个叫api（请求模块的封装），一个叫utils（工具函数相关的封装）默认生成的目录结构不满足我们的开发需求，所以这里需要做一些自定义改动。4.拷贝全局样式和图片到assets文件夹里，然后安装预处理器支持。安装sass预处理器（没有安装的话，scss文件无法生效）验证生效：在main.js中导入，尽量往下放，保证优先级。3.新增调整我们需要的目录结构。1.删除一些初始化的默认文件。2.修改剩余代码内容。

husky是一个git hooks工具（git的钩子工具，可以在特定时机执行特定的命令）代码检查背景：想要使代码上传到git仓库前进行代码检查，所以提前下载好git打开项目终端，点击右上角选择进入Git Bash控制husky是一个git hooks工具（git的钩子工具，可以在特定时机执行特定的命令）如果项目中有代码不符合规范，在提交到仓库时就会有报错提示问题：pnpm lint是全量检查，耗时问题（文件量大时），历史问题（前期代码并没有使用规范）暂存区eslint校验（解决上面问题，企业级

prettier风格配置官网：https://prettier.ioEslint：代码纠错，关注于规范prettier：专注于代码格式化的插件，让代码更加美观两者各有所长，配合使用优化代码生效前提：1）禁用格式化插件prettiervue组件名称多单词组成（忽略index.vue）vue组件名称要求必须由多单词组成，但是有时候需要设置index'no-undef': 'error' //添加未定义变量错误提示，create-vue@3.6.3关闭，这里加上是为了支持下一个章节演示。

创建项目时，不要往磁盘根目录去创建项目，最好是创建一个新文件夹，往新文件夹中创建项目，不然容易爆权限不够的错误。在新文件下点击左上角的文件，点击以管理员身份打开Windows PowerShell。npm升级到yarn再升级到pnpm（速度更快）安装方式：npm install -g pnpm。启动项目(vscode代码终端中先装包，再启动)一些优势：比同类工具快2倍左右、节省磁盘空间。创建项目：pnpm create vue。

JS文件中编写语句定义数据，export导出仓库，仓库里的变量要return出去才能去使用仓库变量名=use+仓库名+Store//定义store//defineStore(仓库的唯一标识,()=>{...})//声明数据state//声明操作数据的方法 action(普通函数)//声明基于数据派生的计算属性 getters(computed)return {count})使用数据（在App.vue和子组件中都是如此）

为了解决这一问题，引入了defineProps与defineEmits这两个宏，但这只解决了props与emits这两个属性。如果要定义其他的平级属性，还是得回到最原始的用法--就再添加一个普通的标签。在Vue3中，自定义组件上使用v-model，相当于传递一个modelValue属性，同时触发update:modelValue事件。问题：用了后，就无法添加与其平级的属性了，比如定义组件的name或其他自定义的属性。我们需要先定义props，再定义emits。

但是底层组件不能修改顶层组件传递过来的数据，所以我们可以在顶层组件中跨层传递函数，给子孙后代传递可以修改数据的方法。既可以传递普通数据，也可以使用ref传递响应式数据（顶层组件修改数据后可以响应过去）作用和场景：顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信。这样就可以把父组件里的count改为1000了。1.顶层组件通过provide函数提供数据。2.底层组件通过inject函数获取数据。

这样在父组件里通过ref拿到这个子组件的value时，也可以访问到里面被暴露出去的变量和方法。通过ref对象.value即可访问到绑定的元素（必须渲染完成后，才能拿到）给父组件访问的，所以可以通过defineExpose编译宏。概念：通过ref标识获取真实的dom对象或者组件实例对象。指定哪些属性和方法允许访问，显式暴露组件内部的属性和方法。默认情况下在语法糖下。组件内部的属性和方法是不开放。

由于script上写了setup，所以无法直接配置props选项，所以需要借助于“编译器宏”函数接收传递的数据。defineProps原理：就是编译阶段的一个标识，实际编译器解析时，遇到后会进行编译转换。js中访问传递的数据：props.变量名。1.父组件中给子组件标签通过@绑定事件。2.子组件内部通过emit方法触发事件。2.子组件内部通过props选项接收。1.父组件中给子组件绑定组件。模板中：{{变量名}}

如果有些代码需要在mounted生命周期中执行，并且写成函数的调用方式可以调用多次，并不会冲突，而是按照顺序依次执行。一进入页面的请求一律放在setup中执行。

本质：是在原有传入数据的基础上，外层包了一层对象，包成了复杂数据类型，底层包成复杂数据类型之后，再借助reactive实现的响应式。vue当中默认的数据并不是响应式的，可以使用reactive或ref函数处理为响应式数据。计算属性基本思想和Vue2的完全一致，组合式API下的计算属性只是修改了写法。2.在模板（template）中，不需要加.value，直接使用变量名即可。2.执行watch函数传入要侦听的响应式数据（ref对象）和回调函数。作用：侦听一个或者多个数据的变化，数据变化时执行回调函数。

然后点击chrome浏览器的右上角三个点的按钮在里面找到扩展程序这个选项，然后点进去管理扩展程序，进入后开启右上角的开发者模式。极简插件：下载->开发者模式->拖曳安装->插件详情允许访问文件。网址：https://chrome.zzzmh.cn/index。将刚刚解压的CRX文件拖拽到扩展程序里。点击详情，开启允许访问文件网址。搜索Vue Devtools。可以把vue拖拽到前面。下载下来的安装包先解压。

注意：此方法只可以在本地访问，如果打包上线后，将不能使用文件数据将json文件放在public文件夹中（json文件要以英文命名）用fetch可以直接访问public下的文件。

create-vue是Vue官方新的脚手架工具，底层切换到了vite（下一代构建工具），为开发提供极速响应。将创建实例进行了封装，保证每个实例的独立封闭性。这一指令将会安装并执行create-vue。已安装16.0或更高版本的Node.js。createRouter()创建一个路由。createStore()创建一个仓库。createApp()创建一个实例。将Vetur禁用，是vue2使用的。安装volar，vue3使用。2.创建一个Vue应用。

尽管已经分模块了，但其实子模块的状态，还是会挂到根级别的state中，属性名就是模块名。子模块的映射mapGetters('模块名',['xxx'])-需要开启命名空间。子模块的映射mapState('模块名',['xxx'])-需要开启命名空间。1）直接通过模块名访问$store.getters['模块名/xxx']1）直接通过模块名访问$store.state.模块名.xxx。默认根级别的映射mapGetters(['xxx'])默认根级别的映射mapState(['xxx'])

vuex是一个vue的状态管理工具，状态就是数据。Vuex是一个插件，可以帮我们管理vue通用的数据（多组件共享的数据）例如：购物车数据、个人信息数据。

JavaScript Standard Style规范说明https://standardjs.com/rules-zhcn.html。如果不认识命令行中的语法报错是什么意思，根据错误代码去[ESLint规则表]中查找其具体含义。基于vscode插件ESLint高亮错误，并通过配置自动帮助我们修复错误。如果你的代码不符合standard的要求，ESlint会跳出来提醒。比如：在mian.js中随意做一些改动，添加一些分号，空行。代码规范：一套写代码的约定规则。根据错误提示来一项一项手动修正。

其实就是mode模式，之后再去修改就可以，history和hash。无分号规范（标准化），目前最流行的。基于VueCli自定义创建项目架子。是否为未来创建的项目保存该设置。将配置文件放在单独的文件中。空格选中，再空格取消。