黎小小的博客

1、什么是神策埋点神策埋点是指在Web或移动应用上通过代码追踪用户行为，收集用户行为数据并进行分析的一种技术。在产品开发过程中，通过埋点，可以收集用户在产品中的各种操作行为，如页面浏览、点击事件、购买记录等，并将这些数据发送到特定的平台进行分析和处理，以便于团队更好地了解用户使用行为、研究用户偏好，优化产品设计和营销策略。2、为什么需要神策埋点通过埋点采集用户行为数据，可以更深入地了解用户的操作行为，为产品迭代和优化提供依据。

公司决策高层对项目进行可行性分析，决定是否为项目投入时间、金钱和资源产品根据业务梳理流程与功能点整理需求文档（PRD）3.1. 需求宣讲，需求评审，定下项目里程碑，任务分解3.2. 开发人员功能开发3.3. 测试进行功能测试，性能测试，开发人员改bug3.4. 项目上线

webpack配置文件： webpack.build.js。

不同环境下的打包，如果出现图片显示不了时（特别是css中的图片），请检查publicPath的配置。会开启tree-shaking和js代码压缩，但配置会使默认的压缩功能失效。所以，指定css压缩插件的同时，务必指定js的压缩插件。插件，结合配置，可以把css代码打包到单独的css文件，且可以设置存放路径（通过设置插件的filename和生产环境下不能使用devtool:"inline-source-map"，而用devtool:"source-map"

因为之前使用的都是淘宝镜像源：在cmd终端输入以下命令，作用是设置代理然后使用npm官方镜像源。

组件库背景：使用elementplus+vue封装了一个通过表单组件。通过JSX对el-form下的el-input和el-button等表单进行统一封装，最后达到，通过数据即可一键生成页面表单的功能。

强制缓存存在一个瓶颈， 当浏览器用户强刷新时，浏览器会直接跳过强制缓存，这点不注意很容易会被忽视掉。强制缓存不适合 SPA 应用的入口文件， 因为重新部署后， 用户如果没有强制刷新， 则无法在第一时间内看到新的网页内容。作为一个前端开发者可以通过设置请求头中的 no-cache 和 no-store 字段选择使用协商缓存或者不使用缓存！！！

单例模式：多次实例化，最终也只有一个实例被创建，所有的方法和属性，都只能通过这个被创建的实例进行调用。

现在国内常见的浏览器有：IE、Firefox、QQ浏览器、Safari、Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、遨游浏览器、世界之窗浏览器等。但目前最为主流浏览器有五大款，分别是IE、Firefox、Google Chrome、Safari、Opera。浏览器最重要的部分是浏览器的内核。浏览器内核是浏览器的核心，也称“渲染引擎”，用来解释网页语法并渲染到网页上。浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息。

push()在首部添加一个。pop()删掉最后一个。

原理：其实就是规定元素的四个边框颜色及边框宽度，将元素宽高设置为0。如果要哪个方向的三角形，将对应其他三个方向的边框宽和颜色设置为0和透明transparent即可。

实现原理很好理解，就是通过伪元素绝对定位到行尾并遮住文字，再通过。需要注意的是，如果文本为一段很长的英文或者数字，则需要添加。内核的浏览器，由于移动端大多数是使用。一般文本存在英文的时候，可以设置。使一个单词能够在换行时进行拆分。属性扩展，所以兼容浏览器范围是。实现也非常简单，核心的。，所以移动端常用该形式。可以看到，上述使用了。

异步组件defineAsyncComponent加载不能用在首次展示或者首次重定向的页面。但是使用会报警告：暂时不知道为什么。

forEach无返回值，具体得说是return会返回undefined；map会返回新数组数组类型为基本数据类型时，forEach()和map()都不会改变原数组；数组类型为引用数据类型时，forEach()和map()都会改变原数组；循环体中使用return时，return后的代码都不会执行，只会对循环后的返回值有影响，forEach永远返回undefined，map()会返回return的值；forEach()不支持链式操作；map()支持链式操作；

Home.vue下包含aside.vue和menu.vue。

菜单icon由后端提供，直接用的字符串返回，前端使用遍历显示，发现icon不会显示。

权限管理主要分为后端权限和前端权限。后端权限是关键，主要控制对数据库的操作；前端权限为辅，主要表现在对界面显示、路由导航、按钮显示操作与否、无效请求前端拦截和响应拦截提升用户体验等。

每次请求请求头都携带token，没有token或者token失效后端会返回错误。

