一染星辰-CSDN博客

原创 Failed to resolve directive: link报错

这个问题是因为vue 版本的问题，vue的版本升级后，取消了v-link 指定，取而代之的为 router-link 看起来更加语义化一些。把 v-link 更换为 router-link 就行，具体的可以查看官方文档。

2022-08-28 11:35:29 992 1

原创 Vue编译项目时出现router.map is not a function

（1）方法1：使用命令npm install [email protected]兼容1.0版本vue。：2.0已经没有map这个方法了，只有1.0兼容该方法。（2）解决方法2：基于vue2.0，写对应的方法。

2022-08-28 11:21:43 689

原创 vant weapp日历组件性能优化 Calendar 日历添加min-date最小日期页面加载缓慢

造成严重的性能问题。官方文档明确强调，通过min-date和max-date定义日历的范围，需要注意的是min-date和max-date的区间不宜过大，否则会造成严重的性能问题。故我们需要根据具体业务需求适当修改页面展现方式Calendar 日历组件使用条件1、如若选择未来几个月内的日期、区间推荐使用；2、区间不会太大；日期picker除上述条件，需要使用日期的，最好使用picker（mode=date）组件，或者vant-weapp也有对应的van-datetime-picker组件，虽然没有

2022-06-22 10:18:19 1541

原创 vue 项目中引入图片

引入效果图：背景：恍恍惚惚的整了好长时间，我借助vant-ui组件去实现的这个效果图，空状态自定义组件，这里呢！需要引入图片，考虑到图片的引入，切记，图片不可直接引入，需要间接的1.需要在data 组件当中用require 去导入图片相对应的路径2. 在组件里边动态导入即可!!! 切记一定要记得加冒号哈...

2022-06-19 15:16:35 4688

原创公司真实经历 web 前端 runapi 测试流程

背景：在茫茫然之中，收到领导发的信息，让和后端调试接口，我脑海里瞬间浮现出了，postman,runapi等测试工具，但由于长时间没有测试过，大部分稍微有些糊涂，于是乎，我就请教了一下同事小苏，小苏看到我虚心的请教，也很乐意教我学习内容流程：《1.看到get 请求，给大家做个示范......《2 去configjs里拿着我得地址《3用 runapi 测试工具拼接一下，千万要记住get 请求要用Query字段《4 直接请求，你会发现会报错，这样做是万万行不通的《5因为需要请求头《6. 这个时候

2022-06-17 17:36:43 567 1

原创公司经历 git 拉取更新代码

背景：领导让拉取并更新代码，由于有段时间不怎莫使用git指令提交代码了，一下子惊慌失措了起来，于是乎，还是大胆的请教了一下领导；领导就打开了黑窗口，逐一输入指令，直到运行起来。。。内容：git status 查看状态git branch master 切换主分支git branch 切换分支git fetchgit branchgit checkout fealuer-1.1.0 切换git pull 拉取总结：遇事不慌，凡事都能稳重求进。。。。...

2022-06-16 19:11:25 1248

原创 git 报错 fatal: not a git repository (or any of the parent directories): .git

在命令行输入 git init 然后回车就好了，再重新执行添加文件的命令即可。

2022-06-16 10:39:15 350

原创入职第二天低级报错 - tag ＜van-nav-bar＞ has no matching end tag.

背景：在引入vant-ui 里的tab 的组件的时候，报出了以下的错误总结：报错提示很明显：标签没有结束标签，也就是没有给标签加闭合

2022-06-15 10:38:41 906

原创入职第一天拉取代码报错 Failed to comile width 11errors

背景：入职第一天，拉取代码，npm instal 下载依赖后，npm run serve 运行依旧报错,经过：刚开始就遇到这种问题，真是让人抓耳挠腮呀！于是乎，我就请教了一下领导，领导帮我看了一下说：“这是你路由里面没有这些你去把这些注释掉就没事了，你看看报错再说，这是让你安装这些文件这是没有这些文件导致的，你给路由里面的注释掉就没事了.........” 当听完领导的这些话，真是一语惊醒梦中人呀！，当听到路由的问题时，我变换了另一种方式就是直接创建对应的文件夹解决的总结：遇到问题后，要懂得及时沟

2022-06-14 17:02:53 417

原创 Cannot find module ‘node-sass‘ 解决办法

在我运行的时候上面显示 Cannot find module ‘node-sass‘,是因为node-sass有时候使用npm install是无法下载下来的。我们再单独的下载一下。使用npm install node-sass就好啦

2022-06-14 11:37:57 302

原创报错 Failed to mount component: template or render function not defined. found in

