拾辞-CSDN博客

原创 Windows下安装Nginx

Nginx前言：是一个高性能的http和反向代理服务器，也是一个IMAP/POP3/SMTP服务器，他也是一种轻量级的Web服务器，可以作为独立的服务器部署网站。它高性能和低消耗内存的结构受到跟多公司青睐，比如说淘宝网站架设安装步骤1.下载Nginx下载地址：http://nginx.org/en/download.html （Nginx官网）2.下载之后，解压到指定的目录，就可以看到以下目录3.在目录上面直接输入cmd回车确认在cmd控制台直接输入start nginx然后在浏览器页面直

2021-06-07 11:19:28 234

原创 webpack打包优化

webpack打包作用提高打包速度减小项目体积、提高首屏加载速度提高用户体验（骨架屏）webpack打包操作主要在项目开始时、项目结束后（打包前）两个阶段进行项目开始时：配置proxy跨域配置alias别名一、配置proxy跨域module.exports = {publicPath: "./",devServer: { open: true,// 自动启动浏览器 proxy: { "/api": { target: "http://47.115.8

2021-06-06 18:57:22 162

原创 vue-router路由守卫以及鉴权

首先我们先了解路由守卫：路由守卫有点类似于ajax的请求拦截，就是请求发送之前先给你拦截住一些事情之后再去发送请求，同样这里的理由守卫意思差不多；简单理解为就是你进路由之前，首先把你拦住，对你进行检查；当然，路由守卫不仅仅只是在你进入之前拦住你，还有其他钩子函数进行其他操作；vue-reuter提供了三大类钩子函数来实现路由守卫1.全局钩子函数（beforEach，afterEach）2.路由独享的钩子函数（beforeEnter）3.组件内的钩子函数（beforerouterEnter，befo

2021-06-06 18:44:56 6005 2

原创 vant按需引入

vant-ui有很多引入方式，推荐自动按需引入组件，这样有利于项目打包优化，减少项目体积流程：首先安装vantcnpm i vant --save安装babel-plugin-import 插件cnpm i babel-plugin-import -Dbabel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。在.babelrc 中添加配置{“plugins”: [[“import”, {“libraryName”

2021-06-03 21:31:26 146

原创多环境变量配置

什么是多环境变量？我们在vue项目开发中，项目在运行时会根据启动的指令来运行不同的环境，在不同的环境中，我们配置对应所需的变量来满足我们的开发需求，称为多环境变量。环境一般分为开发环境，测试环境，生产环境配置流程1.我们在根目录下的package.json 在里的 scripts 配置 serve stage build，通过 --mode xxx 来执行不同环境通过 npm run serve 启动本地 , 执行 development通过 npm run stage 打包测试 , 执行 s

2021-06-03 21:26:29 137

原创去拿儿项目总结

准备vue-cli是Vue的脚手架工具，通过vue-cli，可以快速构建一个vue项目，并且vue-cli自带webpack的各种配置。//3.0 4.0版本npm install -g vue/clivue create project-name…//2.0版本在4.0版本下运行npm install -g @vue/cli-initvue init webpack project-name项目结构build：项目的webpack配置文件config：针对于开发环境和线上环境的配置文

2021-06-03 21:06:06 98 1

原创 css3的transition

一、语法transition: property duration timing-function delaytransition属性是个复合属性，她包括以下几个子属性：transition-property ：规定设置过渡效果的css属性名称transition-duration ：规定完成过渡效果需要多少秒或毫秒transition-timing-function ：指定过渡函数，规定速度效果的速度曲线transition-delay ：指定开始出现的延迟时间默认值分别为：all 0 ea

2021-06-02 08:04:15 183

原创 vue keep-alive总结

keep-alive:keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transitio 相似，keep-alive 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。常见的用法：// 组件export default { name: 'test-keep-alive', data () { return {

2021-06-02 07:53:40 134

转载 js的事件委托

事件委托（事件代理）原理：简单的说就是将事件交由别人来执行，就是将子元素的事件通过冒泡的形式交由父元素来执行。应用场景在vue中事件委托我们经常遇到vue中v-for一个列表，列表的每一项都绑定了@click处理事件。我们都知道绑定这么多监听，从性能方面来说是不太好的。那我们我们可以通过把每个item的click事件委托给父元素的形式来实现。获取item元素中title值为edit的id//html<table @click="edit"> <tr v-for="item

2021-06-01 08:29:13 68 1

原创 js的闭包

什么是闭包？闭包的优缺点？闭包（closure）是javascript的一大难点，也是它的特色。很多高级应用都要依靠闭包来实现。1、变量作用域要理解闭包，首先要理解javascript的特殊的变量作用域。变量的作用域无非就两种：全局变量和局部变量。javascript语言的特别之处就在于：函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的局部变量。注意点：在函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明的是一个全局变量！2、如何从外部读取函数内部的局部变量

2021-05-30 20:02:39 65

原创 var let const 区别

1.const定义的变量不可以修改，而且必须初始化。1 const b = 2;//正确2 // const b;//错误，必须初始化 3 console.log('函数外const定义b：' + b);//有输出值4 // b = 5;5 // console.log('函数外修改const定义b：' + b);//无法输出 2.var定义的变量可以修改，如果不初始化会输出undefined，不会报错。1 var a = 1;2 // var a;//不会报错3 console.log

2021-05-30 19:51:48 117

原创 js自由变量、变量提升

自由变量概念：当前作用域没有定义的变量变量提升1.JS代码执行顺序我们直觉上会认为JS的代码在执行时是由上到下一行一行执行的，但实际并不完全正确，下面的例子会证明：a = 'haha'var aconsole.log(a)上面的代码会输出什么呢？如果按照我们认为的由上到下一行一行执行，那么应该输出undefined，但是实际结果是’haha’。接着再看一个代码：console.log(a)var a = 'haha'那这个输出的是什么？鉴于上面代码表现出来的非自上而下的特

2021-05-28 14:28:33 113

原创作用域、作用域链

作用域定义：作用域就是变量和函数的可访问范围，控制着变量和函数的可见性与生命周期，在JavaScript中变量的作用域有全局作用域和局部作用域。全局作用域：代码在程序的任何地方都能被访问，window 对象的内置属性都拥有全局作用域局部作用域（又称函数作用域）在固定的代码片段或函数体内起作用作用域链一个变量在当前作用域被使用但在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。...

2021-05-28 14:17:26 88 1

原创 js中new创建实例对象的过程

使用new关键字调用函数（new ClassA(…)）的具体步骤：1. 创建空对象；var obj = {};2. 设置新对象的constructor属性为构造函数的名称，设置新对象的__proto__属性指向构造函数的prototype对象；继承函数的原型b.proto=a.prototype3. 使用新对象调用函数，函数中的this被指向新实例对象：a.call(obj,参数)4. 将初始化完毕的新对象地址，保存到等号左边的变量中，最后返回obj对象return obj...

2021-05-28 14:03:54 371

原创原型、原型链

一、prototype在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。例如：function Person(age) { this.age = age }Person.prototype.name = 'kavin'var person1 = new Person()var person2 = new Person()console.log(person1.name) //kavinconsole.log(person2.n

2021-05-28 07:55:40 55

原创 this的指向问题（call/apply/bind）

this是什么？this一般存在于函数中，表示当前函数的执行上下文，在一个函数调用的时候，会传递this和arguments两个隐藏属性，在不同函数、不同情况下，this的指向是不固定的。不同情况下的this指向1、在浏览器中，在全局范围内this 指向window对象 function fn() { console.log(this); // window } fn(); // window.fn（),此处默认省略window2、在普通函数中，t

2021-05-28 07:49:14 84

转载数组常用的方法（es4,es5,es6）

ES4join()将数组转换为字符串，括号里的参数为拼接字符，默认的是逗号“ ，”注意要加引号“” 例：var arr=[1,2,3]conso.log(arr.join())//打印出1，2，3console.log(arr.join("\"))//打印出1\2\3console.log(arr)//打印出[1,2,3] 原数组不发生改变且从上可知，原数组不变push()将指定内容添加到数组末尾，并返回修改后数组的长度，原数组发生改变。例：var arr=["a","b","

2021-05-27 08:07:12 87

原创 js的arguments

众所周知，js是一门相当灵活的语言。当我们在js中在调用一个函数的时候，我们经常会给这个函数传递一些参数，js把传入到这个函数的全部参数存储在一个叫做arguments的东西里面，那么这到底是什么东西？在一个函数调用的时候，每次都会传递进两个隐式参数，一个是this，一个是argumentsthis函数的上下文对象this，是一个指针，时刻指向你这个实例本身。一、argument是什么？函数体内的arguments非常特殊，实际上是所在函数的一个内置类数组对象，可以用数组的[i]和.length。

2021-05-27 07:55:43 98

原创 js的数据类型和数据类型判断

js六大数据类型：number、string、object、Boolean、null、undefinedstring：由单引号或双引号来说明，如"string"number：什么整数啊浮点数啊都叫数字，你懂的~Boolean: 就是true和false啦undefined：未定义，就是你创建一个变量后却没给它赋值~null: 故名思久，null就是没有，什么也不表示object: 这个我也很难解释的说。就是除了上面五种之外的类型1.Number类型Number类型包含整数和浮点数（浮点数数

2021-05-25 08:07:16 132

原创深拷贝

1.深拷贝在了解浅拷贝和深拷贝之前，我们先了解一下js的数据类型js的数据类型分为两种一种是基本数据类型：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）一种是引用数据类型：对象(Object)、数组(Array)、函数(Function)基本类型的变量是存放在栈内存，引用数据类型是放在堆内存中的，基本数据类型保存的是值，而引用数据类型一般保存的是对象的地址。如果我们单纯的复制的话，可能就只是复制对象的地址，那么这就是浅拷贝，

2021-05-23 20:01:48 99 1

原创 vue-router （两种路由模式、编程式/组件式、如何传参(优缺点)）

路由原理两种模式1.路由就是用来解析URL实现不同页面之间的跳转hash模式hash模式：在浏览器中符号的“#”，以及#后面的字符称之为hash，用window.location.hash读取；特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。h

2021-05-23 19:42:53 730 4

原创 vuex（五大核心，高级用法—辅助函数，数据持久化）

我们来说说什么是vuex1.什么是vuexVuex 是一个专为Vuex.js应用程序开发的状态管理模式，他由五部分组成：分别是：state，actions，mutations，modulse，getters2.vuex的五大核心1.state：存放状态存放公共数据，是一个仓库，任何组件都可以调用里面的数据。使用：在state中直接声明数据即可。2. getters：vuex中的计算属性相当于组件中的计算属性，当state中的数据发生改变，getters中的数据也回跟着改变使用：在v

2021-05-23 19:15:01 312 2

原创 vue的生命周期函数

1.生命周期让我们在控制整个vue时更容易形成更好的逻辑，可以分为八个阶段分别有：创建前/创建后创建前：beforeCreate() 表示实例完全被创建出来之前，vue 实例的挂载元素$el和数据对象 data 都为 undefined，还未初始化创建后：Created() 数据对象 data 已存在，可以调用 methods 中的方法，操作 data 中的数据，但 dom 未生成，$el 未存在。挂载前/挂载后挂载前：beforeMount() vue 实例的 $el 和 data 都已初始

2021-05-20 16:35:25 80 1

原创 vue的组件通信(父传子，子传父，兄弟通信)

前言：首先我们得了解子组件，组件是页面的一部分，可以理解成为封装的html子组件和放在views底下的区别：页面在坑里加载，而子组件是页面的一部分方法一：父组件向子组件传值首先在使用子组件的标签上写一个自定义属性属性的值就是要传递的值到了子组件用props接收是一个数组，注意不要忘了加“”，props接收到的数据跟data 的用法是一样的我们来一个最简单的例子：父组件//父组件<template> <div class=""> <div:aaa

2021-05-20 15:42:10 122 1

原创黑马优购分类页面

文章目录1.1分类效果图1.2网络请求跟数据解析1.1.1数据解析1.1.2请求数据，处理数据1.3分类布局1.3.1引入搜索公共组件1.3.2页面左右分割1.3.3左侧菜单列表1.3.4右侧商品子分类1.4点击菜单切换商品内容1.4.1选中菜单添加`active`样式1.4.2动态切换右侧商品内容1.5切换菜单，右侧列表回顶部1.5.1 声明`scrollToTop`属性1.5.2 处理菜单点击事件1.5.3 添加`scrollTop`属性1.1分类效果图首先我们看我们要实现的效果1.2网络请求跟

2021-05-17 20:11:11 715 3

原创黑马优购商城首页的实现

文章目录1.1效果图1.2搜索框1.2.1新建组件1.2.2编写组件1.2.3引用组件1.2.4使用组件1.2.5效果1.3轮播图1.3.1获取网络接口1.3.1编写轮播图1.4 [Promise请求](https://blog.csdn.net/mszLOVEyjj/article/details/116767747)1.5分类导航1.51声明分类导航数组1.5.2 构建网络请求1.5.3分类导航编写1.5.41.6楼层1.6.1声明楼层数组1.6.2构建网络请求1.6.3编写楼层代码1.6.4效果图![

2021-05-17 19:30:35 1017 5

空空如也

空空如也