前端
关注
分享
扫一扫
文章平均质量分 93
前端学习知识点，如HTML、css、js、vue
长路 ㅤ
24应届毕业，目前入职的公司toB主营业务为数据中台，岗位：Java后端开发一枚，主要学习方向为Java后端，大数据，算法。 欢迎和我交流
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vue2集成vuex实现网站统一数据管理
本文详细介绍了在Vue项目中使用Vuex进行状态管理的步骤，包括安装Vuex依赖、创建store模块、配置全局状态和getters，以及在组件中如何动态获取和设置网站基础数据。文章通过代码示例展示了如何在路由守卫中获取数据，并在Vue组件中使用计算属性来动态更新页面内容。原创 2024-10-05 10:26:51 · 1530 阅读 · 0 评论 -
vite学习教程06、vite.config.js配置
本文介绍了如何在Vite项目中配置启动服务的端口。通过修改`vite.config.js`文件中的`server`配置，可以轻松地设置服务端口号、是否允许主机访问以及是否在启动时自动打开浏览器。这些配置为本地开发和测试提供了便利，确保开发者可以快速启动和访问项目。原创 2024-10-05 09:45:14 · 949 阅读 · 0 评论 -
vite学习教程05、vite+vue2构建本地 SVG 图标
本文详细介绍了在Vite项目中构建本地SVG图标的详细步骤。首先，通过安装`vite-plugin-svg-icons`插件来处理SVG资源。接着，在`vite.config.js`中配置插件，并创建了`.vite`目录下的插件封装脚本。文章还解决了安装过程中可能出现的`fast-glob`包缺失的问题，并在项目中演示了如何直接在Vue应用中使用SVG图标以及如何封装Vue组件来使用SVG图标。原创 2024-10-05 09:42:49 · 1712 阅读 · 0 评论 -
vite学习教程04、vue集成axios封装request工具类及应用
本文介绍了如何在Vue项目中安装和封装axios请求工具类，以及如何创建api请求工具。首先，通过npm安装axios库。然后，在src目录下创建request.js文件，配置axios实例，包括基础URL和超时时间，并设置请求和响应拦截器。接着，封装api请求工具，根据不同的请求方式（如get、post、delete）修改method参数。最后，在Vue组件中使用封装的api请求工具类进行数据请求，并展示了请求成功的示例。原创 2024-10-05 09:38:57 · 1388 阅读 · 0 评论 -
vite学习教程03、vite+vue2打包配置
本文介绍了如何通过修改`vite.config.js`来优化Vite项目的配置。首先，增加了基础路径和插件配置，使用`defineConfig`来定义项目配置，并通过`vue2`插件支持Vue 2。接着，配置了路径别名`@`指向`/src`，使得在项目中可以方便地引用资源。文章还展示了如何在Vue组件中使用路径别名来引入资源，并执行打包命令`npm run build:prod`来测试打包效果。最后，提供了参考文章链接，帮助读者解决项目打包后资源找不到的问题。原创 2024-10-05 09:29:07 · 1540 阅读 · 0 评论 -
vite学习教程02、vite+vue2配置环境变量
本文详细介绍了在Vite项目中如何安装和配置环境变量，以及如何在项目中应用这些变量。首先，通过npm安装`cross-env`依赖。然后，在项目根目录创建`.env`文件，并为不同环境（默认、开发、生产）设置环境变量。特别强调，网络服务变量名必须以`VITE_`开头。接着，展示了如何在Vue组件或JS文件中通过`import.meta.env`访问这些环境变量。最后，介绍了如何使用Vite命令行工具和`package.json`脚本根据不同环境运行和构建项目。原创 2024-10-05 09:22:39 · 1549 阅读 · 0 评论 -
vite学习教程01、vite构建vue2
本文详细介绍了如何使用Vite初始化Vue 2项目，包括创建项目、安装依赖、修改配置文件、安装Vue 2及其Vite插件，并启动开发服务的完整流程。通过具体命令和代码示例，文章指导读者一步步完成从项目搭建到服务启动的全过程。原创 2024-10-05 09:01:50 · 2305 阅读 · 0 评论 -
vue-scrollto实现页面组件锚点定位
vue-scrollto实现页面组件锚点定位原创 2024-10-05 01:25:51 · 1263 阅读 · 0 评论 -
vue-live2d看板娘集成方案设计使用教程
vue-live2d看板娘集成方案设计使用教程原创 2024-10-05 01:22:45 · 2261 阅读 · 0 评论 -
cherry-markdown开源markdown组件详细使用教程
cherry-markdown开源markdown组件详细使用教程原创 2024-10-05 01:18:24 · 4334 阅读 · 3 评论 -
微信小程序之基础知识点及实战问题解决整理
文章目录前言导航全局配置(app.json)页面配置(app.json)sitemap配置app.js生命周期Page生命周期wxml语法引用模块(两种方式)WXSS微信小程序-自动适配屏幕高度和宽度JS引用模块事件API图片相关API实际应用1、图片点击预览功能2、图片自适应宽度组件switchinputvaluetextareascrollview实现功能1、跳转功能+拿到请求路径中的参数2、两个view在一行中并排显示3、引用标签3.1、完全替换掉模板的(block wx:for)4、绑定事件函数传参原创 2022-05-11 13:06:10 · 1011 阅读 · 1 评论 -
Vue-router学习笔记 组件、模式学习
文章目录前言一、引入vue-router组件1.1、vue2项目引入vue-routervue3项目引入vue-route二、Vue-router两种模式三、this.$router详解router对象动态加载路由案例二、HTML使用Vue-router参考文章参考文章前言本篇博客是vue-router的整理笔记，若文章中出现相关问题，请指出！当前该链接失效了，有需要的小伙伴可以去b站或者技术胖官网去找相应的视频与笔记。所有博客文件目录索引：博客目录索引(持续更新)一、引入vue-router原创 2022-05-11 13:03:53 · 729 阅读 · 0 评论 -
vue-cli学习笔记 03、Vuex(数据存储方案)
文章目录前言导航一、vue-cli集成VueX组件二、VueX基本使用(拿、修改)2.1、store定义、取值以及修改值2.2、关于mutations与actions的详细区别三、VueX基本使用操作(使用Composition API)四、vue-cli中使用vuex参考文章前言本篇博客是在vue-cli的学习笔记，若文章中出现相关问题，请指出！当前该链接失效了，有需要的小伙伴可以去b站或者技术胖官网去找相应的视频与笔记。所有博客文件目录索引：博客目录索引(持续更新)导航VueX：数据管理原创 2022-05-10 09:17:35 · 1305 阅读 · 3 评论 -
vue-cli学习笔记 02、Vue-router(路由)
文章目录前言一、起步1.1、ES5实现局部页面路由跳转二、通过vue-cli使用vue-router组件2.1、哈希路由三、嵌套路由(示例)四、404页面实现五、进阶5.1、导航守卫前言本篇博客是在vue-cli的学习笔记，若文章中出现相关问题，请指出！当前该链接失效了，有需要的小伙伴可以去b站或者技术胖官网去找相应的视频与笔记。所有博客文件目录索引：博客目录索引(持续更新)一、起步1.1、ES5实现局部页面路由跳转目的：单页面中实现局部路由跳转<!DOCTYPE html>原创 2022-05-10 09:16:14 · 957 阅读 · 0 评论 -
vue-cli学习笔记 01、vue-cli脚手架
文章目录前言一、安装vue-cli脚手架二、熟悉Vue-cli开发方式三、Vue-cli开发todolist(组件形式)参考资料前言本篇博客是在vue-cli的学习笔记，若文章中出现相关问题，请指出！当前该链接失效了，有需要的小伙伴可以去b站或者技术胖官网去找相应的视频与笔记。所有博客文件目录索引：博客目录索引(持续更新)一、安装vue-cli脚手架删除老的脚手架：npm uninstall -g vue-cli安装最新的脚手架到全局：npm install -g @vue/cli执行原创 2022-05-10 09:14:52 · 362 阅读 · 0 评论 -
Vue.js学习笔记 06、Vue3新特性
文章目录前言Composition API（基于函数组合）一、setup()函数（Composition API的入口）二、ref与reactive函数使用2.1、ref与reactive引用方式与原理2.2、toRefs与toRef使用(让reactive包装的引用类型解构后响应依然生效)2.3、context属性介绍与使用(attrs、emit、slots)三、computed函数(Context实例中获取，计算属性)3.1、computed参数为箭头函数3.2、computed函数设置set、get方原创 2022-05-10 09:12:57 · 681 阅读 · 0 评论 -
Vue.js学习笔记 05、Vue插件使用
文章目录前言一、Vue中的插件1.1、插件的定义与参数认识1.2、编写一些插件的功能二、数据校验插件开发示例前言本篇博客是在学习技术胖-Vue3.x从零开始学-第一季 基础语法篇过程中记录整理的笔记，若文章中出现相关问题，请指出！当前该链接失效了，有需要的小伙伴可以去b站或者技术胖官网去找相应的视频与笔记。所有博客文件目录索引：博客目录索引(持续更新)一、Vue中的插件1.1、插件的定义与参数认识插件用途：将通用性的功能封装起来。定义与使用如下：<body> <原创 2022-05-10 09:11:58 · 779 阅读 · 1 评论 -
Vue.js学习笔记 04、Vue属性(Mixin、自定义指令、teleport以及render)
文章目录前言一、Mixin(混入数据)1.1、局部Mixin认识与基本使用1.2、全局Mixin定义(app.mixin({}))1.3、Mixmin自定义属性优先级(this.$options获取自定义属性)1.4、修改Mixin中属性的优先级(使用配置方法来修改策略)二、自定义指令(directive)引言2.1、局部与全局自定义指令2.2、自定义指令中生命周期函数的两个参数(el、binding)2.3、简化自定义指令方式三、teleport标签(传送门功能，``)四、render()函数（templ原创 2022-05-10 09:10:40 · 1446 阅读 · 1 评论 -
Vue.js学习笔记 03、Vue样式篇
文章目录前言一、基础样式绑定1.1、基础样式绑定(v-bind:class)1.2、对象与数组形式控制样式二、进阶使用进阶一：子组件的样式绑定进阶二：行内样式编写（普通字符串形式与对象形式，推荐对象形式）三、transition标签使用(vue自带标签)3.1、基本使用(配合过渡或动画使用以及设置别名)3.2、自定义样式名3.3、过渡与动画同时使用时如何控制时间？(借助type属性)3.4、vue中使用js来实现动画(借助钩子函数)四、元素或组件切换动画(mode与appear属性)4.1、回顾切换元素与组原创 2022-05-10 09:09:37 · 1948 阅读 · 0 评论 -
Vue.js学习笔记 02、Vue组件篇笔记
文章目录前言一、全局组件子组件应用组件优点：组件的可复用性全局组件缺点描述二、局部组件创建与注册局部组件(认识components属性)局部组件的默认规定(组件名称首字母全都大写)三、父子组件的传值(静态、动态)3.1、静态传值(name="技小胖")3.2、动态传值(v-bind:xx="xx"配合子组件中的props数组接收)动态传递值动态传递函数3.3、三种校验方式①类型校验(props需要写成{}形式)②必填校验与默认值设置(required与default)③精准校验(validator)四、单项原创 2022-05-10 09:07:58 · 753 阅读 · 13 评论 -
Vue.js学习笔记 01、Vue基本语法篇
文章目录前言1、基础学习1.1、第一个vue：helloworld(template以及mount()使用)1.2、编写计数器(mounted应用)1.3、vue的绑定事件和事件方法(v-on:xxx以及methdos属性使用)1.4、显示隐藏套餐服务(v-if使用)1.5、vue列表与循环(v-for)1.6、动态添加指定值并显示在页面中(v-model绑定输入数据)1.7、组件化开发(初识自定义组件以及v-bind绑定)综合小案例(列表展示与添加)2、深入知识点学习2.1、CreateApp()以及mo原创 2022-05-10 09:05:32 · 1112 阅读 · 0 评论 -
Node.js学习笔记 认识Node.js以及npm使用
文章目录前言基础常识一、认识Node.js下载安装1.1、Node.js的诞生1.2、node.js运行代码的两种方式1.3、node.js与浏览器的部分区别二、创建第一个应用三、npm使用介绍常用命令镜像源相关npm安装node_modules提示报错npm修改包安装路径npm更新nvm管理node.js版本node use切换不生效参考资料前言本篇博客是介绍Node.js的安装配置以及npm使用，若文章中出现相关问题，请指出！所有博客文件目录索引：博客目录索引(持续更新)基础常识网页渲染流程：原创 2022-05-10 09:04:03 · 741 阅读 · 0 评论 -
前端性能优化 实际应用cdn 加快静态资源访问
文章目录前言理论实践腾讯云（启动cdn）前言本篇博客是介绍如何使用CDN来提升我们网站静态资源速度，若文章中出现相关问题，请指出！所有博客文件目录索引：博客目录索引(持续更新)理论也许是史上最全的一次CDN详解、CDN加速全站配置教程1、用户访问主域名——2、解析到cdn节点——3、发现无此资源——4、访问源站服务器——5、访问源站对应的主机（网站目录）——6、取到资源，响应用户——7、缓存资源其中3456就是回源，5就是回源host如何查看一个URL是否命中CDN缓存浏览器—检查: 主原创 2022-05-09 07:40:57 · 1663 阅读 · 0 评论 -
WebPack实战 WebPack打包Vue项目
文章目录前言一、使用webpack来进行vue-cli模块化开发二、Webpack配置区分开发环境和生产环境三、vue项目打包3.1、config—index.js文件3.2、build—webpack.prod.conf.js 文件3.3、element ui 字体文件加载出错3.4、路由跳转出现js访问404问题四、关闭Webpack的debug模式五、Vue项目打包发布后，使浏览器WebPack中无法查看源码前言本篇博客是关于Webpack打包vue的配置以及一些问题解决整理，若文章中出现相关问题原创 2022-05-09 07:39:04 · 3378 阅读 · 0 评论 -
Webpack学习笔记 02、Babel模块以及Webpack核心使用
文章目录前言提前准备一、Babel模块(解决js的语法问题)1.1、初识Babel1.2、本地使用Babel二、webpack(核心：解决模块问题)2.1、介绍webpack2.2、初次接触(将有模块引入的两个js文件进行打包)核心一二：entry与output(入口与出口)核心三：loaders介绍loadersbabel-loader+@babel/ployfill(前者用于连接webpack与babel，后者解决es6的API及类的兼容问题)核心四：plugins介绍pluginsHtmlWebpac原创 2022-05-09 07:37:24 · 875 阅读 · 0 评论 -
Webpack学习笔记 01、Module模块系统
文章目录前言一、Module出现的原因1.1、最初引入js文件的方式(原始引入与立即调用函数表达式方式)1.2、使用Module模块系统管理(初次使用)二、Module模块方式与使用前提条件2.1、引入Module模块方式(两种)2.2、前提条件三、Module的两种导出与导入方式一：export default导出与import导入(只能单个)方式二：export导出与import引入(单、多个)基本使用导出导入时起别名整体导入(导入到一个对象中，* as obj)export与eport default原创 2022-05-09 07:36:17 · 1551 阅读 · 1 评论 -
Canvas学习笔记 Canvas的基础知识点
文章目录前言一、导航初始化属性与方法小demo二、绘制功能2.1、绘制矩形2.1.1、非面向思想实现动画2.1.2、面向对象思维实现动画2.2、绘制路径2.3、绘制圆弧(动态圆形示例)2.4、设置线型透明度(小球碰撞案例)2.5、线型的属性2.6、设置文字2.7、渐变(线型与径向)2.8、设置阴影三、绘制图片四、资源管理器(手动创建类进行管理)五、变形5.1、transloate(移动画布)5.2、rotate(画布旋转)5.3、scale(缩小绘制目标)transform（三个元素统一写）六、合成(glo原创 2022-05-09 07:33:59 · 1432 阅读 · 0 评论 -
Ajax&Fetch学习笔记 08、Fetch
文章目录前言一、认识Fetch1.1、介绍Fetch1.2、Fetch初次使用(查看response)二、Fetch使用2.1、使用Fetch()来得到响应数据(默认GET请求)2.2、Fetch()中的第二个参数(配置fetch)前言本篇博客是介绍Fetch的使用，若文章中出现相关问题，请指出！所有博客文件目录索引：博客目录索引(持续更新)一、认识Fetch1.1、介绍FetchFetch也是前后端通信的一种方式。优点：Fetch是Ajax(XMLHttpRequest)的一种替代方案，默认原创 2022-05-09 07:32:33 · 343 阅读 · 0 评论 -
Ajax&Fetch学习笔记 07、axios(第三方库)
文章目录前言导航安装axios一、axios.get二、POST请求总结前言本篇博客是介绍axios的使用，若文章中出现相关问题，请指出！所有博客文件目录索引：博客目录索引(持续更新)导航axios中文文档axios中响应data数据已经自动帮我们转为json对象了(对于get、post请求)！！！安装axiosnpm install axios一、axios.get对于请求参数携带有两种方式：//方式一：直接写在第一个参数url的后面axios.get('/user?ID原创 2022-05-09 07:31:48 · 427 阅读 · 0 评论 -
Ajax&Fetch学习笔记 06、ajax实际应用(三种)
文章目录前言一、搜素提示二、二级菜单三、多个ajax请求的并发执行前言本篇博客是介绍Ajax的实际应用场景，若文章中出现相关问题，请指出！所有博客文件目录索引：博客目录索引(持续更新)一、搜素提示我们在网站上输入关键字往往都会得到相应匹配的值出现在下拉框中，这是如何实现的呢？实际上也是通过发送ajax请求之后得到响应将响应的值显示在下拉框里即可！！！示例如下：1、准备一个input输入框以及ul列表。2、监听输入事件，并且设置定时器来根据input中的值发送ajax请求得到相关联匹配的原创 2022-05-09 07:30:50 · 349 阅读 · 1 评论 -
Ajax&Fetch学习笔记 05、ajax封装(含Promise)
文章目录前言一、内部封装js①utils工具类②Defaults.js(默认属性方法配置类)③constant.js(常量文件)④Ajax.js（自定义Ajax类，用来进行初始化执行一系列操作）二、外部封装(提供给外界使用的API，含测试)2.1、Ajax原生封装2.2、Ajax进阶封装Promise前言本篇博客是对于Ajax的封装，若文章中出现相关问题，请指出！所有博客文件目录索引：博客目录索引(持续更新)一、内部封装jsajax类 初始化方法 绑定响应事件处理 设置各个header原创 2022-05-09 07:29:46 · 456 阅读 · 0 评论 -
Ajax&Fetch学习笔记 04、FormData使用
文章目录前言前言一、认识FormData(含方法测试)实际应用(表单提交校验以及参数添加)前言本篇博客是Ajax&Fetch中的FormData使用，若文章中出现相关问题，请指出！所有博客文件目录索引：博客目录索引(持续更新)前言本篇博客是Ajax&Fetch中的跨域问题解决，若文章中出现相关问题，请指出！所有博客文件目录索引：博客目录索引(持续更新)一、认识FormData(含方法测试)FormData是什么？是一个类，能够将表单dom元素传入自动解析其中的表单元素，将na原创 2022-05-09 07:28:42 · 524 阅读 · 0 评论 -
Ajax&Fetch学习笔记 03、跨域问题
文章目录前言一、认识跨域1.1、介绍跨域(含示例)1.2、同域与不同域区别1.3、跨域请求为什么被阻止？二、两种解决方案方案1：CORS(IE10及以上选择)方案2：JSONP(IE10以下选择方案)前言本篇博客是跨域问题解决，若文章中出现相关问题，请指出！所有博客文件目录索引：博客目录索引(持续更新)一、认识跨域1.1、介绍跨域(含示例)跨域：向一个域发送请求，如果要请求的域和当前域是不同域即为跨域。不同域之间的骑牛，就是跨域请求。示例：<script> //访问本地资原创 2022-05-08 13:54:23 · 585 阅读 · 0 评论 -
Ajax&Fetch学习笔记 02、JSON
文章目录前言一、介绍JSON二、JSON三种形式2.1、简单值形式2.2、对象形式2.3、数组形式三、JS中JSON的常用方法3.1、JSON.parse()3.2、JSON.stringify()3.3、借助parse()与stringify()来封装localstorage前言本篇博客是Ajax&Fetch中的JSON学习，若文章中出现相关问题，请指出！所有博客文件目录索引：博客目录索引(持续更新)一、介绍JSONJSON(JavaScript Object Notation，js对象原创 2022-05-08 13:53:13 · 884 阅读 · 0 评论 -
Ajax&Fetch学习笔记 01、ajax
文章目录前言一、认识Ajax1.1、介绍Ajax1.2、Ajax的基本使用(含测试)二、请求方式(含携带数据与数据编码)2.1、GET请求2.2、POST三、xhr深入学习3.1、xhr属性3.1.1、responseType(影响response与responseText)3.1.2、timeout属性(设置超时时间)3.1.3、withCredentials属性(指定使用Ajax发送请求时是否携带Cookie)3.2、xhr方法3.2.1、abort()（终止当前请求）3.2.2、setRequestH原创 2022-05-08 13:52:17 · 643 阅读 · 0 评论 -
JavaScript扩展知识点 02、本地存储(cookie与localstorage)
文章目录前言一、cookie1.1、认识cookie1.2、cookie的基本用法(写入、读取)1.3、cookie的属性(6个)1.4、Cookie封装方法14.1、模块化封装(含测试)1.4.2、实现中英文切换(利用Cookie)1.5、cookie的注意事项二、localStorage2.1、认识与查看localStorage2.2、local storage的基本使用2.3、实际应用：表单填充2.4、注意事项三、查看js语言是否在不同浏览器具有兼容性网站三、查看js语言是否在不同浏览器具有兼容性网站原创 2022-05-08 13:51:28 · 1627 阅读 · 0 评论 -
JavaScript扩展知识点 01、前后端交互与HTTP协议
文章目录前言一、前后端交互1.1、前端三种方式与后端交互二、HTTP2.1、介绍HTTP2.2、浏览器与服务器完整的一次请求2.3、HTTP报文2.4、HTTP方法2.5、GET与POST区别2.6、HTTP状态码前言本篇博客是关于javascript扩展知识点-前后端交互与HTTP协议，若文章中出现相关问题，请指出！所有博客文件目录索引：博客目录索引(持续更新)一、前后端交互1.1、前端三种方式与后端交互1、使用浏览器访问网页：在浏览器上输入网址，回车。2、HTML标签自动发送：浏览器在解析原创 2022-05-08 13:50:33 · 1232 阅读 · 0 评论 -
JavaScript ES6语法学习笔记 03、ES6新增方法
文章目录前言一、字符串新增方法1.1、includes()：判断是否含有元素1.2、padStart()和padEnd()：填充起始值或后位值1.3、trimStart()和trimEnd()：切除空字符串二、数组新增方法2.1、includes()：判断数组中是否有某个成员2.2、Arrary.from()：其他类型转数组2.3、find()与findIndex()：查找指定元素值或索引三、Object对象方法(构造器方法)3.1、Object.assign()：合并对象3.2、Object对象的keys原创 2022-05-08 13:46:46 · 750 阅读 · 0 评论 -
JavaScript ES6语法学习笔记 01、ES6语法基础
文章目录前言一、认识ES6二、认识let与const2.1、初识let与const2.2、let、const与var的区别(5点)2.3、let、const应用引出var变量问题(使用在局部作用域中)解决方案1(ES6解决方案)：使用闭包解决方案2：使用let、const来定义变量三、模板字符串(``)3.1、认识模板字符串与基本使用3.2、注意事项(输出多行字符串、特殊字符、注入哪些内容)3.3、实际应用(将标签与对象值进行配合进行注入)四、箭头函数(简化函数写法)4.1、认识箭头函数4.2、箭头函数的简原创 2022-05-08 13:43:00 · 753 阅读 · 0 评论 -
JavaScript学习笔记 09、面向对象—内置对象
文章目录前言一、包装类二、Math对象三、Date对象3.1、创建日期对象(三种方式)3.2、日期对象的相关方法3.3、获取时间戳以及转换Date对象方式实际案例：计算过往时间到现在此时此刻的年月份秒实时统计前言本篇博客是关于javascript中面向对象的内置对象，若文章中出现相关问题，请指出！所有博客文件目录索引：博客目录索引(持续更新)一、包装类包装类：Number、String、Boolean。目的：为了让基本类型可以从他们的构造函数中的prototype上获得方法。1、包装类Numb原创 2022-05-07 07:46:12 · 665 阅读 · 8 评论