
项目中的小知识
文章平均质量分 64
在项目开发的过程中遇到的小问题的解决方案
李公子丶
学而时习之,不亦说乎!
展开
-
mockjs的基本使用和演示案例
什么是mockjsmockjs可以模拟可更快的得到较为真实的数据,且可以拦截axios的接口调用,让我们的代码实现了调用接口的逻辑且得到模拟的数据,保存业务完整度。当然模拟数据有一定的规则请参考: http://mockjs.com/...原创 2022-02-12 16:57:58 · 1934 阅读 · 0 评论 -
vee-validate表单校验的使用方法
VeeValidate 是 Vue.js 表单验证框架。VeeValidatehttps://vee-validate.logaretm.com/第一步:安装npm i vee-validate@4.0.3第二步:导入// 导入组件import { Form, Field } from 'vee-validate'export default { name: 'LoginForm', components: { Form, Field }}第三步:使用 .原创 2022-01-26 22:09:31 · 2965 阅读 · 0 评论 -
Vue中自动批量注册组件
使用require提供的函数context加载某一个目录下的所有.vue后缀的文件。然后context函数会返回一个导入函数importFn它又一个属性keys()获取所有的文件路径通过文件路径数组,通过遍历数组,再使用importFn根据路径导入组件对象遍历的同时进行全局注册即可// 导入library文件夹下的所有组件// 批量导入需要使用一个函数 require.context(dir,deep,matching)// 参数:1. 目录 2. 是否...原创 2022-01-19 18:17:47 · 1028 阅读 · 0 评论 -
Vue3 通过自定义指令实现图片懒加载
介绍一个webAPI:IntersectionObserverIntersectionObserver API,可以自动"观察"元素是否可见,Chrome 51+ 已经支持。由于可见(visible)的本质是,目标元素与视口产生一个交叉区,所以这个 API 叫做"交叉观察器"。检测某个元素是否进入了"视口"(viewport),即用户能不能看到它。// 创建观察对象实例const observer = new IntersectionObserver(callback[, options].原创 2022-01-14 18:24:03 · 310 阅读 · 0 评论 -
Vuex持久化插件(vuex-persistedstate)
为什么使用持久化目的: 让在vuex中管理的状态数据同时储存在本地。可免去自己储存的环节。在开发的过程中,像用户信息(名字,头像,token)需要vuex中储存且需要本地储存 再例如,购物车如果需要未登录状态下也支持,如果管理在vuex中页面需要储存在本地使用步骤1. 首先:我们需要安装一个vuex的插件vuex-persistedstate来支持vuex的状态持久化npm i vuex-persistedstate2. 然后:在src/store 文件夹下新建 modules原创 2022-01-08 13:01:32 · 23480 阅读 · 7 评论 -
微信小程序分包流程
为什么要分包?小程序要求压缩包体积不能大于 2M,否则无法发布 实际开发中小程序体积如果大于 2M 就需要使用分包机制进行发布上传 分包后可解决 2M 限制,并且能分包加载内容,提高性能 分包后单个包的体积不能大于 2M 分包后所有包的体积不能大于 16M分包形式?常规分包 独立分包 分包预下载常规分包开发者通过在 app.json subpackages 字段声明项目分包结构 特点: 加载小程序的时候先加载主包,当需要访问分包的页面时候才加载分包内容 分包的页面原创 2021-12-07 16:03:14 · 1436 阅读 · 0 评论 -
Vue项目中完整的初始化工作
使用 Vue CLI 创建项目如果你还没有安装 VueCLI,或者版本低于 4,请执行下面的命令安装或是升级:npm install --global @vue/cli在命令行中输入以下命令创建 Vue 项目:vue create toutiaoAdminVue CLI v4.2.3? Please pick a preset: default (babel, eslint)> Manually select featuresdefault:默认勾选 babe转载 2021-08-25 14:14:03 · 2711 阅读 · 2 评论 -
图片裁切器Cropper.js的使用
cropperjs是一款非常强大却又简单的图片裁剪工具,它可以进行非常灵活的配置,支持手机端使用,支持包括IE9以上的现代浏览器。支持 39 个选项 支持27种方法 支持6个事件 支持触摸(移动) 支持缩放 支持旋转 支持缩放(翻转) 支持多种作物 支持在画布上裁剪 支持通过画布在浏览器端裁剪图像 支持翻译 Exif 方向信息 跨浏览器支持官方github文档:https://github.com/fengyuanchen/cropperjs使用方法...原创 2021-09-24 21:19:03 · 2238 阅读 · 0 评论 -
项目中如何处理相对时间
推荐两个第三方库:Moment.jsDay.js两者都是专门用于处理时间的 JavaScript 库,功能差不多,因为 Day.js 的设计就是参考的 Moment.js。但是 Day.js 相比 Moment.js 的包体积要更小一些,因为它采用了插件化的处理方式。Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样,如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js 。Day.js原创 2021-09-15 17:38:05 · 182 阅读 · 0 评论 -
如何处理第三方图片资源403的问题
返回403的原因为什么文章列表数据中的好多图片资源请求失败返回 403?这是因为我们项目的接口数据是后端通过爬虫抓取的第三方平台内容,而第三方平台对图片资源做了防盗链保护处理。第三方平台怎么处理图片资源保护的?服务端一般使用 Referer 请求头识别访问来源,然后处理资源访问。Referer 是什么东西?Referer 是 HTTP 请求头的一部分,当浏览器向 Web 服务器发送请求的时候,一般会带上 Referer,它包含...原创 2021-09-15 17:14:32 · 222 阅读 · 0 评论 -
深度作用操作符 /deep/
组件的样式作用域 在组件中的style标签中默认是全局样式 我们在组件使用style设置了HelloWorld组件中元素的样式HelloWorld组件内容 在父组件中给子组件内部元素添加样式有作用域的组件如果不希望当前组件中的样式影响到别的组件,我们可以添加作用域 在有作用域的组件中给子组件设置样式 默认只能作用到子组件的根节点上 使用子组件根节点本身的class类名 ...原创 2021-09-14 12:37:28 · 1631 阅读 · 0 评论 -
优化封装本地存储 localStorage 模块
为什么要封装?在我们项目的后续业务中的很多地方都需要操作本地存储,如果每次都像上面那样写的话比较麻烦,所以我们这里建议把操作本地存储的代码封装到一个单独的模块中进行处理。封装方法创建 src/utils/storage.js 模块。 在文件中封装方法并导出/* 封装本地存储模块 */export const getItem = name => { // 获取数据 const data = window.local...原创 2021-09-12 16:02:50 · 919 阅读 · 0 评论 -
项目中移动端 REM 适配方法 和 PostCSS 的使用
什么是适配我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,视口不同,所以为了让我们的页面在每个设备上都可以良好的展示,那么就需要为这些设备做统一的处理,这个过程就称为移动端适配。rem介绍rem是css3 的一个长度单位 ,相对文档跟元素 html;比如设置html font-size=100px;那么1rem=100px;之后的所有元素都可以用这个基准值来设置大小;移动端 R...原创 2021-09-12 13:07:02 · 2259 阅读 · 0 评论 -
项目中如何导入 Vant 组件库
Vant 是有赞商城前端开发团队开发的一个基于 Vue.js 的移动端组件库,它提供了非常丰富的移动端功能组件,简单易用。官方文档 GitHub 仓库下面是在 Vant 官网中列出的一些优点:60+ 高质量组件90% 单元测试覆盖率完善的中英文文档和示例支持按需引入支持主题定制支持国际化支持 TS支持 SSR在我们的项目中主要使用 Vant 作为核心组件库,下面我们根据官方文档将 Vant 导入项目中。将 Vant 引入项...原创 2021-09-12 11:57:13 · 4045 阅读 · 0 评论 -
关于项目中的富文本编辑器的使用方法
在项目中我么使用的富文本编辑器 一般都是来自第三方的,基本不会去自己写。除非有特别高端的,需要精细化定制的项目。 在项目中我们一般都是直接去找第三方的编辑器去使用或者修改在这里给大家推荐几个比较热门的编辑器UEditor (百度编辑器 功能丰富) CKEditor (国外的一个比较稳定的编辑器)另外我们还可以使用Vue官方推荐的一些富文本编辑器Vue官方推荐的这些 都是Vue官方认为比较适合在Vue中使用的我们今天给大家演示...原创 2021-09-02 20:01:59 · 1137 阅读 · 0 评论 -
在项目开发中如何去分析接口文档
什么是接口文档?我们在使用ajax开始 就基本都是在请求接口 既然是请求接口 就必然有对应的接口文档,如果没有文档你就不知道这个接口怎么用 接口是后端 比如(java、python、php)等开发人员开发出来的 作为一名前端开发工程师,我们关心的是后端把这个接口写出来,我们如何使用 一般都是通过文档的形式进行沟通文档如何使用? 文档一般都有标题来介绍接口的功能 一个功能一般分为三段介...原创 2021-09-01 22:51:32 · 1188 阅读 · 0 评论 -
解决js中后端返回数据中的大数字问题
问题原因:JavaScript 能够准确表示的整数范围在-2^53到2^53之间(不含两个端点),超过这个范围,无法精确表示这个值,这使得 JavaScript 不适合进行科学和金融方面的精确计算。Math.pow(2, 53) // 90071992547409929007199254740992 // 90071992547409929007199254740993 // 9007199254740992Math.pow(2, 53) === Math.pow(2...原创 2021-08-30 12:00:43 · 2936 阅读 · 0 评论