获取路由元数据中的rights权限和按钮上的action记录权限做比较：如果包含则有该权限，否则无权限，进行删除元素或者设置disabledif (!// 注意要使用nextTick，才能立即修改DOM} else {else});

此处用mockjs模拟。

【代码】vue3+vue-cli使用mockjs。

错误页面必须也使用动态添加方法，并且在路由动态添加完成后再添加，否则如果在基础路由中定义错误页面，那么每次点击路由都会首先找路由，没找到就会匹配到错误页面，从而跳转到错误页面。且路径必须有 "/"添加动态路由方法中，是使用router.addRoute()方法进行添加，Home表示将路由嵌套在Home页面下。以7.2的方式，在动态添加完其他路由后，再添加错误页面就能成功导到不同路由页面，但是警告依然会存在。注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用。，才能显示该新路由。

可以设置在某个事件段内不允许重复提交；或者点击提交后设置提交flag，flag为true则不能再次提交。

以下仅为个人见解。

如果你发现生产环境下无法请求mock接口，原因很有可能是因为你是在onMounted或者onBeforeMount这两个生命周期中请求的。你的请求会直接发出去，无法通过mock返回数据。解决方案：①直接在main.js中注入插件配置。创建一个js文件mockProdServer.js，位置和main.js同层，在src/mockProdServer.js。注意如果vite.config.ts中配置了代理proxy就会走代理请求，如果使用mockjs需要注释掉代理相关代码。

vue3+vite项目需要使用nodejs16及以上版本才能正常运行，修改nodejs版本后成功启动。原因：nodejs版本太低。

vue-simple-uploader在vue3中的使用小案例

这里返回值 objMsg.uploadedChunks为[1];chunk.offset + 1为1，使用indexof会报错。(也可以用于数组)。indexof参数必须是字符串。更改为使用includes方法即可。在字符串中首次出现的位置。

vue-simple-uploader本身是基于vue2的，直接npm i vue-simple-uploader -S下载下来版本的是0.7.6。在vue3中无法使用会报错。解决：使用@next安装接下来要发布的版本就会下载1.0.1版本，即可使用vue3。更新后，再使用组件即可正常显示，不报错。注意：这个版本里面很多方法不太一样。

解决：在 tsconfig.json的compilerOptions下 加上 baseUrl 和 paths 即可。找不到模块“path”或其相应的类型声明。

有些包如vue-simple-uploader，使用npm下载后，npm仓库中没有对应的@types类型声明，会报错，没有找到对应的@types类型文件。在项目根目录下，创建自定义的类型声明文件，如，self-vue.d.ts。

【代码】axios封装。

怀疑是，父级容器cart-box和子级uni-swipe-action宽度没有完全相等导致。而容器都没有设置固定宽度值，父级容器cart-box只设置了padding: 10px 10px;问题：uniapp使用uni-swipe-action后右侧多了小于1px的间隙。且在真机上没有问题，但是在微信开发者工具中有问题。解决：在子级容器添加padding-right:5px（值必须固定）撑满容器，并且设置 display: flex;代码如下：在滑动滑块或者点击这个区域时，就会出现问题。

settle.vue页面引入bjs-settle.vue组件，bjs-settle.vue组件点击后在settle.vue中进行结算操作（过程中有跳转）本来以为使用vue的this.$emit()就可以实现子组件回调父组件中的方法，但是发现没用。然后看到uniapp中需要使用uni.$emit()，直接使用后，也不生效。官方是说使用$emit$on$off常用于跨页面、跨组件通讯。

获取用户收货地址。调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址。

这些是uni-data-pickerview组件vue文件中定义好的，尝试修改没有成功，就直接修改文件了。直接使用uni-data-picker组件，会先显示请选择区域的下拉框，再显示选择区域；我这里需要第二种样式，所以需要使用uni-data-picker组件的插槽用法。7:修改样式后完整uni-data-pickerview组件vue文件。想使用uni-data-picker，并修改成自己自定义的样式。插槽以下处加入class样式，并加入uni-icons即可。图1为原本样式，图2，3为修改后的样式。

【代码】uniapp中使用vant-weapp。

注意type使用得type必须和修改时选择器样式（button[type=default]）一样，才能对其修改样式，否则样式不会被修改。如果是多端适配，需要使用type为default再修改样式。想使用原生button组件，但是想使用不同样式。

uniapp官网上vuex和pinia两种状态管理方式都有介绍。在uniapp中vuex和持久化到本地缓存，和在vue中使用没有任何区别但是如果使用pinia本身持久化到本地缓存使用的是插件pinia-plugin-persistedstate。但是如果在uniapp中持久化数据到本地缓存需要安装pinia-plugin-unistorage，该插件是uniapp下的本地化存储插件。

场景：左侧菜单栏，每次切换时，需要右侧商品展示区保持滚动条及页面在最顶部。