- 博客(62)
- 收藏
- 关注
RSS订阅原创 npx使用教程及作用
Node 自带 npm 模块，所以可以直接使用 npx 命令。万一不能用，就要手动安装一下。$ npm install -g npx调用项目安装的模块npx 想要解决的主要问题，就是调用项目内部安装的模块。比如，项目内部安装了测试工具 Mocha。$ npm install -D mocha一般来说，调用 Mocha ，只能在项目脚本和 package.json 的scripts字段里面， 如果想在命令行下调用，必须像下面这样。项目的根目录下执行$ node-modules/.b.
2022-01-07 14:33:05
865
原创 CSS背景图总结
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ width: 1024px; height: 724px; margin: 0 auto; /*设置背景样式*/ background-color: #b...
2022-01-06 17:01:39
468
原创 CSS有关定位总结(绝对定位、相对定位、固定定位)
定位：指将指定元素拜访到页面任意位置可以通过定位任意的摆放元素通过position属性来设置元素的定位可选值：static ：默认值，元素没有开启定位relative: 开启元素的相对定位absolute：开启元素的绝对定位fixed: 开启元素的固定定位当开启了元素的定位(position属性值是一个非static值)时，可以通过left right top bottom 四个属性来设置元素的偏移量。* left: 元素相对于其定位位置的左侧偏移量* right: 元素相对于器..
2022-01-06 16:48:28
421
原创 CSS解决盒子高度塌陷问题
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样将会导致页面布局混乱。所以在开发中一定要避免出现高度塌陷的问题。方法一：我 们可以将父元素的高度写死，以避免塌陷的问题出现，但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。方法二：根据W3C的标准，在页面
2022-01-05 17:08:47
1502
原创 css有关内联元素的盒子总结
一、特点总结：内联元素不能设置width和height内联元素可以设置水平内边距、垂直方向内边距(垂直方向内边距不会影响页面布局)内联元素可以设置边框，但是只有垂直的的边框不影响页面的布局内联元素可以设置水平外边距，但是不支持垂直外边距二、内联元素与块元素转换5. display样式可以修改元素类型;可选值：inline : 可以将一个元素作为内联元素显示block ：可以将一个元素设置块元素显示inline-block : 将一个元素转换为行内块元素可以使一个元素既有悍内元素特点
2022-01-05 15:58:12
368
原创 css文本样式总结
1). text-transform 可以用来设置文本大小写可选值：none 默认值，capitalize 单词的首字母大写，通过空格来识别uppercase 所有的字母都大写lowercase 所有的字母都小写2). text-decoration 可以用来设置文本的修饰可选值：none: 默认值underline 为文本添加下划线overline 为文本添加上划线line-through 为文本添加删除线3). letter-spacing 指定字符间距4). word-spa
2022-01-05 15:35:33
112
原创 CSS中设置行间距的方法
在CSS中并没有为我们提供直接设置行间距的方式我们只能通过设置行高来间接设置行间距，行高越大行间距越大使用line-height来设置行高行间距 = 行高 - 字体大小通过 light-height可以间接的设置行高//line-height 可以简介设置的行高//可以接收的值：// 1. 直接接收一个大小// 2. 可以指定一个百分数，则会相对于字体去计算行高// 3. 可以直接传一个数值，则行高会..
2022-01-05 14:43:08
17443
2
原创 HTML中的列表总结
列表分类无序列表、有序列表、定义列表无序列表<ul><li></li><li></li><li></li></ul>//type实行可以修改无序列表的项目符号// disc:默认值，是新的圆点// square:实心的方块// circle ：空心的圆有序列表<ol><li></li><li></li><l
2022-01-05 13:38:25
96
原创 javascript封装一个时间格式化函数
// 定义格式化时间函数function dateFormat(dateStr){ const dt = new Date(dateStr) const y = dt.getFullYear(); const m = dt.getMonth() + 1; const d = dt.getDate(); const hh = padZero(dt.getHours()); const mm = padZero(dt.getMinutes());
2022-01-05 13:03:27
424
原创 关于Flex布局、Flex容器
Flex容器的属性1). flex-direction:①决定主轴的方向(即项目的排列方向)②参数：row | row-reverse | column | column-reverse2). flex-wrap属性3). flex-flow4). justify-contentjustify-content属性定义了项目在主轴上的对齐方式。5). align-itemsalign-items属性定义项目在交叉轴上如何对齐。6).align-contentalign-cont
2022-01-05 00:20:54
138
原创 swiper基本使用
swiper基本使用第一步 官方下载swiper压缩包第二步 取js 和 css 代码来示例第三步：引入官方配置相应代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten
2021-12-26 15:39:43
909
原创 mockjs模拟数据的使用
MOCKjs模拟数据使用方法如果想mock数据，需要用到一个插件mockjs使用步骤1） 在项目当中src文件夹中创建mock文件夹2） 第二步准备JSON数据（mock文件夹中创建相应的JSON文件）(切记JSON文件需要格式化一下，别留有空格，不然跑不起来)3） 把mock数据需要的图片放置到public文件夹中【public文件夹在打包的时候，会把相应的资源原封不动打包到dist文件夹】4） 创建mockServer.js通过mockjs插件实现模拟数据5） mockServer.js
2021-12-26 11:41:11
376
原创 Node.js学习(持续更新)
Node.js简介1. 什么是Node.jsNode.js是一个基于 Chrom V8 引擎的 JavaScript 运行环境。2.Node.js中的JavaScript 运行环境注意：① 浏览器是JavaScript的前端运行环境。② Node.js 是 JavaScript 的后端运行环境。③ Node.js 中无法调用DOM和BOM等浏览器内置API3.Node.js可以做什么Node.js环境的安装1.区分LTS版本和Current版本的不同2. 查看已安装的Node.js的
2021-12-25 19:42:47
1152
原创 lodash引伸出的按需引入方法
在使用lodash中的方法函数时，如果我们市全盘引入lodashimport _ from "lodash"则使用的时候，比如 methods: { changeIndex:_.throttle(function(index){ this.currentIndex = index },50), }按需引入lodash中的方法函数import throttle from "lodash/throttle"使用的时候不用再写 ._ 了 meth.
2021-12-24 21:04:35
1052
原创 函数节流的理解
函数节流就是，比如在点击按钮，可以控制5秒之内无论点击多少次，服务器只返回一次请求，在这五秒之内浏览器就有足够的时间去反应了，达到了节流的目的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="
2021-12-24 20:44:07
377
原创 函数防抖的理解
如何进行防抖就是比如在输入框输入完用户想搜索的内容，服务器才返回相关匹配。而不会出现，用户在输入的过程中每一个字服务器都会返回内容代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"
2021-12-24 17:32:09
89
原创 解决vue项目中搜索框多次点击产生的报错——重写push和replace
解决vue项目中搜索框多次点击产生的报错——重写push和replacevue-router.esm.js?ac56:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/search?k=ASD”.如上报错解决办法：在路由index.js中重写push或者replace如下：//为解决多次点击搜索按钮产生的报错需要重写push或replace方法//
2021-12-21 15:59:23
875
1
原创 vue实战项目(每日更新打卡)
vue-cli初始化项目及介绍初始化脚手架1.1 说明Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。最新的版本是 4.x。文档: https://cli.vuejs.org/zh/。1.2 具体步骤第一步（仅第一次执行）：全局安装@vue/cli。npm install -g @vue/cli第二步：切换到你要创建项目的目录，然后使用命令创建项目vue create xxxx第三步：启动项目npm run serve备注：如出现下载缓慢请配置 npm 淘宝镜
2021-12-20 10:39:20
7508
原创 Vue UI 组件库记录 常见
Vue UI 组件库（一）移动端常用 UI 组件库Vant https://youzan.github.io/vantCube UI https://didi.github.io/cube-uiMint UI http://mint-ui.github.io（二）7.2 PC 端常用 UI 组件库4. Element UI https://element.eleme.cn5. IView UI https://www.iviewui.coElementUI组件的全部引
2021-12-19 21:50:45
101
原创 Vue之路由route技术
一、路由的基本使用1、安装vue-router，命令：npm i vue-router2、应用插件：Vue.use(VueRouter)3、编写router配置项://该文件专门用于创建整个应用的路由器import VueRouter from 'vue-router'//引入组件import About from '../components/About'import Home from '../components/Home'//创建并暴露一个路由器export default
2021-12-18 21:44:19
563
2
原创 关于js函数中return的有无区别
js为什么有的方法前要加return，有的不用？1 方法需要返回值2 需要停止执行后面的代码3 不需要提交或跳转的时候如果仍然不理解的话，那就在脑袋里构思两种情况：1.不加return 函数仅仅对某个事件进行处理，不给出返回值，表象上像是没有进行运行一样，通过console.log或者alert来打印，控制台和屏幕上没反应2.加return 函数运行过后，通过console.log或者alert，会有具体的显示，能够表明函数运行过加return和不加return的区别;1.如果你不仅需要函数
2021-11-28 15:04:30
836
原创 npm nvm nrm cnpm yarn npx 的介绍
1.npmnpm全称是【node package management】，是nodejs中内置的软件包管理工具，顾名思义，他是用来管理管理的软件。当你下载nodejs 的时候默认就有npm了。它是世界上最大的软件注册表，但是但是遗憾的是，国内用npm的时候有时候会很慢。2.nvmnvm是个版本管理工具，举例来说，你的手上有好几个nodejs的项目，每个项目所依赖的nodejs版本都不相同。这样管理起项目来就非常麻烦。nvm的诞生就是为了管理这些nodejs的版本，它可以让你在不同的nodejs版本之间
2021-11-28 08:24:20
276
原创 vuex学习笔记(持续更新中)
5.1理解vuex5.1.1vuex是什么概念：专门在Vue中实现集中式状态(数据)管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理(就是 读/写)，也是一种组件间通信方式，且适用于任意组件间的通信Github 地址：https://github.com/vuejs/vuex5.1.2什么时候使用Vuex1)、多个组件依赖于同意状态来自不同组件的行为需要变更同一状态actions mutations state 都是对象数据类型这三个数据都是经过store领导
2021-11-27 21:19:44
566
原创 Node.js中的exports和module.exports 以及 ES6中 export 和 export default 解析
Node.js模块Node.js里的模块遵循 CommonJS规范CommonJS定义模块分为: 模块标识(module)、模块定义(exports)、模块引用(require)先解释 exports 和 module.exports:在一个node执行一个文件时，会给这个文件内生成一个 exports和module对象，而module又有一个exports属性。他们之间的关系如下图，都指向一块{}内存区域。exports = module.exports = {};演示代码
2021-11-27 17:09:02
1106
原创 vue中作用域插槽
vue中作用域插槽理解：数据在组件的自身但根据数据生成的结构需要组件的使用者来决定：代码：- Category.vue(子组件中)<template> <div class="category"> <h3>{{ title }}分类</h3> <!-- 定义一个默认插槽，那么App.vue中相应的组件标签里标签体的内容会往这个插槽中放置 --> <slot :game="games"&
2021-11-26 17:47:13
347
原创 vue具名插槽
vue具名插槽1、 具名插槽就是给每一个插槽增加了一个name属性让每一个插槽都有自己的名字，这样方便，父组件中的配置按照相应的地方插入（插中间的插中间，插下面的插下面）1)、App.vue代码：<template> <div class="container"> <Category title="美食"> <img slot="center" src="D:\gr信息\图集\2.jpg" alt="1" /> <
2021-11-26 17:11:43
673
原创 vue默认插槽
默认插槽的理解：就是利用 完全标签() 在它完全标签里写相应的配置(比如：我们需要的功能)然后利用 默认插槽这个标签 把写好的会放到这个插槽里去(这个插槽一般式存在于子组件的，所以就可以把父组件写好的东西给子组件了)关于写在完全标签里的配置的样式我们既可以写在父组件又可以写在子组件中(因为，1、样式写在父组件时候，样式已经被渲染好了然后放入子组件；2、样式写在子组件时，把配置放入插槽，而插槽所在子组件有css样式会给我们的配置渲染的)2)、代码片段①Category.vue&l
2021-11-26 12:53:57
1513
1
原创 vue写一个github搜索案例
vue写一个github搜索案例1)App.vue<template> <div class="container"> <Search /> <List /> </div></template><script>import Search from "./components/Search.vue";import List from "./components/List";export
2021-11-25 20:50:13
100
原创 es6...三点运算符的用法
1）举例：let arr = [1,2,3,4]console.log(…arr) //arr的值为1 2 3 42）作用一种function a(){info:{ a:"xi", b:"aa", c:"aas", }}function b(){info1:{ a:"xi", e:"da", f:"as", }}console.log({...a.info,...b.info1})//表示 把a函数info中所有数据摊开和
2021-11-25 20:17:09
169
原创 ES6中模板字符串
1）总而言之就是运用模板字符串对 普通的字符串 和 js代码 进行简洁的连接并且让 js代码保持可以被解析器解析// 将 字符串 “https://api.github.com/search/users?q=” 和 this.keyWord js代码连接起来了。 axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then( response => {
2021-11-25 17:45:44
171
原创 import和link引入公共资源库的区别
1）在App.vue中引入bootstrap<script>import "./assets/css/bootstrap.css";//import引入公共样式方式含有检查，会检查到bootstrap中含有我们没有用到的第三方库，就会报错export default { name: "App",};</script>如果我们整个项目中存在没有用到bootstrap中第三方资源库的时候，import会检查到并且报错，然而link引入就不会。2). 对于整个项
2021-11-25 17:04:02
266
原创 AJAX设置CORS响应头实现跨域
server.js：//代码片段：app.all("/cors-server",(request,response)=>{ //设置允许所有跨域请求页面 response.setHeader("Access-Control-Allow-Origin","*"); //设置允许所有请求头信息 response.setHeader("Access-Control-Allow-Headers","*"); //设置允许所有请求方法 response.
2021-11-24 20:47:03
333
原创 AJAX同源策略
AJAX同源策略1). server.js//引入express框架const express = require('express');//创建express对象const app = express();//创建路由规则app.get('/home', (request, response) => { //响应一个页面,这样会获取index.html中的数据 response.sendFile(__dirname + '/index.html');})
2021-11-23 21:27:43
316
原创 fetch发送AJAX请求
fetch发送AJAX请求1). server.js//1.引入expressconst express = require('express');//2.创建应用对象const app = express();//3.创建路由规则//request 是对请求报文的封装//response 是对响应报文的封装//fetch服务app.all('/fetch-server', (request, response) => { //'/server'就相当于一个url
2021-11-23 20:31:42
91
原创 axios发送AJAX请求
crossorigin = “anonymous” : 跨源请求属性设置，（annonymous:匿名）加了这个属性之后向被加的那个资源发送请求时当不会携带当前域名下的cookienpm 被全球超过1100完开发人
2021-11-23 20:08:22
329
1
原创 认识学习NPM笔记（持续更新中）
NPM介绍npm本身也是一个包，并且里面有很多包，比如BootStrap、jQuery、vuecli等都被上传到npm这个包中（就是包管理器）Node.js内置npmNPM安装1）可以在官网: http://nodejs.cn 下载nodejs，安装好了nodejs默认就安装了npm2）查看自己是否安装并且完成node的环境配置成功用 ‘管理员身份’ 打开命令窗口，输入图片的代码，如果都出现相应版本号则表示安装成功①更新npm的一个命令：npm install npm -g (用n
2021-11-22 11:47:48
395
原创 node:internal/modules/cjs/loader:936错误的解决办法
错误如下原因，npm 安装包有误，少了一部分模块，我当时是去nodejs官网下载了相应版本的压缩包zip 然后解压出来把新的文件代替我之前缺少模块的文件。这个方法可以解决问题哦
2021-11-21 15:37:01
19792
5
原创 AJAX请求重复发送
AJAX请求重复发送1).html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2021-11-20 12:50:52
230
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人