wushen的博客

原创 yarn -v和vue -V报错环境变量配置

yarn -v报错：终端(Win + R) 输入 yarn global bin ➡ 复制得到的路径 ➡ 鼠标右键此电脑(或计算机) ➡ 属性 ➡ 高级系统设置 ➡ 环境变量 ➡ 系统变量 下的 Path ➡ 编辑 ➡ 新建，粘贴复制的路径。查看目录，找到 prefix 目录下对应的地址。vue -V报错: cmd 输入。安装 @vue/cli。

原创 yarn无法加载文件和‘vue-cli-service‘ 不是内部或外部命令解决方法

1.运行 Windows PowerShell（管理员），执行命令set-ExecutionPolicy RemoteSigned更改 PowerShell 执行策略，过程中提示询问是否要更改执行策略?导致此错误的原因是，PowerShell 执行策略，默认设置为Restricted不加载配置文件或运行脚本。3.使用get-ExecutionPolicy命令，可查看当前 PowerShell 执行策略类型。2.设置完毕，检验执行yarn config get registry命令，可正常加载执行脚本。

原创 JS字符串API: slice、split、JSON.stringify、trim、concat 、indexOf...

JS字符串API: slice、split、JSON.stringify、trim、concat 、indexOf...

原创 JS数组API: push、pop 、unshift 、splice、filter、reduce、concat、 forEach...

JS数组API: push、pop 、unshift 、splice、filter、reduce、concat、 forEach...

原创 JS功能实现

这里写目录标题轮播图移动端轮播图按下回车发表评论tab栏切换全选按钮轮播图 <style> * { box-sizing: border-box; } .slider { width: 560px; height: 400px; overflow: hidden; } .slider-wrapper { width: 100%; height: 320px; }

原创 远程仓库的克隆和上传

解决: 第一步. C盘->用户->电脑用户名->.gitconfig->用vscode打开删除信息,然后保存即可 . 第二步.电脑搜索找到 凭据管理器->windows凭据->编辑普通凭据改成自己用户名密码。git status–> git add . --> git status -->git commit -m ‘项目完成进度 eg: layout左侧菜单栏完成’–>git pull–>git push。要创建项目文件夹下打开Git Bush Here --> git clone 远程仓库地址。

原创 Vue项目创建 配置路由

App.vue内容清除,保留template #app router-view, views文件夹里面的About和Home删除 > router.js里面import HomeView from '…/views/HomeView.vue’删除 > routes数组里面的路由对象全部删除。

原创 CSS设置背景background

background-size可以省略，如果不省略，/background-size必须紧跟在background-position的后面。background-attachment决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。img，作为网页内容的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片。scroll：此关键属性值表示背景相对于元素本身固定， 而不是随着它的内容滚动。注意：如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的。

原创 将position设置为absolute/fixed元素的特点

 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度。 定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度。◼ 如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性。◼ 如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性。◼ 3.绝对定位元素 -> width: 包裹内容。

原创 flex属性全解

 当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效。◼ flex 是 flex-grow || flex-shrink || flex-basis 的简写,flex 属性可以指定1个，2个或3个值。◼ 如果所有 flex items 的 flex-shrink 总和超过 1，每个 flex item 收缩的 size为。flex-flow 属性是 flex-direction 和 flex-wrap 的简写。

原创 CSS知识梳理

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）, 但是绝对定位（固定定位）会压住下面标准流所有的内容。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。: 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

原创 HTML知识梳理

表单元素包含三大组 , input输入表单元素 , select下拉表单元素 , textarea文本域表单元素这三组表单元素都应该包含在form表单域里面,并且有name 属性。

转载 Vue中 Axios 的封装和 API 接口的管理

axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。一、axios的封装在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库。如果还对axios不了解的，可以移步axios文档。安装

原创 Vue 父子组件间通信

Vue 父子组件间通信 :props 父组件向子组件传递数据$emit 自定义事件slot 插槽分发内容

原创 webpack配置px自动转为rem

安装amfe-flexible（用于设置 rem 基准值）yarn add amfe-flexibleor npm i -S amfe-flexible使用amfe-flexible// src/main.js 中引入 amfe-flexibleimport 'amfe-flexible'安装 postcss-pxtorem（postcss-pxtorem是一款 postcss 插件，用于将单位转化为 rem）注意 版本太高会报错，需要安装指定版本npm install postc

