鲜橙多了没-CSDN博客

原创路由懒加载详解

1.什么是路由懒加载？整个网页默认是刚打开就去加载所有页面，路由懒加载就是只加载你当前点击的那个模块。按需去加载路由对应的资源，提高首屏加载速度（tip:首页不用设置懒加载，而且一个页面加载过后再次访问不会重复加载）。实现原理：将路由相关的组件，不再直接导入了，而是改写成异步组件的写法，只有当函数被调用的时候，才去加载对应的组件内容。2.传统路由配置：import Vue from 'vue'import VueRouter from 'vue-router'import Logi

2021-12-31 08:17:28 6371 1

原创解决跨域--反向代理（详解）

跨域请求是非常常见的现象，跨域请求出现错误的条件：浏览器同源策略 && 请求是ajax类型跨域的解决方案其实有好几种：a.前端用JSONP方式去发请求（jsonp不是ajax请求）b.后端写代码(CORS)在响应中添加必要的响应头，让响应回来之后浏览器不报错c.之前也有总结，今天主要讲一下反向代理：跨域-Vue-Cli配置反向代理：vue-cli中集成的跨域解决方案思路：在前端服务和后端接口服务之间架设一个中间代理服务，它的地址保持和前端服务...

2021-12-21 00:56:03 4450 1

原创一篇文章带你认识环境变量

1.认识环境变量---端口配置首先要知道端口配置是在哪里配置的？在vue.config.js中配置的，vue.config.js 就是vue项目相关的编译，配置，打包，启动服务相关的配置文件，它的核心在于webpack,相当于改良版的webpack如图，是开发环境服务端口的位置:我们看到上面的 process.env.port实际上是一个nodejs服务下的环境变量，该变量在哪里设置呢？在项目下, 我们发现了.env.development和.env.production两个文件.

2021-12-20 22:56:58 783

原创如何使用mock

1.首先得知道什么是mock数据呢？mock：假的前端程序员提到的mock数据的含义是：真的假数据真的：符合接口规范要求的。假数据：数据是人为创建出来的，不是真正的业务数据。 2.那mock的使用场景是什么呢？后端接口的开发速度跟不上前端的进度，而前端要实现业务还必须依赖数据，前端为了保证开发进度就需要自己mock数据，保证业务能正常开发3.mock一般是如何实现的呢？本地启mock服务器：自己用express写接口本地用专门的mock服务2 线上的m

2021-12-19 10:09:06 3406

原创 Axios的拦截器介绍以及封装配置

axios基于promise用于浏览器和node.js的http客户端支持浏览器和node.js支持promise能拦截请求和响应自动转换JSON数据能转换请求和响应数据axios的拦截器原理如下：axios作为网络请求的第三方工具, 可以进行请求和响应的拦截axios 全局配置：# 配置公共的请求头 axios.defaults.baseURL = 'https://api.example.com';# 配置超时时间axios.defaults..

2021-12-19 08:27:11 382

原创 SCSS处理的基本了解和使用

官方文档：https://www.sass.hk/1.首先注意,这里的sass和我们的scss是什么关系？sass和scss其实是一样的css预处理语言预处理语言使用是：开发时用预处理语言，在打包上线时，用webpack再配合loader工具给转成css（Cascading Style Sheets）给浏览器使用后缀名不同：SCSS 是 Sass 3 引入新的语法，其后缀名是分别为 .sass和.scss两种。SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.sc

2021-12-19 08:03:49 515

原创 ElementUi的表单校验梳理

1. 表单校验的先决条件：el-form : 绑定model属性（表单数据对象） rules规则（校验）el-form-item:设置prop属性（要校验的字段）el-input: v-model 绑定属性（双向绑定字段）代码：  <el-card class="card-longin">  <el-form style=" marg...

2021-12-18 11:04:33 717

原创 ESLint 的配置

