ClearloveYt的博客

点击nginx.exe 在浏览器中输入localhsot 就能访问前端代码 当然前提你nginx配置的就是80 也可以是其他端口 , 要跟生产环境配置文件的 端口一致。生产环境 通过pnpm build 项目中就多了 dist 文件夹 ，将它复制到nginx html下。首先在根下 新建.env.development 和 .env.production。首先是pnpm build 打包后直接在dist访问，是访问不了的，需要开启服务。npm run dev 后前端是无法请求到后端接口的。

使用create-vue搭建create-vue是Vue官方新的脚手架工具，底层切换到了vite（下一代前端工具链，为开发提供极速响应1、使用create-vue创建项目1. 前提环境条件已安装 16.0 或更高版本的 Node.js2. 创建一个Vue应用这一指令将会安装并执行 create-vue2、项目目录和关键文件。

vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。自定义指令的分类私有自定义指令全局自定义指令私有自定义指令在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令。示例代码如下：在使用自定义指令时，需要加上 v- 前缀// 定义名为 focus 的指令，指向一个配置对象focus: {// 当指令第一次被绑定到元素上的时候，会立即触发 mounted 函数。

在 main.js 入口文件中，通过 app.config.globalProperties 全局挂载 axios。这种可以直接下载并在项目中使用的现成组件，就叫做。通过 vue-cli 创建的项目在遇到接口跨域问题时，可以通过。element-ui 组件，或是根据需求，只。② vue 项目发现请求的接口不存在，把请求。devServer.proxy 属性的值，跨域资源共享，因此默认情况下，上面的接口。，我们可以只引入需要的组件，以达到。，比如 Button，那么需要在。vue-cli 提供了创建项目的。

目录vue 简介vue 的特性数据驱动视图双向数据绑定MVVMvue 的基本使用vue 的调试工具vue 的指令1、内容渲染指令2、属性绑定指令3、事件绑定 4、双向绑定指令 v-model5、 条件渲染指令 6 、列表渲染指令vue过滤器 定义过滤器基本使用 私有过滤器和全局过滤器过滤器的注意点watch 侦听器使用 watch 检测用户名是否可用 侦听器的格式对象侦听器deep 选项 计算属性计算属性的特点vue-cli 的使用 安装和使用vue 项目中 src 目录的构成：vue 项目的运行流程 vu

vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目 中组件的切换。vue-router 4.x 的基本使用步骤

createWebHashHistory() 带 #获取路由对象 router useRouter。获取路由参数 route useRouter。history 模式使用。在vue3 组合式api中。1. 创建路由实例由。

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同 的代码块，然后当路由。被访问的时候才加载对应组件。

mixins 复用 - 处理登录确认框的弹出

它的出现极大的降低了前端开发者的模块化学 习成本，开发者不需再额外学习 AMD、CMD 或 CommonJS 等模块化规范。通 过 .then() 方法的。调用 .then() 方法时，成功的回调函数是必选的、失败的回调函数是可选的。Promise.all() 方法会发起并行的 Promise 异步操作，等。Promise.race() 方法会发起并行的 Promise 异步操作，如果不希望前面的错误导致后续的 .then 无法正常执行，则。， 如果有，则执行完所有微任务之后，再继续执行下一个宏任务。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。vuex是一个 vue 的状态管理工具，状态就是数据。vuex 是一个插件，可以帮我们管理 vue 通用的数据 (多组件共享的数据)state: {count: 0},// 定义mutations})

【uni-app报错】获取用户收货地址uni.chooseAddress()报错问题chooseAddress:fail the api need to be declared in …e requiredPrivateInf

legacy-peer-deps：在安装时忽略所有 peerDependencies，采用 npm 版本 4 到版本 6 的样式。如果报错则 npm i vant@latest-v2 -S --legacy-peer-deps。安装axios npm i axios -S --legacy-peer-deps。此时可以发起异步操作并更新数据，数据更新完毕后，将。默认绑定选中标签的索引值，通过修改。组件结合使用，实现下拉刷新的效果。属性，并自动选中对应的标签。即可切换选中的标签。

vue-router 的官方文档地址：https://router.vuejs.org/zh/它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目 中组件的切换。在 src/router/index.js 路由模块中，导入需要的组件，并使用。在 src/App.vue 组件中，使用 vue-router 提供的。SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，在 src/router/index.js 路由模块中，通过。因此，在全局前置守卫中，程序员可以对每个路由进行。

vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。

当监听到勾选状态发生改变 通过自定义事件 发送到父组组件 this.$emit(’事件名字，{id，value}')3. 把解构出来的 data 属性，使用 冒号 进行重命名，一般都重命名为 { data: res }// 把数量传递到 App.vue 的时候，需要通知 App 组件，更新哪个商品的数量。2. 使用解构赋值，从 axios 封装的大对象中，把 data 属性解构出来。// 接收商品的 id 值，将来，使用 EventBus 方案，//父组件中 使用ref属性 为组件添加引用名称。

Node.js 模块化：把每个文件当做一个模块，独立作用域，按需加载，使用特定标准语法导出和导入使用CommonJS 标准：一般应用在 Node.js 项目环境中ECMAScript 标准：一般应用在前端工程化项目中Node.js 包：把模块文件，代码文件，其他资料聚合成一个文件夹就是包项目包：编写项目需求和业务逻辑的文件夹软件包：封装工具和方法进行使用的文件夹（一般使用 npm 管理）本地软件包：作用在当前项目，封装的属性/方法，供项目调用编写业务需求。

中传递的匿名函数称为 ==回调函数==，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。概念：依靠 then() 方法会返回一个新生成的 Promise 对象特性，继续串联下一环任务，直到结束。细节：then() 回调函数中的返回值，会影响新生成的 Promise 对象最终状态和结果。语法：在then方法后面，通过点语法调用catch方法，传入回调函数并定义形参。响应报文：是服务器按照协议固定的格式，返回给浏览器的内容。参数是对响应的数据进行封装的对象，通过。可以获取到响应的数据。

深浅拷贝浅拷贝首先浅拷贝和深拷贝只针对引用类型浅拷贝：拷贝的是地址如果是简单数据类型拷贝值，引用数据类型拷贝的是地址 (简单理解： 如果是单层对象，没问题，如果有多层就有问题)深拷贝首先浅拷贝和深拷贝只针对引用类型深拷贝：拷贝的是对象，不是地址。

但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了 此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链状的结构，我们将原型对象的链状结构关系称为原型链。该属性指向该原型对象的构造函数， 简单理解，就是指向我的爸爸，我是有爸爸的孩子。原型对象的属性和方法，就是因为对象有 __proto__ 原型的存在。