一代码神-CSDN博客

原创使用git rebase 合并commit

1我们有时候会多次提交commit，每次都是极小的改动，推送到远程就有一大堆的commit记录，非常不美观，可以用rebase来合并commita.命令：git log 查看commit提交记录b.命令：git rebase -i [commiID] 从制定的commitID开始操作上面的commit后面的一串代码就是commitIDc.这个图是个示范，之前操作的时候忘记截图，进入shell后，按下i看到底下有个插入提示，将想要合并的commit的 pick改成s，他是会将这个commit和前

2021-09-17 15:18:50 1094

原创 JS中闭包，call的详解以及在防抖节流中的应用

1.什么是闭包闭包概念：函数内部定义的函数，被返回了出去并在外部调用形成条件；函数的返回值是函数优点：实现封装，避免全局变量污染在适当的时候，可以在内存中维护变量并缓存，提高执行效率。缺点：函数的变量都保存在内存中，会有内存泄漏问题。在退出函数之前，将不使用的局部变量全部删除。案例：let bob=(function(){ let a=10; let b=20; function add() { return a+b } functio

2021-08-10 11:55:40 504

原创 webpack4搭建vue开发环境

1.需求目标大家开发业务时最顺手的是vue-cli,大部分的封装配置都做好了,这篇文章是用webpack4搭建这样的环境,那vue-cli已经配置好了功能呢? 1. ES6代码转换成ES5代码 2. scss/sass/less/stylus转css 3. .vue文件转换成js文件 4. 使用 jpg、png，font等资源文件 5. 自动添加css各浏览器产商的前缀 6. 代码热更新 7. 资源预加载 8. 每次构建代码清除之前生成的代码 9. 定义环境变量 10

2021-08-06 21:59:02 644

原创 webpack4配置新手教程

1.初始化项目先创建一个webpackDemo文件夹，切换进去执行如下命令， npm install --save-dev webpack-cli@4.4.02.基本概念 1. 入口(entry) Webpack 执行构建的第一步将从 Entry 开始，可理解为输入。 2. 输出(output）输出结果，在 Webpack 经过一系列处理后输出的配置 3. loader （模块转换器） 4. 插件(plugins) 扩展插件，在 Webpack对文件处理的扩展处理3.配置webp

2021-08-05 15:16:14 717

原创 Vuex数据持久化，防止浏览器刷新数据丢失

1.安装 vuex-persistedstate 插件1. npm install vuex-persistedstate -S //安装插件2. 在 store/index.js 文件中添加以下代码：import persistedState from 'vuex-persistedstate'const store = new Vuex.Store({ state:{}, getters:{}, ... plugins: [persistedState()] //添加插件})注意!

2021-08-02 10:35:49 188

原创前端工程师必会的数据接口fast Mock的使用

1.背景项目开发过程中经常遇到过这样的场景：项目的页面已经全部完成开发，但是后端的接口还没完成。这个时候一直等的话就比较浪费时间。是否可以自己模拟一些数据先来开发功能呢？这个时候就可以用到 fast Mock 来模拟接口返回数据。但必须是与后端商量统一接口命名、请求参数字段与返回字段等 , 类似的在线软件easy mock,yapi等. 2.使用方法fast Mock这个就是网址链接,非常容易就注册登录进去了,它支持mockjs语法,功能非常强大登录进去直接可以创建项目,也可以加入到

2021-07-29 16:11:48 2406

原创 Vue组件的抽离和封装

1.背景日常开发中，有时候有些组件是功能类似甚至完全相同的情况，这个时候我们完全没必要再重新写一个，可以抽离复用可以减少大量的时间，案例：像一些App底部的标签页，在进行一些标签的跳转时，底部的只是变化选中时的字体颜色和图标，大部分的元素都相同。2.抽离思路2.1先抽出一个大的可以装里面小组件的大容器TabBar<div class='tabBar'> <tab-bar-item v-for="(val,index) in navBar" :path='val

2021-07-25 22:24:55 2103

原创前端常见问题及技巧

1.margin-top失效代码如下： //html <div class="wrapper"> <div class="outer"> <div class="main"></div> </div> </div> </div> //css.wrapper { width: 400px; height: 400px; bo

2021-07-24 14:36:52 247

原创 Javascript运行机制

1.同步与异步同步：按顺序，代码不中断的执行，常见的：console.log异步：先执行一部，拿到结果，再执行后续的代码或者回调函数。1.计时器(setTimeout,setInterval)2.ajax3.读取文件执行顺序：先执行同步代码，再执行异步代码。console.log(1);for (let index = 0; index < 1000; index++) { console.log(index);} setTimeout(()=>console.log

2021-07-21 11:59:25 216 1

原创用Vue仿element-ui从0到1封装可复用的组件-radio/radioGroup

1.需要的前置知识vue基础语法,组件通讯(props,$emit,provide.inject)，slot，v-model，computed1.1准备工作，子组件引入全局环境中import vbRadio from "@/components/Radio";import vbRadiogroup from "@/components/RadioGroup";Vue.component(vbRadio.name, vbRadio);Vue.component(vbRadiogroup.name

2021-07-18 21:15:41 500

原创用Vue仿element-ui从0到1封装可复用的组件-input

1.需要的前置知识vue基础语法,组件通讯(props,$emit)，slot，v-model，computed1.1准备工作，子组件引入全局环境中import vbInput from "@/components/Input";Vue.component(vbInput.name, vbInput);父组件：App.vue子组件：Input.vue2.实现目标功能描述：目前支持密码框和文本框，文本框支持一键清除，密码框支持是否明文参数部分：3.整体思路 1. 底部其实也是和

2021-07-18 16:43:31 309

原创用Vue仿element-ui从0到1封装可复用的组件-dialog

用Vue仿element-ui从0到1封装可复用的组件-dialog1.需要的前置知识vue基础语法,组件通讯(sync,provide,inject)，slot，v-model，computed和watch 过渡动画1.1准备工作，引入全局import vbDialog from "@/components/Dialog";Vue.component(vbDialog.name, vbDialog);父组件：App.vue子组件：Dialog.vue2.实现目标点击click按钮

2021-07-17 22:56:14 674 4

原创用Vue仿element-ui从0到1封装可复用的组件-button

用Vue仿element-ui从0到1封装可复用的组件-button1.需要的前置知识vue基础语法,组件通讯(sync,provide,inject)，slot，v-model，computed和watch 过渡动画2.目标完成element-ui上的Basic usage的全部功能上图是基本的控制button按钮的属性。3.设计的思路3.0 先在main.js中全局注册button，这样就可以直接引用了import vbButton from "@/components/But

2021-07-17 21:43:06 305

原创 HTML基础：label标签的for属性

HTML基础：label标签的for属性1.基本用法：将一个 <label> 和一个 <input> 元素相关联可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，让用户更容易激活这个元素。将一个 <label> 和一个 <input> 元素匹配在一起，你需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和 <input>

2021-07-17 20:43:11 6571

原创 vue-router中beforeEach全局守卫，实现路由跳转登录验证

在实际的项目中有些路由跳转需要设置一些权限：以后台管理系统为例，登陆成功以后才能进入后台页面：以商城为例，购车需要登陆后才能查看下面的代码可以实现每次的路由跳转拦截下来，进行身份验证import ElementUI from 'element-ui'import http from './api/config'import mock from './mock'//用js-cookie来处理cookieimport Cookie from 'js-cookie'rou...

2021-07-13 17:24:20 1224 1

原创 Vue中子组件改变父组件的数据解决方法

1.项目中遇到的问题在项目中，碰到父组件向子组件传一个对象数据，子组件修改props里接受父组件的数据，父组件的数据也发生变化的问题，具体的代码如下 Parent.vue<template> <div> <child :infor="infor" :inforLabel="inforLabel"></child> </div></template><script>im

2021-07-13 10:09:14 1149

原创 Vuex中模块化后this.$store.commit和this.$store.state的用法

1.背景大中型项目，需要在不相关的平行组件之间传递数据，并且很多数据需要多个组件循环使用。再使用单个store方式会让项目代码冗余，不利于组件复用，模块化后对于一些相同的方法名this.$store.commit 怎样调用到相应的模块下，今天来实践一下。2.将store模块化2.1在src目录下创建store文件夹,再创建一个index.js作为所有模块的向外暴露的出口2.2这个是tab2.js,具体的业务逻辑可以写在这里，最总要的是namespaced，模块化一定要命名空间，否则同样的

2021-07-10 08:42:31 19956

原创 Vue中组件的通信

vue中组件的通信1.父子组件的通信1.1在子组件使用props接受父组件的数据，用this.$emit发送数据给父组件Parent.Vue<template> <div> <Child v-bind:msg="'from parent'" ></Child> </div></template><script>//引入子组件import Child from "./Child.vue";e

2021-07-07 21:02:46 102

原创 Promise在异步函数的运用

Promise在异步函数的运用1.Promise的定义 1.1 Promise 是表示异步操作最终完成或失败的对象。2.使用方法–MDN官方图解3.使用示例–Resolve function ajax() { return new Promise((resolve, reject) => { setTimeout(() => resolve(), 1000) }) } ajax().then(() =&gt

2021-06-20 20:43:15 353

原创 git操作

将本地已创建的项目，上传至gitee1.现在gitee创建一个仓库，并配置好邮箱和密码2.初始化本地仓库将项目文件上传至本地的git仓库$ git init$ git add .$ git commit -m 'xxxx'3.将本地代码库与远程代码库相关联$ git remote add origin https://gitee.com/httpxiaobocom/jdPage.git4.强制把远程仓库的代码跟新到当前分支上面。ps:如果仓库为空这一步可以跳过$ git pull

2021-06-14 21:22:12 380

原创 2021-06-07

本地电脑上使用git git config --global 来设置用户名和邮件1.背景临时拿对象的笔记本来工作，发现git是她的名字和邮件，想更改为自己的名字和邮件。用git config --list 可查看用户名和邮件等相关信息。2.更改用户名和邮件 git config --global user.name "username" git config --global user.email "xxx@xxx.com" global参数是不管哪里的git仓库都更改过来。3

2021-06-07 22:14:23 100

bob的博客