原创 mock express 的使用方法

mock模拟接口，使用默认的devserve 完成，考虑到这边有后台提供的模拟数据，随不需要自己随机生成数据，如果说有需要自己随机生成数据，可以使用[mockjs](Mock.js (mockjs.com))写mock接口在src/目录下新建mock目录，存放所有的mock文件在src/mock/目录下新建home.jshome.js mock 文件内容/** * @desc 处理返回banner 数据 * @param { object } request express 请.

原创 vue cli项目 router vuex 配置

文章目录安装vue cli创建项目路由配置新建页面文件创建路由使用vue路由使用vant UI组件库创建storeVue CLI 是一个基于 Vue.js 进行快速开发的完整系统，官网 [vue cli ](介绍 | Vue CLI (vuejs.org))安装vue clinpm install -g @vue/cli-service-global创建项目# 创建项目vue create project name# 选择默认选项 完成安装# 进入项目目录cd project

原创 axios实际开发使用及封装

文章目录安装及使用`axios` 封装完整代码 易用、简洁且高效的http库， promise封装，可拓展性强， [axios传送门](axios/axios: Promise based HTTP client for the browser and node.js (github.com))安装及使用直接cdn引入<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

原创 axios封装

一、axios的功能特点在浏览器中发送 XMLHttpRequests 请求在 node.js 中发送 http请求支持 Promise API拦截请求和响应转换请求和响应数据支持多种请求方式:axios(config)axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios.post(url[, data[, config]])axi

转载 Vuex 中的 Map 映射方法

映射方法映射方法可以让我们使用 Vuex 的方法是更加简洁会减少大量的代码！！！mutations 和 actions 需要映射到 methods 里，而 state 和 getters 则需要映射到 computed 里一、普通映射export default new Vuex.Store({ state: { str: "我是映射过去的 state 方法" }, mutations: { fun1(){ console.log("我是映射过去的 mutat

转载 vuex action中{commit}解构赋值的写法

actions中提交mutations的方法我们普通用法是context.commit(‘方法名’,‘参数’)简写可以这样写 actions: { //异步更新state decrease({commit,state}){ let count = state.count-1 setTimeout(() => { commit(types.DECREASE, count) }, 2

转载 vue-router里面的linkActiveClass用法

每次路由切换成功进入激活状态在点击导航栏的时候，让被点击的那一个有背景色，其他的没有背景色？如何做？在路由里面设置 linkActiveClass: ‘is-active’,const router = new VueRouter({ routes, linkActiveClass: 'is-active'});然后在css里面设置.is-active{ background:red;}这样被点击激活的时候就会被加上is-active这个class了。注意如果没

转载 ES6扩展运算符(...)

1 含义扩展运算符（ spread ）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5[...document.querySelectorAll('div')]// [<div>, <div>, <div>]该运算符主要用于函数调用。function push(ar

转载 Vuex namespaced: true的作用

vuex中的store分模块管理，需要在store的index.js中引入各个模块，为了解决不同模块命名冲突的问题，将不同模块的namespaced:true，之后在不同页面中引入getter、actions、mutations时，需要加上所属的模块名1、声明分模块的store时加上namespaced:true// initial stateconst state = { userId:'',//用户id userName:'',//用户名称 token:'',//token per

转载 vue项目搭建步骤以及一些安装依赖包

一． vue-cli初始化全局安装 vue-clinpm install --global vue-cli创建一个基于 webpack 模板的新项目vue init webpack my-project安装依赖cd my-projectnpm install (换源安装: npm install --registry https://registry.npm.taobao.org )启动： npm run dev打包： npm run build二． 安装额外的依赖包两种依赖包的

转载 Vue Devtools_5.3.4_chrome扩展插件下载_极简插件

https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd

转载 vue-cli3+px转rem+vant

1.安装lib-flexible（用于设置 rem 基准值）npm i -S amfe-flexible2.在main.js文件中引入lib-flexibleimport ‘amfe-flexible’3、安装postcss-pxtorem（postcss-pxtorem是一款 postcss 插件，用于将单位转化为 rem）npm install postcss-pxtorem --save-dev4、在public/index.html加入meta标签<meta name="view

转载 router-link属性 tag replace active-class go

vue-route跳转方法有两种，第一种方法是使用内置的<router-link>组件，它会被渲染成一个 a 标签<template > <div> <h1>首页</h1> <router-link to="/about>跳转到about</router-link></template>它的用法与一般的组件一样，to是一个prop，指定需要跳转的路径，当然.

原创 JS高阶函数 filter map reduce

JavaScript权威指南(第7版) P153 - 155 知识点编程范式:命令式编程/声明式编程编程范式:面向对象编程(第一公民:对象)/函数式编程(第二公民:函数)JS高阶函数(参数是函数)的使用filter函数的使用filter中的回调函数有一个要求：必须返回一个Boolean值true:当返回true时，函数内部会自动将这次回调的n加入到新的数组中false:当返回false时，函数内部会过滤掉这次的n需求:取出所有小于100的数字常规写法const nums = [10,

转载 JS闭包使用场景

文章目录1.返回值（最常用）2.函数赋值3.函数参数4.IIFE（自执行函数）5.循环赋值6.getter和setter7.迭代器（执行一次函数往下取一个值）8.首次区分（相同的参数，函数不会重复执行）9.缓存1.返回值（最常用）//1.返回值 最常用的function fn(){ var name="hello"; return function(){ return name; }}var fnc = fn();console.log(fnc())//h

转载 apply()与call()

apply()与call()的区别JavaScript中的每一个Function对象都有一个apply()方法和一个call()方法，它们的语法分别为：apply()方法function.apply(thisObj[, argArray])call()方法function.call(thisObj[, arg1[, arg2[, [,...argN]]]]);它们各自的定义：apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用

原创 JS赋值的按值传递和按地址传递

原创 前端常用JavaScript工具方法

/** * 邮箱 * @param {*} s */export const isEmail = (s) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)}/** * 手机号码 * @param {*} s */export const isMobile = (s) => { return /^1[0-9]{10}$/.test(s)}

