坚持学习前端日记-CSDN博客

原创 vue挂载

上图：如图所示：vue挂载的方法有两种，编译模板的方法有三种但最终都会变为虚拟节点成为渲染函数render–>template–>el 挂载的位置是el或mount来获取节点进行替换内容经过了什么从生命周期开始beforecreated：执行了生命周期函数把全局api挂载到vue的原型上面，这个原型的绝大部分都被组件实例得到了实现，只有一些特殊的api比如一些配置vue.config vue.use vue.errorhangler performance 等等作为全局特有的c.

2021-02-03 15:34:31 6170 3

原创自嗨小型vuejs

class Vue { constructor(options) { console.log(options) this.data = options.data console.log(this.data) console.log(this) this.template = options.template this.el = options.el this.observe(this.

2021-01-20 15:12:10 160

原创 express制作小型热加载打包webpack--vue

json文件运行配置"scripts": { "dev": "node index.js" },index.js文件var opn = require('opn') // 打开浏览器var path = require('path') // 路径模块var express = require('express') // express框架 var webpack = require('webpack') //核心模块webpackvar webpackConfig = requ

2021-01-01 12:37:20 276

原创简单了解一下webpack

webpack打包工具基本用法都在下面const path=require("path")//这是用来输出path.resovleconst HtmlWebpackPlugin=require("html-webpack-plugin")//用于把HTML页面放入内存const minicss=require("mini-css-extract-plugin")//webpack4.0以后的打包css文件const OptimizeCssAssetsWebpackPlugin=require("o

2020-06-06 18:25:10 330

原创自定义vue的UI组件库

学完vue使用了element-ui 有没有想自己封装一个ui库不求多好看，只求学习一个技能或者一个知识点，那我可以帮到你，如果你喜欢请点个赞再走吧。分几步第一步是注册npm账号这个自行搜索第二步是自己封装一个组件这张图是一个ui组件库基本的结构publishedliu 是组件库的名字这个名字的文件夹下面包含一个src 一个package.json文件这是用来解释main执行index.js发生了什么import Button from 'publishedliu'Vue.use

2020-05-27 20:57:02 3526

原创 webpack的简单配置-jQuery

"devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", 这上面全是babel-l.

2020-05-17 10:58:18 372

原创 vue获取dom节点

< p ref=“text” id=“a”>单元测试< /p>< span @mouseenter=“but”>点击< /span>mounted(){//在挂载完成生命周期获取，因为在这个钩子函数之前视图已完成渲染console.log(this.$ refs.text.id);//通过ref命名 this.$refs.text获取节点属性...

2020-05-04 10:28:06 556

原创 nodejs的简单搭建

var app = express();//web框架var mysql=require(‘mysql’)//mysql数据库var url=require(‘url’)//post提交的url内容解析var body=require(‘body-parser’)//提交请求体body内容解析app.use(’/public’,express.static(‘public’))//静态文件...

2020-04-22 11:51:14 184

原创前端开发者如何开发自己的地图功能

打包的话umd 与 esm格式其实都需要，rollup就可以解决这个问题，借助vite就可以，在组件库的版本与git的组合，使用pnpm与lerna，使用工作空间来解决问题，如果需要给内部使用，可以搭建私有的git以及私有的npm库地址，内部方便使用，如果是对外部，可以对内容加密。二维的省市区通常数据是开源的。组件和地图的使用，框架与地图的结合，通常是引入原生的js库，然后封装一个基础地图功能组件，抛出一些对外的方法，来使用内部的功能，也可以根据常用的功能，来封装子组件，实现类似高德vue组件库那种形式，

2024-03-19 10:08:19 421

原创前端开发者如何开发自己的生态网站

生态：网站首页，后台，移动端，h5，客户端，然后公众号，博客，论坛，以及文档。11现在安装未发布的软件都有提示，但其实无所谓的，毕竟一开始只能先用着，等量起来了就去处理这些问题。如上所述都是自己生态的一部分，从幕前到幕后，这是需要大量的积累，以及长时间的探索。比如展示一些资源管理的网站，或者关于兴趣讨论的内容，比如游戏，音乐，电视剧等等。16稍微有些起色其实就可以去办自己的公司，因为小而全方便付费，比如订阅的模块。5: 微信小程序可以做静态的页面展示，宣传自己的比如二维码，公众号之类的。

2024-03-17 15:54:17 357

原创前端开发者如何应付市场危机情况

4在重复的技术项目里干上几年，人都会麻木，但上班就是温饱吃饭，下班才是学习，我们要做准备，提高求知欲，有目标，比如接私单，搞流量，弄产品，做副业，做自媒体，搞公众号，开发小程序推广自己，或者写文章，积累小册，甚至可以当软文作者，带货。6老人通常是陷入了债务危机，因为很难变化了，像那些技术不怎么样的，资源也不怎么样的，就可以减少社交，因为打工其实就是生存利己，相互的才长久，所以优先提升自己的实力，才有合作的资格，要不然就是累赘。没目的是因为欲望不够强。自己虽然不是创业，但单干或者副业的时候自己就是老板。

2024-03-17 15:12:32 360

原创前端开发者如何打造自己的生态以及ip

普通的人在以页面撬动这一切的时候，起码是五年以上的积累，因为多数时候都是在打工，需要利用自己的周末，双休，放假，然后深夜无人的时候，从工具使用熟练，然后利用公司机会打磨自己的时候，有很多软设的证书，比如架构，分析，软件等等都可以学习，考其实也不一定要考，但学是必须的，因为话术的问题，项目的应标，学会规则很重要。9由于接触页面的公司项目，但也别当井底之蛙，多涉及各种网友各种项目各种资源，累积代码，文档，pdf，word，以及各种创意的up 点子，进入免费的小群，留意新朋友，带动1+1大于3的效果。

2024-03-17 14:55:05 451

原创前端项目构建过程中涉及低代码部分思考

1市面上有很多表单设计器与框架进行结合，封装一个表单组件，结合响应式，然后给到我们下载使用2修改起来很麻烦，有局限，但我们可以参考他们的思路，来设计符合项目的组件来帮助我们早点下班3通用思路是布局，控件，数据，然后常用的功能，上传，验证。4通常是数组循环，包含布局，控件，数据每一项对应的响应式。5功能有简单的，也有复杂的，比如模糊查询，上传文件，图片，然后富文本，自定义组件等等，这些我们应该怎么处理循环？

2024-03-17 14:23:02 1098

原创前端项目构建过程中的思考落地以及拓展

起初通过mapbox-draw js插件绘制点线面，然后圆形，通过方法来绘制，然后封装组件，后续根据编码系统的maplibre-gl地图功能，将内置的地图组件，单独拿出来做基础组件，后续把起初封装的方法使用混入，并和一起，加入圆形，与图层切换，以及测量，点线面，圆，以及数据处理的控制，保持一致。保持样式和页面的统一。基于常用业务的功能分析，得出常用的图表大概十几种，关系图，折线图，散点图，旭日图，柱状图，漏斗图，热力图，雷达图，表盘，环形图，饼图，以及二维的地图。

2024-03-16 15:02:58 790

原创 2023年度前端个人总结

11月chatgpt的学习，参与书生浦语模型的社区，了解ai的前世今生，周四的晚上加班的学习，让我清楚的一些简单的概念，比如分词，模型，算法，以及数据处理，各种开源的闭源的，然后学到了第三方转发，以及vpn本地部署项目套壳，以及目前为止模型的本地搭建。12月尝试ai的模型部署学习，然后python的项目尝试，以及知识库，模型大厂key的使用，以及图片识别与如何使用一些开源模型切换，关注一些ai的up，创建了鸿蒙开发群的学习，准备华为全新生态的布局。书生意气，挥斥方遒。在变化巨快的技术世界，寻找自己的目标。

2024-01-22 16:37:39 416

原创前端开发插件推荐集合

https://csscoco.com/inspiration/#/./border/border-overflow-btn css动画。naive-ui: 一个基于 Vue.js 的 UI 组件库，风格简洁易用，适合快速开发。mitt: 一个小巧但功能强大的事件总线库，支持多种事件模式和事件类型。gsap: 一个高性能的动画库，提供了强大的动画功能和独特的缓动函数。https://csslayout.io/ css动画。https://animxyz.com/ 动画。

2023-12-14 09:55:47 212

原创 react组件注意事项

在使用React开发组件时，需要了解各个生命周期的作用，以便正确地处理组件的状态和行为。高阶组件是指接受一个组件作为输入，并返回一个新组件作为输出的函数。通过使用高阶组件，可以在不改变原有组件的基础上添加一些通用的功能，例如授权、数据获取、性能优化等。对于一些通用的组件，例如弹窗、下拉框等，可以将它们封装成独立的模块，以便在多个项目中共用。要实现这一点，应该将组件的状态和行为尽可能地分离，并将可定制的属性作为参数传递给组件。如果一个组件过于复杂，可以进一步拆分成多个子组件，以便提高代码的可读性和维护性。

2023-12-14 09:53:44 403

原创 react组件注意事项

在使用React开发组件时，需要了解各个生命周期的作用，以便正确地处理组件的状态和行为。高阶组件是指接受一个组件作为输入，并返回一个新组件作为输出的函数。通过使用高阶组件，可以在不改变原有组件的基础上添加一些通用的功能，例如授权、数据获取、性能优化等。对于一些通用的组件，例如弹窗、下拉框等，可以将它们封装成独立的模块，以便在多个项目中共用。要实现这一点，应该将组件的状态和行为尽可能地分离，并将可定制的属性作为参数传递给组件。如果一个组件过于复杂，可以进一步拆分成多个子组件，以便提高代码的可读性和维护性。

2023-12-14 09:53:08 222

原创前端性能优化部分的注意事项

页面中存在很多接口时进行优先级排序，优先请求页面重要信息的接口，并关注同一时刻请求的接口数量，如果过多进行分批请求。组件卸载时取消事件的监听、取消组件中的定时器、销毁一些三方库的实例。2.使用控制台的NetWork、Performance等工具。懒加载列表，懒加载图片，对移出可视区的图片和dom进行销毁。对于一些确实比较慢的接口使用loading或骨架屏。关注页面中使用到的图片大小，推动后端进行图片压缩。使用三方库或组件库尽量采用按需加载，减少打包体积。频繁切换的组件使用KeepAlive进行缓存。

2023-12-14 09:48:30 36

原创前端开发领域的方向

23.Mock数据和接口管理：搭建一个Mock服务器，用于模拟后端接口数据，方便前端开发和测试，同时可以考虑使用接口管理工具，如Swagger等，方便接口的定义和调试。3.构建工具和打包工具：搭建和维护一套完善的构建和打包工具链，包括使用Webpack、Parcel等工具进行代码的压缩、合并、打包等工具，优化前端资源加载和性能。40.前端性能监测工具：使用性能监测工具，如WebPageTest、GTmetrix等，监测前端应用的性能指标，如页面加载时间、资源加载时间等，进行性能优化。

2023-12-14 09:47:33 117

原创前端项目开发中的小技巧

echarts主题：https://echarts.apache.org/zh/theme-builder.html 通常图表都有主题色导出导入 echarts属性设置。cesium中文网：http://cesium.xin/cesium/cn/Documentation1.62/https://juejin.cn/post/7270861556031881216 小时甘特图。视频流：https://v2.h5player.bytedance.com/examples/

2023-12-14 09:45:18 16

原创前端大屏可视化的开发

【代码】前端大屏可视化的开发。

2023-12-14 09:35:22 80

原创前端移动端开发

小程序越来越严格，其实轻量的h5也是不错的选择。移动端一般分h5 app 混合开发，为啥会这样因为如果你更新内容经常让用户去下载包，我觉得不是很合适，有更新频繁的页面都是h5去替代，这样就是热更新网页部署，用户感知不到，webview的使用，

2023-12-14 09:26:47 17

原创 electron客户端开发的使用

通常我们都是基于vue-cli的改版成electron开发的架子，这样方便热更新，也方便配置打包，如果你使用webpack就需要注意target需要改成node 与 render之类的渲染选择，安装electron的版本写明入口文件，配置npmrc的源方便加速依赖下载，多数时候都是失败如果不设置，有时候还需要手动下载，electron可以渲染一个地址的内容来展示，因为结合了谷歌的内核渲染与v8还有node的生态，就是套壳的调用electron与客户端的功能，其实也是很方便的，虽然更新很快坑多，但套壳打包是一

2023-12-14 09:21:24 18

xlsx.full.min.js

Print11.js

jspdf.debug.js

学习两三年前端的心得.docx

空空如也