由于当时页面里边是空的，在跳转的页面里，进行填写内容解决即可！！！

2022-06-14 10:54:02 1648

原创解决Cannot find module ‘element-ui‘

**报错：Cannot find module ‘element-ui’

2022-06-12 11:48:39 1603

原创面试官：为啥要axios 的二次封装呢及其使用是干啥的

一、为什么要进行封装通常我们的项目会越做越大,页面也会越来越多,随之而来的是接口数量的增加。api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护。举个例子，当axios发生问题存在重大bug时,我们只需要修改封装部分代码即可修改全部接口（当然我们再次封装的请求需要使用现有参数格式）。二、封装具体实现import axios from "axios";const codeMessage = { 200: "服务器成功返回请求的数据。", 201: "新建或修改数据

2022-05-12 13:29:44 5319

原创 request.getParameter()方法

request.getParameter()方法:1.获取通过http协议提交过来的数据. 通过容器的实现来取得通过get或者post方式提交过来的数据2.request.getParameter()方法传递的数据，会从web客户端传到web服务器端，代表HTTP请求数据，该方法返回String类型的数据request.setAttribute()和getAttribute()只是在web容器内部流转，仅仅是请求处理阶段request.getAttribute()方法返回reques

2022-05-07 09:15:03 4247

原创 Subversion可执行文件的路径可能是错误的

背景: 公司项目前后端分离Subversion可执行文件的路径可能是错误的原因：主要原因:svn安装的时候没有安装command命令，重新安装即可。

2022-05-06 17:58:25 823

原创前端 web 企业真实面试真题 20道部分带答案（10）（20220421）

1.左边固定右边自适应2.ES6 数组的遍历3.map和filter 的区别是什么？都返回了什么？4. some 和erver 都返回了什么？5.set 和map 的区别？6.webpack 打包流程是什么？7.loder 解决了什么？8.loder 有哪些？7.git 如何做版本工具8.权限管理是怎莫做的9.动态路由10.按钮路由权限11.uniapp如何做到一对多的12.axios 的二次封装13. axios 二次封装都用来做什么？（如登录模块

2022-04-21 20:51:45 579

原创面试官：你封装过组件吗？说一下你是在vue项目里如何封装组件的？

你封装过组件吗？？说一下组件封装？？？？你在项目中是如何封装组件的？？？？？以上问题是面试官，最常问到的问题？那么你应该如何回答呢？答：我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组件)、l

2022-04-15 19:33:16 12093

原创前端webpack 高薪企业必备面试真题16道 ---带答案(9)（20220415)

目录1、什么是 webpack（必会）2、webpack 的优点是什么？（必会）3、webpack 的构建流程是什么?从读取配置到输出文件这个过程尽量说全（必会）4、webpack 与 grunt、gulp 的不同？（必会）1、三者之间的区别2、构建思路的区别3、从知识背景区别5、有哪些常见的 Loader？他们是解决什么问题的？（必会）6、Loader 和 Plugin 的不同？（必会）1、不同的作用2、不同的用法7、webpack3 和 webpack

2022-04-15 18:40:36 2334

原创 vue移动端文章页面跳转到详情页

效果目标：1. 在文章列表用 @click .native 绑定事件，并且带上参数的id2.在methods 的方法里使用 this.$router.push() 的方法进行去跳转 //跳转到详情页面 itemClickFn(id){ // console.log(1234) this.$router.push({ path:`/ArivleDetail?art_id=${id}` }) }注：.

2022-04-15 16:54:11 1301

原创 vue项目图片403 和404问题

问题：图片403 和404 问题问题分析和解决：

2022-04-15 15:07:45 529

原创 vue 移动端搜索记录—本地存储 (偶尔面试会问到)

目标效果：使用的原理有： JSON.parse()以及JSON.Stringify() 本地存储 localStroage js EVentLoop 循环机制的影响1. 将搜索关键保存到history 的关键字数组里，分别将搜索事件和点击事件保存里边即可！！！2. 使用watch 深度监听，用JSON.stringify的转字符的方法保存到本地3.在 data 里将history 的数组里进行JSON.pase ...

2022-04-14 16:46:00 1149

原创前端vue 高新企业必备面试真题（60道）---带答案（20220414）

目录1、Vue 的最大的优势是什么？（必会）Vue 的优势：2、Vue 和 jQuery 两者之间的区别是什么？（必会）1、jQuery 介绍：2、vue 介绍：3、vue 和 jQuery 区别：1.2）MVC 基本定义2、使用场景3、两者之间的区别4、Vue 数据双向绑定的原理是什么?（必会）Object.defineProperty 和 Proxy 的区别如下:6、Vue 生命周期总共分为几个阶段？（必会）7、第一次加载页面会触发哪几个钩子函数？（必

