06 2023 档案
摘要：前言最近接触了一个新的vue项目，安装依赖是一直无法安装成功，有部分依赖包的地址报404，查看package-lock.json，发现其中部分依赖使用了公司私有的镜像库，但是目前该镜像库已关闭，访问该包地址返回404. 解决方案如下1、删除package-lock.json，重新npm i 生成新的
阅读全文
摘要：前言： 最近接触一个比较大的vue项目，发现打包后的项目文件体积很大，最大的的一个js有17M，于是用 Vue CLI report 分析一下 Vue CLI（@vue/cli）自带的 webpack 包体积优化工具，它可以查看各个模块的 size 大小，方便优化。只需要在 build 后面加上 -
阅读全文
摘要：前言首屏速度是用户体验的最关键一环，而首屏速度最大的决定性因数就是资源的加载速度 而资源的加载速度 = 资源大小 + 网速 资源大小影响的方面有1、压缩（如Gzip） 2、一部分代码分割出来做异步加载，需要的时候在加载 3、写代码的时候尽量精简 本文主要针对，资源文件加载的优化。异步资源加载一般有两
阅读全文
摘要：前言 实际工作中可能会遇到需要封装WebSocket的场景，以下基于ts做了WebSocket的封装，包括心跳机制和重连 1、封装逻辑如下，新建ws文件： // websocket 封装 enum ConnectionState { // websocket 连接状态 'CONNECTING', '
阅读全文
摘要：前言： WebSocket是HTML5开始提供的一种浏览器与服务器进行全双工通讯的网络技术，属于应用层协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。 1、创建webSocket // Create WebSocket connection.
阅读全文
摘要：1、多级路由 （1）配置路由规则，使用children配置项： // 编写配置项 const router = new VueRouter({ routes: [ { path: '/about', component:About, }, { path: '/home', component: Ho
阅读全文
摘要：1、相关理解 1.1 vue-router的理解 vue的一个插件库，专门用来实现SPA应用的 1.2 对SPA应用的理解 1、单页Web应用（single page web application，SPA） 2、整个页面只有一个完整的页面。index.html 3、点击页面中的导航链接不会刷新页面
阅读全文
摘要：前言 前端在向后端请求资源时通常会遇到跨域问题，当我们是用vue脚手架构建项目时，可以通过配置代理解决跨域问题 参考文档：devServer.proxy 方法一： 在vue.config.js中添加如下配置： module.exports = { devServer: { proxy: 'http:
阅读全文
摘要：1、作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间的通信方式，适用于父组件==》子组件 2、分类：默认插槽、具名插槽、作用域插槽 3、使用方式： （1）、默认插槽 父组件中： <Category> <div>html结构 </div> </Category> 子组件中： <tem
阅读全文
摘要：关于VueComponent： 1、组件本质是一个名为VueComponent的构造函数，并且不是程序员定义的，是Vue.extend生成的 2、我们只需要写组件引入<Demo />,Vue解析时会帮我们创建demo组件的实例对象，即Vue帮我执行的： new VueComponent(option
阅读全文
摘要：1、一种组件间通信的方式，适用于任意组件间通信，适用于任意前端框架 2、使用步骤： （1）、安装pubsub：npm i pubsub-js （2）、引入：import pubsub from ‘pubsub-js’ （3）、接收数据：A组件想要接收数据，则在A组中订阅消息，订阅的回调留在A组件自身
阅读全文
摘要：Vue全局事件总线1、一种组件间通信的方式，适用于任意组件间通信。 2、安装全局事件总线 // main.js 中 安装全局事件总线 new Vue({ render: h => h(App), beforeCreate() { Vue.prototype.$bus = this // 安装全局事件
阅读全文
摘要：前言 实际业务中经常需要使用到本地存储，本文的webStorage指的是localStorage和sessionStorage
阅读全文
摘要：组件的自定义事件： 1、一种组件间的通信方式，适用于：子组件 》父组件 2、使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件回调在A中） 3、绑定自电影事件： （1）、第一种方式：在父组件中：<MyTest @myHandle="test" /> 或 <MyT
阅读全文
摘要：一、定义语法 （1）、局部指令： .... methods: {}, directives: { // 局部指令写法一 big(el, binding) { // el 被绑定的元素 // binding 被绑定的对象值 console.log(el, binding) }, // 局部指令写法二
阅读全文
摘要：前言vue 封装组件是一个很常规的操作。一个封装好的组件可以在项目的任意地方使用，甚至我们可以直接从npm仓库下载别人封装好的组件使用，入element-ui这一类的组件库。 1、环境准备 因为我们此次封装的是Vue组件，所以我们直接在Vue脚手架项目里面进行封装即可。 （1）、初始化项目 vue
阅读全文
摘要：前言 Test组件时本地打包的一个组件库，放在npm上。在该组件中使用img对象引入了一张图片。在本地项目中使用npm 后使用Test组件，发现图片的路径前面多了一个js/的目录路径，图片不能正常展示。 这是组件库开发中很常见的一个问题：如果你的组件库里面引入了图片，有以下几种解决方案：（不知是否还
阅读全文
摘要：1、概念 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 2、何时使用 多个组件需要共享数据时 3、搭建vuex环境 注意：vue2中，要用vuex的3版本，vue3中，要用vuex
阅读全文
摘要：功能：可以说把各个组件共用的配置提取成一个混入对象 使用方式 第一步定义混合，并导出，例如： export defalut{ data(){...}, methods:{...}, ... } 第二部使用混合，例如： 1、引入对象 import xxx from "..." 2、使用混入 (1).全
阅读全文
摘要：vue 插件功能：用于增强Vue 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。 1、定义插件： 对象.install = function(Vue,options){ // 1、添加全局过滤器 Vue.filter(....)
阅读全文
摘要：1、在项目中存放本地JSON文件 2、在需要的组件引入本地文件 import dataBaseMap from '../json/dataBaseMap.json'; 3、在data中接受数据 data() { return { // 浅拷贝 dataBaseMap: { ...dataBaseMa
阅读全文