原创 前端面试常见的手写功能

前端面试常见的手写功能防抖节流newbindcallapplydeepCopy事件总线 | 发布订阅模式柯里化es5 实现继承instanceof异步并发数限制异步串行 | 异步并行vue reactivepromise数组扁平化对象扁平化图片懒加载防抖function debounce(func, ms = 1000) { let timer; return function (...args) { if (timer) { clearTimeout(timer)

原创 H5语义化标签

<header></header>表示网页的头部<main></main>表示网页的主体部分（一个页面中只会有一个main）<footer></footer>表示网页的头部<nav></nav>表示网页中的导航<aside></aside>表示和主体相关的其他内容（侧边栏）<article·></article>表示一个独立的文章<section&

原创 Vue组件的11种通信方式总结

vue组件间的传值方式多种多样，并不局限于父子传值、事件传值这些。文章目录provide / injectprops (父传子)$emit(子传父)eventBus(全局创建Vue实例)vuex (状态管理)$parent / $children / $refs (获取组件实例)$attrs$listenersVue.observable路由传值 /引用数据类型值传递实现父子间数据的共享pro...

原创 Vue基于Axios网络请求封装

结构api.js 将所有的接口统一管理request.js 对网络请求进行了封装操作image.png封装代码api.js//api地址const HOST = "http://xxx.com";const API = HOST + "/api/public/";const Apis = { // 产品 getProduct: API + 'product',...

转载 export default 和 export 区别

export default 和 export 区别：1.export与export default均可用于导出常量、函数、文件、模块等2.你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用3.在一个文件或模块中，export、import可以有多个，export default仅有一个4.通过export方式导出，在导...

原创 vue箭头函数this作用域

在做vue项目时用到了axios，但是发现axios请求之后的回调函数里this并不指向当前vue实例，从而导致浏览器报错。出错代码及结果: created : function(){ axios.get('static/data.json').then(function(res){ console.log(this) //undefined ...

转载 axios用post提交数据到后台的格式和问题处理

文章目录post提交数据的四种编码方式1.application/x-www-form-urlencoded2.multipart/form-data3.application/json4.text/xml解决方法post提交数据的四种编码方式1.application/x-www-form-urlencoded这应该是最常见的post编码方式，一般的表单提交默认以此方式提交。大部分服务器语...