2022-04-14 14:44:38 2422 1

转载手把手教你VUE前端项目发布上线

准备工作已经写好的代码，有团队的需要拉取最新的代码（今天重点分享团队前端项目的发布过程）软件：（包括但不限于）——如果工具都OK，将大大降低发布难度Nginx：轻量级web服务器Jenkins：持续集成开发工具Tomcat：轻量级的应用服务器Xshell：安全终端模拟软件VSCode：前端开发工具当然还有Maven、Gitlib、JDK，这些都是团队开发的必备工具基础知识：敏捷开发（Agile Development）的核心是迭代开发（Iterative Developm

2022-04-14 08:01:22 11232 1

原创 vue 移动端项目如何实现搜索页面的--关键字--高亮?

效果目标：1. 在methods 的方法里，我专门用一个方法lightFn 处理字符串高亮的问题，设置originStr 代表原来的字符串，target 关键字，用字符串的方法 replace()替换，返回值为替换后的字符串代码：//专门处理字符串高亮关键字问题 lightFn(originStr,target){ //originStr 代表原来的字符串 //target 关键字 //字符串有一个方法 replace //例如："好同志，都是招募来

2022-04-13 21:40:47 873

原创 vue 移动端搜索页面---联想菜单铺设

实现效果:1. 在api 里进行请求数据//搜索联想菜单--列表接口export const suggestListAPI = ({ keywords }) => axios({ url: "/v1_0/suggestion", method: "GET", params: { q: keywords, }, });2. 在搜索界面----引入api 的方法import {suggestListAPI}from '@/ap

2022-04-13 20:57:07 945

原创 vue移动端利用防抖的原理 ---实现搜索页面防抖操作

效果目标：搜索页面防抖操作防抖：原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。适用场景：按钮提交场景：防止多次提交按钮，只执行最后提交的一次搜索框联想场景：防止联想发送请求，只发送最后一次输入此次应用于搜索框防抖操作：1. 在搜索组件 ---输入框绑定一个事件2.在data 里设置一个防抖的定时器，timer:null3....

2022-04-13 20:11:35 1598

原创 vue 移动端利用vue 自定义指令实现搜索页面的输入框的自动聚焦 Vue.use

目标效果：利用vue 自定义指令实现搜索页面的输入框的自动聚焦使用自定义指令的原因：vue默认内置了v-model、v-if、v-show、v-html、v-text等指令，但是这些往往不足以满足我们实际项目开发中的场景，比如权限控制按钮、路由菜单，复制文字等功能，就需要我们自己自定义一些满足我们项目需求的指令了，那怎么封装自定义指令，并使用呢？我们先从封装指令的基础说起。钩子函数bind：只调用一次，指令第一次绑定到元素时调用。可以进行一次性初始化设置。 inserted：被..

2022-04-13 19:32:53 1165

原创前端web 企业真实面试题真题 20道带答案（7）

目录1.简述盒模型？2.说说BFC？5.数据类型6.this指向？7.null和undefined区别8.cookie,sessionStorage和localStorage区别9.三等号和双等号区别？10.数组原生方法？哪些不会改变原数组？11.forin和forof区别？12.原型链重点是什么如何打印？13.vue优点？14.vue生命周期函数15.组件data为什么返回函数18.vuex和localstorage区别？19.vue中SSR..

2022-04-13 19:02:40 705

原创前端 web 企业真实面试真题 13道部分带答案（6）（20220413）

目录1.自我介绍2. 搭建从0到1的过程是什么? 搭建过程中遇到的问题3. 动态路由权限怎么处理？4. 按钮权限是如何实现的；5.项目中如何实现一个对象拷贝？6. vue 组件中如何封装自定义指令？7.vue 中哪个生命周期中操作DOM？8.项目中如何使用slot 插槽? 怎么使用？如何封装这类组件呢？slotslot基本使用如何封装这类组件呢？slotslot基本使用9.js 中如何复制一个对象10. ES6 指令有哪些？ Promise.t

2022-04-13 17:10:09 679

原创前端 flex: 1；到底是什么意思？

flex: 1; 到底是什么意思？首先 flex 是 flex-grow, flex-shrink, flex-basis. 三个属性的简写，默认值为 0 1 auto。该属性有两个快捷值：auto(1 1 auto) 和 none(0 0 auto)。建议优先写 flex 属性，而不是写三个分离的属性，因为浏览器会自动计算其相关值。flex-grow 默认为0，只能是正整数。即父元素有剩余空间也不放大元素。如果为 1，则把剩余空间的一份加给自己的宽度。 flex-shrink 默认为1，只能是

