- 博客(125)
- 收藏
- 关注
原创 使用 npx serve 快速启动本地静态文件服务器
这会启动一个本地服务器,默认监听端口 5000。你可以在浏览器中访问 http://localhost:5000 来查看 index.html 的效果。原文引用:https://segmentfault.com/a/1190000045107585。首先你得先下载并安装 node 和 npm。
2024-09-10 15:15:20 208
原创 解决在移动端css使用100vh底部被遮盖的问题
移动端下,若使用100vh单位,那么高度不会是浏览器可视区域的高度,而是会高于可视区域,所以居底部的元素会被遮盖住:如果是chrome浏览器移动端APP的版本在127以上,则可以直接使用代替 vh 单位。如果127版本以下,那么就需要手动兼容了。
2024-08-20 13:16:22 456
原创 腾讯云开发CloudBase的云函数使用入门
在你的环境里的云数据库里新建一个集合,比如叫 users ,并录入1个数据,比如。前提是已经购买了腾讯云的服务,并建立好了云开发环境,有环境ID。二,本地安装Cloudbase CLI工具。一、先在云数据库新建一个集合数据。
2024-08-02 18:54:34 437
原创 Vue Router 4.x 如何隐式给路由传参params
,如果path里不加:id,那么你代码里跳转时写的:router.push({ name: ‘user’, params: { username: ‘yourname’ } }) ,里面的params参数就会无效,到时你在 route.params 里也拿不到任何值。此方式在4.0版本后就不能隐式的传参了,比如想在路由里加入username参数,则必须先在路由配置里,给你当前的路径path里写入明确的动态参数 “然后在你需要添加参数的组件里,使用路由导航守卫 onBeforeRouteLeave。
2024-06-03 19:09:41 513 2
原创 解决引入lodash库(或其他第三方库)时TS报错:TS7016: Could not find a declaration file for module lodash
可以在 src 目录下的 “shims-vue.d.ts” 文件里增加如下代码。
2023-08-22 18:16:00 1746
原创 vue在引入外部js文件时可以使用this的方法
在使用iview的table组件时,需要从外部引入column.js文件,发现在外部文件种无法使用 this,参考了一下网上的文章,写了以下方法
2022-11-26 18:18:47 3336
原创 vue-cli 项目热重载(热更新)失效的解决方法
打开 node_modules 下的这个文件 sockjs-client\dist\sockjs.js
2022-11-04 15:47:14 8601 1
转载 转载:VUE3使用keep-alive页面切换时报错:TypeError: parentComponent.ctx.deactivate is not a function
TypeError: parentComponent.ctx.deactivate is not a function
2022-11-01 19:03:01 1107
原创 git commit 报错 “invalid path” “make_cache_entry failed for path” 解决方法
解决git命令报错:make_cache_entry failed for path
2022-09-05 17:41:33 1366
原创 Vue3使用axios的配置教程
axios中文网站:axios-http.com/zh/一、安装axiosnpm install axios --save二、配置axios,添加拦截器在src目录下新建一个request文件夹,在里面新建index.ts(或者.js)文件,编辑代码如下:import axios from 'axios'// 创建一个 axios 实例const service = axios.create({ baseURL: '/api', // 所有的请求地址前缀部分 timeout: 6000
2022-03-23 12:24:52 46791 18
原创 Vue3的setup函数中添加组件name的方法
在使用VUE3.0的setup函数时,发现无法像2.0那样添加name,解决的方法是新增一个 script 标签:<script lang="ts">export default { name: "xxxx",}</script><script setup lang="ts">// 你的业务代码</script>还可以直接在setup后边加name<script setup lang="ts" name="xxxx">/
2022-03-22 18:17:41 4699
原创 Vue3推荐的替代Vuex的新一代状态管理工具:Pinia 配置教程
Pinia 官方网站:pinia.vuejs.org一、安装Pinianpm install pinia --save二、配置Pinia(默认项目都使用 TypeScript ,默认后缀都是.ts)在 src 目录内新建一个 store 的目录,然后在此目录下新建一个 index.ts 文件,内容如下:import { createPinia } from 'pinia'const store = createPinia()export default store三、在项目中注.
2022-03-22 17:46:44 2827
原创 解决vscode红色波浪线的ts报错:找不到模块“store” ts(2307),不识别@别名路径
使用TS构建vue3项目时,如果使用 import ******* from ‘*********’ 发生红色波浪线报错,可以修改 tsconfig.json 文件:// 在 compilerOptions 对象里添加 baseUrl 和 paths{ "compilerOptions": { "target": "esnext", "useDefineForClassFields": true, "module": "esnext", "moduleResoluti
2022-03-22 14:44:54 11644 4
原创 window.open在新窗口打开页面时被浏览器屏蔽的解决方法
使用 window.open() 方法打开新窗口会被浏览器拦截,可以绕开这个拦截机制,利用异步调用并使用变量后赋值url的方法,代码如下:$.ajax({ url:'your url', type: 'get', success: (data, status, xhr) => { // 新建变量,实例化window.open,然后再赋值url const _window = window.open() _window.location.href = 'your url' }})
2022-03-21 18:35:48 1479
原创 使用Promise.all等待多个promise请求的返回结果
使用js的Promise对象的 Promise.all 方法// 定义一个数组变量,用来存放多个promise请求let promiseAry = []// 定义一个用来循环的数组,用来存放不同的请求参数const dataList = [ {id: '1', name: 'Tom'} ]// 循环datalist,给每个promise请求添加参数this.dataList.forEach(item => { const _params = { 'name': it
2021-12-22 11:47:40 2221
原创 files文件分片上传+计算MD5值(sparkMD5),使用file.slice(start, end)方法
因为要跟后端交互,上传前要拿到文件的已上传信息,所以要给后端传MD5码,这个需要先计算出文件的MD5码,用 spark-md5 插件来计算一、计算出文件的MD5值要配合js的 FileReader 函数来使用 SparkMD5import SparkMD5 from 'spark-md5'// 计算MD5getMD5(file, fileListID) { // 使用sparkMD5的ArrayBuffer类,读取二进制文件 const spark = new SparkMD5.Arr
2021-12-21 12:23:08 6864 5
原创 解决iview UI的Table组件数据刷新但是页面不刷新的问题
在改变了 Table 绑定的 data 变量的数值后,表格的数据刷新了,但是页面不刷新,之前滚动到的位置仍然在那里,而且如果左右两侧有固定列的时候,会错位,解决方法是给 Table 组件绑定一个 Key 属性:<Table :columns="columns1" :data="data1" :key="Math.random()"></Table>...
2021-12-14 15:08:15 3658
原创 使用SockJS和StompJS实现WebSocket订阅服务
一、首先用npm安装 socketJS 和 stompJSnpm install sockjs-clientnpm install stompjs二、在页面中引入这2个jsimport SockJS from 'sockjs-client'import Stomp from 'stompjs'三、初始化websocket连接,定义一个对象(socketClient)接收订阅服务的实例化// 初始化ws连接initSocketConnection () { const _url =
2021-11-03 17:59:28 4404 2
转载 用node.js搭建本地服务器
参考文章:3分钟快速搭建nodejs本地服务器运行测试html/js首先确认你已经安装了node.js,没有的话请先下载安装 node.js第1步:在你的项目文件夹的根目录里新建 http.js 文件,内容如下var PORT = 3000;//var http = require('http');var url=require('url');var fs=require('fs');var mine=require('./mine').types;//var path=require('
2021-09-30 18:27:28 361
原创 Vue3使用 mock.js 模拟后端数据请求的方法
mock.js官网:mockjs.com/1、首先用npm安装npm install mockjs2、然后在src目录下新建一个目录叫“mock”,再目录下新增一个index.js文件作为mock的配置// 引入Mock文件,由于 Vite 不支持require()方法所以改用importimport * as Mock from 'mockjs'// 模拟返回的数据格式,可以自己随便定义const result = { status: 200, reset: '0',
2021-08-17 15:20:21 2984
原创 使用Vite构建Vue3项目,对路由Vue Router 4.x的设置
Vue3官网:https://v3.cn.vuejs.org/Vite官网:https://cn.vitejs.dev/VueRouter官网:https://next.router.vuejs.org/zh/使用Vite构建时,会和以前的有些写法有些不同,例如之前我们使用// 引入路由对象import router from './router'// 路径配置 .vue 可以省略const routes = [ { path: '/', name: 'index' compon
2021-08-16 17:01:28 17961 4
原创 webpack打包时提示:The following entrypoint(s) combined asset size exceeds the recommended limit
如果webpack打包时提示:The following entrypoint(s) combined asset size exceeds the recommended limit,可以设置 “vue.config.js” ,增加如下配置内容:module.exports = {//以上省略默认的一些配置参数 configureWebpack: config => { // 不是开发环境时生效 if (process.env.NODE_ENV !== 'development') {
2021-08-11 18:39:14 6354 3
原创 VUE中(img)图片加载失败时(onerror)显示替换的图片
需要使用img标签上的一个属性 onerror ,绑定一个本地图片地址,以下是VUE里的写法:HTML代码:<img alt="" :src="item.iconPath" :onerror="defaultImg" />JS代码export default { data () { return { defaultImg: 'this.src="' + require('@/assets/images/app_icon.png') + '"', } }}...
2021-07-01 11:17:53 2489
原创 javascript 实现中文排序
使用js的数组的sort方法,传参时再调用 localeCompare 方法let ary = ['今日头条','西瓜视频','火山小视频','抖音','穿山甲']ary.sort((a,b) => { return a.localeCompare(b,"zh"); })
2021-06-24 17:42:21 637
转载 转:VUE-CLI报错 Unexpected console statement (no-console)
版权声明:本文为CSDN博主「crazy_zhangcong」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。原文链接:https://blog.csdn.net/crazy_zhangcong/article/details/88710470使用iview-admin 执行npm run build 指令时报错entrypoint size limit: The following entrypoint(s) combined asset size excee.
2021-05-19 15:45:48 229
原创 递归树
function toTreeData(data,pid){ function tree(id) { let arr = [] data.filter(item => { return item.parent_id === id; }).forEach(item => { arr.push({ area_id: item.area_id,
2021-04-21 15:33:00 93
转载 VUE路由报错NavigationDuplicated: Avoided redundant navigation to current location
是指路由重复。虽然对项目无影响,但是看到有红的不舒服!解决方法:打开router文件夹下的index.js文件,在以下代码中添加如下代码:// 原有的代码不必修改import VueRouter from 'vue-router';Vue.use(VueRouter);// 新增修改方法:获取原型对象上的push函数const originalPush = VueRouter.prototype.push// 新增修改方法:修改原型对象中的push方法VueRouter.prototyp
2021-04-19 10:34:28 772 2
转载 axios请求后端返回验证码图片,前端vue显示验证码图片
原文链接 https://blog.csdn.net/weixin_45817240/article/details/111589847用axios请求后端接口,得到验证码图片,但前端无法直接显示验证码图片,这是因为后端返回的不是一个json字符串,而是一个文件流格式,需要前端转换成base64编码。发送请求的接口:export function GetCaptcha (data) { return Axios对象({ url: '后端请求接口地址', meth
2021-03-31 16:39:56 4219
转载 vue项目中报错“Invalid Host header”
转自:https://www.xuanmo.xin/details/2869更改本机的HOST文件后,访问解析后的本地域名时报错 “Invalid Host header”,解决方法:在vue-cli版本为2.x的情况下修改 webpack.dev.conf.js 中的 devServer 对象加入 disableHostCheck: true 即可转发成功devServer: { disableHostCheck: true,}...
2021-03-31 14:13:54 640
转载 webstorm识别alias别名@
在项目的根目录新建一个新文件 alias.config.js在js里面写上如下代码:/** * 由于 Vue CLI 3 不再使用传统的 webpack 配置文件,故 WebStorm 无法识别别名 * 本文件对项目无任何作用,仅作为 WebStorm 识别别名用 * 进入 WebStorm preferences -> Language & Framework -> JavaScript -> Webpack,选择这个文件即可 * */const resolve =
2021-03-26 16:11:01 1474
原创 vue 重置组件的data初始值 $options 正确的取值方法
想要获取初始值,如果直接用 this.$options.data() 会报错,需要修改成下面这样:// 组件的data初始值,这个对象里面就是组件data里的所有对象了this.$options.data.call(this)当前的data里的值这样写this.$data...
2021-01-22 18:50:16 998
原创 [微信小程序]封装统一promise请求,并判断运行环境搭配不同的host
自己在开发微信小程序时,要根据体验版和正式版填入不同的请求地址host,所以特意写了一个简单的判断方法,并加入到封装好的一个统一http请求中// 判断当前微信运行环境 develop开发版 trial体验版 release正式版const env = __wxConfig.envVersion// 接口的host地址,区分体验版和正式版const host = env === 'release' ? 'https://aaa.aaa.com' : 'https://bbb.bbb.com'/
2021-01-11 16:30:45 273
原创 [微信小程序] 如何给组件绑定的方法传额外的参数
在小程序里,给一个组件所绑定的方法传一个额外的参数,是没办法直接写在函数的形参里面获取到的,必须要用微信提供的 data-**** 方法wxml 代码片段<view data-name="yourName" bindtap="handleTap"></view>js 代码片段handleTap(e) { const name = e.currentTarget.dataset.name console.log(name) // yourName}...
2020-12-15 18:14:56 778
原创 [微信小程序]使用 this.setData 设置一个变量的方法
常规的微信小程序里给一个 data 数据重新赋值,需要用 this.setData 方法传入这个数据的名称,如果你要设置的数据名称是一个动态的变量,则要修改一下写法,加入[ ]中括号:const _name = e.currentTarget.dataset.name || 'isShowDate'this.setData({ [_name]: false})...
2020-12-15 18:05:25 2300
原创 [微信小程序] 弹出遮罩层后禁止背景层滚动的办法
先定义一个overflow:hidden的全局样式,然后在点击出现遮罩层之后让最底层的使用这个样式即可,class上可以绑定一个变量,动态赋值样式的名称,例如:app.wxss 代码片段.disableScroll { position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100%; overflow: hidden;}index.wxml 代码片段<view class="{{ scrollStyle
2020-12-15 17:58:36 1665 2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人