survivorsfyh的博客

Vue3 在 history 模式下通过 vite 打包部署白屏

npm run dev,vite 配置 ip 访问方式

Uncaught (in promise) ReferenceError: require is not defined

该目录不在项目的文件列表中,项目必须列出所有文件,或使用"include"模式

'xxx' is not defined. (no-undef). eslint

cannot redeclare block-scoped variable

cannot be compiled under '--isolatedModules'

Vue 执行 then 方法同时执行了 catch 方法

通过 iframe 的方式对外部链接地址的URL页面进行渲染加载以上便是此次分享的全部内容，希望能对大家有所帮助！

Vant 组件在调用 form 的时候遇到了子组件按钮 button 嵌套导致表单提交的按钮事件与表单内子元素按钮组件事件冲突的情况;form表单的button按钮事件与子组件的按钮方法事件并不是相同方法,但是表单中子组件button的点击事件触发后会联代form提交表单的事件一并执行,一来二去的尝试发现了一些奥妙;解决办法仔细观察会发现表单中的 button 按钮会有一个 native-type="submit" 的属性;表单中的子元素 button 组件虽然没有配置该属性,但默认也会享有该属

日常开发中经常会遇到搜索框查询的例子，需要对数组中的元素进行检索并查询出所需的结果，通过如下方式简单实现了一个小的模糊查询，具体如下：首先，用到了两个方法1.对数组通过 filter 的方式遍历查询搜索的 key2.对遍历出的结果进行字符串的模糊查询 str.indexOf("xxx") != -1其次，通过如上两种方法的组合从而获得一个类似模糊查询的效果；最后，具体实现 code 如下：// listRes:查询结果返回的数组 arr// val:查询搜索的 keyonSearch(

编写 Vue 项目的途中抛出了如下异常，简单记录小结一下：TypeError: Cannot read property ‘protocol‘ of undefined具体原因出在了 main.js 中引用了 axios，同时在其它的类中使用了 axios 的请求；Vue.use(axios)解决办法main.jsVue.use(axios); // 删除该行配置Vue.prototype.http = axios;嗯。。搞定。。。以上便是此次分享的全部内容，希.

Vue 通过路由Router页面 push 后 pop 回上一级的两种处理方式小记；方式一：返回上一级视图后数据会丢失history.go(-1); // 方式一this.$router.go(-1); // 方式二方式二：返回上一级视图后数据会保留history.back(); // 返回上一级history.back(0); // 刷新以上便是此次分享的全部内容，希望能对大家有所帮助！...

Vue 项目创建时候的一些基础配置小记：CLI 即 @vue/cli 全局安装的 npm 包用于终端提供 vue 相关的指令，可用来创建工程、启动服务等；CLI service 即 @vue/cli-service 开发环境的依赖，构建于 webpack 和 webpack-dev-server，可用来serve 启服务、编译构建 build 工程、配置 css、配置 webpack 等；CLI 插件可以集成一些架包快速配置项目等；项目创建，cd 到指定的目录下，执行vue create x

页面中进行跳转是最常见的一种操作之一，那么Vue Router 的 api 中最常会用到的 push 和 go 方法；首先，在路由中配置完每个页面的常规配置后，便可在需要的地方调用 router 的操作；import Vue from "vue";import VueRouter from "vue-router";Vue.use(VueRouter);const routes = [ { path : '/', name : 'Home', .

van-dialog弹出框之组件调用方法小结，结合一些 api 中提供的属性进行组合搭配后的效果。html<button type="button" style="width: 100px; height: 30px;" @click="remarksPaperClick">备注</button><van-dialog v-model="dialogShow" :show-cancel-button="true" :before-close="befor..

日常开发中难免会遇到动态渲染修改样式的需求出现，So 简单归纳如下三种实现方式，虽然还是学时的时候有所了解但事后很久不在接触，此次重新初识前端不久，哪里可以更优还请大佬多多指教！方式一：通过Class 与 Style 绑定的方式即三目运算的判断方式设置样式，也是 Vue 官方推荐的方式，具体 code 实现如下：html 代码片段<button type="button" :disabled="btnDisabledState" :class="[.

开发中接口调试经常会遇到接口调试抛出跨域问题，在 vue.config.js 中设置如下 proxy 即可：注：当前 Vue 版本为 @vue/cli 4.3.1// vue.config.js 文件下module.exports = { publicPath : '', devServer : { proxy : { '^/osce2' : { target : 'http://192.168.8.187:8

项目中创建 html 样式的时候，运用到了 v-for="item in listData" 但抛出了如下异常：Elements in iteration expect to have 'v-bind:key' directives.(vue/require-v-for-key)解决办法使用 v-for 的同时需要添加绑定，即 v-bind:key="xxx" 即可。v-for="item in listData" v-bind:key="item"以上便是此次分享的全部内容，.

通过 Vue Cli 的方式创建项目后，项目打包成功部署后页面加载渲染异常，提示少 config 配置文件，需建立如下 vue.config.js 的 js 文件并将如下 code 编码填入对应的 js 类中重新打包部署即可module.exports = { publicPath: ''};以上便是此次分享的全部内容，希望能对大家有所帮助！...

新项目集成 UI 库之后在页面中调用组件，编译 code 重启服务，抛出如下异常且组件样式失效：did you register the component correctly?从页面渲染的内容发现，调用该组件中的文字内容均正常显示，但是该组件的样式没有生效；因为是新的项目且项目中没有配置全局和局部的 css 样式配置，所以怀疑还是集成方面或者配置出了问题；最后，发现少执行了一步命令...

日常开发中经常会遇到时间相关的问题，服务端返回的数据都是以时间戳的方式，那么需要将其处理转化为对应的时间格式，具体方式如下：一、filters 中 formatDate 方法实现：<script> export default { name: "listItem", props:['datas'], data(){ ...

一些常用的小方法单独写的一个类，方便日后复用，还在一点点积累完善中，也欢迎大家多多提供和改进优化，使其更加健壮；export default { getValueByKey(data, key) { for (var i = 0; i < data.length; i++) { var item = data[i]; ...

针对请求进行了简易处理，初识 Vue 还望大家多多指教 :)其中引用的 Toast 是一个基于 Vant 的组件，用于 loading 和提示语。import axios from "axios";import {Toast} from "vant";export default { GetHttpRequestDataWithDefault(url, isFlag, i...

如下操作均在 macOS 系统下进行的，Windows 环境下暂未尝试仅供参考。向 vue 项目中集成ant-design 的时候执行如下命令出现异常npm install ant-design-vue --save异常如下：解决办法：在命令前加入 "sudo" 后面命令不变，命令如下：sudo npm install ant-design-vue --sa...

v-show 另一个用于根据条件展示元素的选项，类似于 v-if；与 v-if 不用的是使用 v-show 的元素始终会被渲染并保留在 DOM 中，它只是简单的切换元素的 css 属性。注：v-show 不支持 <template> 元素，也不支持 v-else<template xmlns="http://www.w3.org/1999/html"&gt...