2022-04-13 15:28:15 9723

原创 vue 项目利用v-model 双向绑定的原理实现频道和相应的频道内容实现内容一一对应的关系

效果目标：v-model 原理:v-model 本质上就是语法糖，实际上，它就做了两个动作，一个是绑定数据的value值，等于一个变量一个是利用 $event.target.value的方法触发它的input 框思路：在用户的点击频道---> 关闭弹出层 ---->this.$emit 触发---> v-model 双向数据绑定1.在用户的点击频道 -- > 关闭弹出层--->用this.$emit 的方法绑定一个与之前一一对应的cl..

2022-04-13 15:06:14 523

原创 2022年前端web 面试题（笔试真题）(5)

笔试题已知：布局分为：父元素A和N个子元素B；A宽度不固定：最小宽度为1000px，内部边距是32pxB的宽度不固定：相邻两个B元素的间距是16px，所有B的宽度相同，边框为1像素，颜色为999每行只能有3个B元素，超过的话需要换行；最左侧B元素和最右侧的B元素，距离A的边缘都是32px；.client-a{ min-width: 1000px; padding: 24px; display: flex;...

2022-04-13 11:15:35 2031 1

原创如何提高webpack的构建速度？

1.多入口情况下，使用CommonsChunkPlugin来提取公共代2.通过externals配置来提取常用库3.利用DllPlugin和DllReferencePlugin预编译资源模块通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。4.使用Happypack 实现多线程加速编译5.使用webpack-uglify-parallel来提升uglifyPlugin的压缩速度。原理上webpack-u

2022-04-12 21:37:07 1052

原创面试官：请求拦截做过哪些事？

Axios 拦截分为请求拦截和响应拦截。请求拦截就是在你请求的时候会进行触发！只要是你发送一个 axios 请求就会触发！所以我们主要用它做我们的loading 加载和数据的权限验证,包括我们所有的数据预加载也可以实现。响应拦截主要是我们在 loading 加载，和做所有数据加载需要整体的结束，这个时候的结束就需要在数据马上发给前端的时候进行隐藏和结束，包括我们的请求头的设置，后端数据已经发送过来的时候，我们为了确保请求头的传递就必须在看看header 里面是否有你需要的请求，如果有的话，..

2022-04-12 21:21:45 562

原创什么是原型，什么是原型链

每个原型对象中都有 prototype 属性，指向一个对象，这个对象就叫做原型或者原型对象每个对象都有__proto__，指向构造函数的原型对象，层层递进到 null 为止

2022-04-12 20:15:37 468

原创 vue 移动端导航上关闭弹出层的实现，并且利用ref 的原理实现内部的状态回归false

效果图：ref 的原理：ref除了可以获取本页面的dom元素，还可以拿到子组件中的data和去调用子组件中的方法思路: 在导航栏上的X icon 图标上，去绑定一个事件！！！在methods 方法里通过子传父的方法this.$emit 的方法，绑定事件，在父组件里绑定事件；还有绑定一个ref 的绑定，在methods 的方法里完成即可！！！1.在导航栏上的icon 图标上绑定事件2.在methods的方法里使用this.$emit 的方法绑定一个自定义事件...

2022-04-12 20:14:52 339

原创 vue 移动端频道管理—删除频道

效果图：思路：通过在我的频道进行绑定点击事件，并且传值obj, 在methods的方法里，对绑定的事件先对频道里进行判断，判断是否在编辑状态，在编辑的状态下1. 在我的频道绑定点击事件，并且传值obj2. 通过子传父的方法，去传值3.在父组件里进行接收4.在api里请求删除方法，并传值5.方法：//删除频道的方法async removeChannelFn(channelObj){ //删除一个元素，我需要一个下标，但我...

2022-04-12 10:11:55 535

原创 vue 移动端项目利用浅拷贝的原理实现频道的更新

效果图：点击下边更多的频道可以进入我的频道浅拷贝的原理:浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用（地址）浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原对象属性值的一份精准拷贝，如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。async addChannelFn(channelObj){this.userChannelList.push(channe...

2022-04-11 21:35:19 402

原创 js 冒泡排序

冒泡排序原理：冒泡排序是最简单的，只需要通过两次遍历，两两交换，就可以实现排序。代码： let arr = [145, 248, 31, 45, 9, 11, 145, 300]; //冒泡排序 function arrSort(arr) { for (let i = 0; i < arr.length - 1; i++) {//遍历，这里，a.

2022-04-11 20:51:03 293