eslint是一个代码检查工具，用来检查你的代码是否符合指定的规范1.ESLint-自定义规则在项目根目录下面，有一个.eslintrc.js文件，它是对eslint进行配置的，其中有一个属性是专门用来设置自定义代码规则的：rulesmodule.exports = { root: true, // 当前项目使用这个配置文件, 不会往父级目录找.eslintrc.js文件 env: { // 指定eslint启动环境(vuecli底层是node支持), browser: true也可以

2021-12-17 23:14:28 15024

原创项目开发流程

稍微讲一下前端项目主要开发流程：1.产品经理画出原型图2.提出需求需求分析,(前端,后端,测试,ui)进行需求评审3.把原型稿交给UI设计出来4.前端根据设计稿写静态页面和交互效果5.和后端对接接口(后端提供),接口联调6.研发自测=>版本提测=>bug修复7.上线(生成dist文件交给后端部署)...

2021-12-06 00:43:13 598

原创 TypeScript的基本介绍

本文主要对TypeScript做一些基本介绍一，TS类型注解格式:let 变量名: 类型 = 初始值示例代码:let age: number = 18说明：代码中的 : number 就是类型注解作用：为变量添加类型约束二，类型推论在 TS 中，某些没有明确指定类型的情况下，TS 的类型推论机制会自动提供类型。好处：由于类型推论的存在，有些情况下的类型注解可以省略不写发生类型推论的 2 种常见场景1.声明变量并初始化时2.决定函数返回值时// 变量

2021-11-24 18:46:59 1226

原创 3分钟了解TypeScript

一，TypeScript 介绍1.TypeScript 简称：TS，是 JavaScript 的超集。简单来说就是：JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。2.在 JS 基础之上，为 JS 添加了类型支持。TypeScript = Type + JavaScript3.TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行// TypeScript 代码有明确的数据类型let age1: number = 18// Java

2021-11-24 11:57:24 518

原创 moment的常见用法总结

前端很多场景都会涉及到对时间的处理，本文就对moment的常见用法做一些总结指定语言；不然可能引起一些不必要的bug# 记得指定为对应的语言； moment.locale('zh-cn')获取时间戳# 精确到毫秒moment().valueOf()## 1584182611042 ；返回值为数值类型moment().format('x') ## 返回值为字符串类型# 精确到秒 moment().unix()## 1584182618 精确到秒返回值为数值..

2021-11-21 19:08:50 8670 1

原创 react在非组件环境下获取路由信息

出现这类问题,一般都是在react路由拦截时需要用到当我们在拦截器中拦截到没有token时,应该是让他回到登录页,一般想到的是直接使用window.location.href. 但是用location.href直接赋值会导致页面刷新那如何在非组件内使用history跳转呢？首先说一下背景，react-router-dom中直接有Router这个包，但是它Router 没有history属性有如下公式：Router + HashHistroy = HashRouterRout.

2021-11-19 23:36:53 1138

原创 javascript中双感叹号是什么意思？

let name = undefined;let age = null;console.log(name, age); // 结果为：undefined nulllet name1 = !name; // 单个 ! 号代表转换为相反的布尔值。console.log(name1); // 结果为：truelet n

2021-11-18 21:38:31 796

原创 React中路由的基本使用

1. 先下包[email protected] 可以自己用npm yarncnpm 进行下载,我使用的是5.3.0版本2. 导入并使用import { HashRouter as Router , Route, Link } from 'react-router-dom' export default function App () { return ( <div> <h1>react路由基本使用</h...

2021-11-18 21:31:21 201

原创多维数组降维的几种方法

多维数组降维也就是数组扁平化数组扁平化的方法有很多种,但是我主要用五种,如下：一，递归 // 一,递归 let arr = [1, [2, 3, 4, 5], [6, 7, 8, 9, [10, 11, 12, [14, 15, 16]]]] let newArr = [] const getArr=(array)=>{ array.forEach((item)=>{ .

2021-11-17 21:22:33 4784

原创常用学习网站

学习网站国图公共开课：中国国家图书馆推出的一个高质量免费在线学习网站oeasy：视频教程网站医学微视:以视频的方式分享各种医学知识世卫组织:权威靠谱的医学知识、医学数据、医学资料和医学资源的综合学习网站大学资源网:完全免费并且功能非常强大的学习网站中国数字科技馆:国家级公益性科普服务平台优优教程网:设计软件学习网站Esltower:是一个完全免费的高质量英语学习网站WikiHow:综合技能聚合网站壹课堂:在线视频教程网站Ehow:生活技巧教程分享网站语文迷:语文知识综合学习网站 ...

2021-11-16 20:52:08 306

原创 Vue相关合集：＜Vue 数据双向绑定的原理＞

定义：Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。具体步骤：一、我们为每个vue属性用Object.defineProperty()实现数据劫持，为每个属性分配一个订阅者集合的管理数组dep；二、在编译的时候在该属性的数组dep中添加订阅者，v-model会添加一个订阅者，{{}}也会，v-bind也会，只要用到该属性的指令理论上

2021-11-15 10:04:23 346

原创 Vue相关合集：＜Vue 生命周期的几个阶段＞

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。一、开始创建、初始化数据、编译模板beforeCreate 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。created 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/ev

2021-11-15 08:44:16 160

原创 Vue相关合集：＜Vue 怎么实现跨域＞

出现跨域的主要原因就是发送ajax请求返回数据时受到浏览器的同源策略的限制。我所知道的解决跨域的方案有四种：第一种解决方案: 使用 Vue-cli 脚手架搭建项目时在项目中创建vue.config.js文件。vue2中使用proxy配置；vue3中使用proxyTable配置。第二种解决方案：反向代理因为客户端请求服务端的数据是存在跨域问题的，而服务器和服务器之间可以相互请求数据，是没有跨域的概念（如果服务器没有设置禁止跨域的权限问题），也就是说，可以配置一个代理的服务器可以请求另一个服.

2021-11-11 21:15:18 1143

原创 React 生命周期

一，概念从创建到销毁的整个过程只有类组件有生命周期，函数组件没有生命周期类组件生命周期有3个阶段，5个钩子函数二，生命周期顺序1.Mounting 挂载阶段(初始化)a. constructor(props)：初始化 state 和 props 数据,创建Ref等b. render()：渲染组件c. componentDidMount()：在组件被挂载到页面后执行，只在挂载时执行一次(发送网络请求，dom操作)2.Updation 更新阶段(更新)a.render()..

2021-11-10 22:09:56 752

原创 React中受控组件和非受控组件

一，受控组件1.概念：受控组件就是可以被 react 状态控制的组件在 react 中，Input textarea 等组件默认是非受控组件（输入框内部的值是用户控制，和 React 无关）。但是也可以转化成受控组件，就是通过 onChange 事件获取当前输入内容，将当前输入内容作为 value 传入，此时就成为受控组件。好处：可以通过 onChange 事件控制用户输入，使用正则表达式过滤不合理输入。2.步骤：a.在state中定义状态b.对表单元素做两件事:设置value为

2021-11-09 18:28:26 601

原创 React组件通信

一，组件通讯介绍基本概念：组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯二，主要讲三种常用的组件通讯方式父子组件之间兄弟组件之间跨组件层级先了解props基本使用：格式：父组件传入数据<子组件自定义属性1={值1} 自定义

2021-11-08 23:13:13 187

原创 Vue相关合集：＜系列7-在 Vue 中踩过的坑＞

我在vue踩过的坑：第一个就是路由变化但页面数据却没刷新，是因为依赖路由的params参数写在created生命周期里了，相同路由二次甚至多次加载的关系，没有达到监听，退出页面再进入另一个页面并不会运行created钩子函数，所以数据还是第一次进入的数据并没有更新，可以用watch监听路由是否发生变化或者用watch监听是从什么路由跳转过来的第二个就是给对象添加属性的时候，直接通过给 data 里面的对象添加属性然后赋值，新添加的属性并不是响应式的，可以通过 Vue.set(对象，属性，值)这

2021-11-07 22:21:33 179

原创 Vue相关合集：＜系列6-在 Vue 中使用插件的步骤＞

我在vue中使用插件分为三步：第一步先用import引入vue1.import Vue from ‘vue’ 第二步引入要使用的组件名2.import 组件 from ‘组件包名’ 第三步通过vue.use()调用3.Vue.use(组件)

2021-11-07 22:17:50 243

原创 Vue相关合集：＜系列5-Vue 中动画如何实现？#＞

Vue实现动画有两种方法：第一种：把要做动画的元素添加到transition标签中，其中name可以定义前缀，然后在style里添加动画样式第二种：用animate.css第三方库来实现动画，第一步引入库，第二步在transition里写入动画对应的类，animated可以在下边写：duration定义事件，离开时间，进入时间。这样就可以不用在样式里边写入内容...

2021-11-07 22:15:45 177

原创 Vue相关合集：＜系列4-Vue 项目优化的解决方案都有哪些？＞

我一般会从三个层面优化vue项目：第一个代码层面的优化：1.对于图片过多的页面，为了加快页面加载速度，在项目中使用 Vue 的 vue-lazyload 插件2.对于路由过多，加载的资源过多的情况下，就把不同路由对应的组件分割成不同的代码块，使用路由懒加载3.还可以利用keep-alive将不活动的组件缓存起来。在组件切换过程中将状态保留在内存中，防止重复渲染dom，减少加载时间及性能消耗第二个从webpack层面的优化：1.在请求较大的图片资源的时候，加载会很慢，这时候我们可以用.

2021-11-07 16:48:26 225

原创 Vue相关合集：＜系列3-Vue 如何去除 URL 中的#＞

vue-router默认hash模式，在路由加载的时候，项目中的url会自带#，使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。如果不想要这种默认带#的hash模式，可以用路由的history模式，这种模式充分的利用history.pushState API来完成URL跳转而无需重新加载页面。注意：当我们启用 history 模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现 404 的情况，这时候就需要服务端增加...

2021-11-06 21:39:20 457

空空如也

空空如也