vue
九霄123
专注于 前端的技术积累 js cs html vue node.js react svn github hichart echart layui element ui 微信小程序,vant ui+ vue移动端开发,浙政钉,钉钉小程序等的O
展开
-
ssl证书问题导致本地启动前端服务报500
问题:系统原是http,后台调整为https后,ssl证书有点问题, vue项目本地服务,使用代理,webpack默认,证书强校验,导致请求无法发出,后台日志也无反应。报错如下:注意查看报错信息。原创 2023-12-15 14:48:19 · 229 阅读 · 0 评论 -
vue 下载world
dialogClose(dialogItem) { this.$refs[dialogItem.code + "Ref"][0].resetFields();},//文件下载// 入参 file:被下载文件对象fileDownload(file) { const loading = this.$loading({ lock: true, text: "导出中", spinner: "el-icon-loading", background: "rgba(0,转载 2020-08-14 20:55:35 · 925 阅读 · 0 评论 -
openlayers和canvas结合使用报画布污染问题
1.根据报错,canvas使用环境,和图片来源环境不同导致。本案例中,项目在端口A,geoserver服务发布在端口B。3. 图层由openlayer加载到页面,并且官方由相关参数配置。crossOrigin属性。对同一条道路,不同时间的航飞数据,对比出差异,以确定施工进度和进行监管,并存档图像资料。vue + pixelmatch像素对比插件 + geoserver发布WMTS图层。2. 尝试本地测试前端跨域代理图层发布地址, 结果报错500.启动项目测试,正常,不再报画布污染,解决。原创 2023-12-07 15:59:58 · 163 阅读 · 0 评论 -
vue项目不用重新打包即可以修改项目ip
需求: 由于vue项目每次修改项目ip都需要重新打包,解决痛点:方法: vue项目的dev.env.js配置文件引入外部变量node中使用CommonJS规范引入 导出static文件下新建host文件 static为暴露到外包的静态资源文件夹。原创 2023-11-20 19:17:34 · 535 阅读 · 0 评论 -
axios中get请求传参为数组/参数序列化
简介: qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。场景: vue项目中axios 中的$get 数组作为参数。原创 2023-07-11 14:46:18 · 1475 阅读 · 0 评论 -
vue的动画
关键点: 1. transition标签 2. 指令 v-if / v-show 3. class名字,自行写入css语句。为单个元素或组件提供动画过渡效果。原创 2022-09-28 14:40:04 · 245 阅读 · 0 评论 -
vue/cli4.x vue.config.js 配置插件
案例: src同级别新增static静态目录,放置外部静态js css img资源,打包和dev时,发现没有引用进去。背景: vue/cli4.x 中没有config和build文件夹。那么配置打包插件,在哪里设置?原创 2022-09-28 11:02:08 · 1047 阅读 · 0 评论 -
解决运行vue项目内存溢出
npm clone 下拉的项目, start时, 报超出内存。 查询各种方法,下面这种,解决了问题。 记录一下。(1)全局安装increase-memory-limitnpm install -g increase-memory-limit(2)进入相应的项目目录下,执行increase-memory-limit然后再运行就不会内存溢出了...原创 2022-01-11 14:35:16 · 623 阅读 · 1 评论 -
H5移动端调试vConsole
移动端调试vConsole平时web开发时,在手机上,如果是要看控制台信息,都需要alert弹窗,这样很不友好.还会阻拦进程。通过vConsole.js 重写console方法,实现了类似于微信小程序的移动端调试效果。具体使用方法也很简单<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.0/vconsole.min.js"></script> <script> // in原创 2022-01-07 10:03:04 · 880 阅读 · 0 评论 -
Vue打包项目图片等静态资源的处理
项目打包,默认是打包在根目录下面的。当然我们可以通过设置,打包到任意子目录中去。 但是,当项目中引入资源的,比如:引入图片资源、js资源、或者字体图标之类的。那么可能在这个中间又会踩坑。1、在vue文件引入图片例如,我们将一张图片放到资源目录 /static/image/lyf.jpg 我们在 vue 文件中用下面的代码来使用这张图片。<img src="static/image/lyf.jpg" alt="">注意,最前面不要加 / ,如果是这样操作的话,会变成相对根目录调用图片。如转载 2022-01-03 15:15:41 · 4475 阅读 · 1 评论 -
vue中的环境变量
vue中的环境变量 (vue-cli2 / vue-cli3)第一种: vue-cli2配置一个运行时的环境1.1在config目录下新建环境变量config目录下存放的是env环境变量js文件,新建一个自己的环境变量文件如dev_01.env.js。内容如下:'use strict'module.exports = { NODE_ENV: '"dev"', BASE_SERVER_URL: '"这是一个dev_01环境的地址"'}对象以键值对的方式存放,值为单引号引用的字符串原创 2022-01-03 14:50:06 · 862 阅读 · 0 评论 -
nginx下部署vue项目
今天要用到服务器nginx,还需要把自己的vue的项目部署到服务器上去所以就写一下记录下来。首先要去nginx官网下下载nginx:下载地址:https://nginx.org/en/download.html下载下来会是一个解压包,解压到你想放的文件夹下运行nginx.exe,然后打开浏览器输入localhost出来如下图片所示就说明成功了:然后如果没有成功出来的话也不要慌不要怕,可能是你的端口被别的内容所占了这时你就打开你的nginx的目录下找到conf点击进去然后找到一个nginx.c转载 2021-11-27 10:42:42 · 279 阅读 · 0 评论 -
vue使用 时间处理插件 Moment.js
官网https://momentjs.bootcss.com/ Moment.jsnpmnpm install moment --save # npm总结:Moment.js常见用法总结原创 2021-11-24 14:29:58 · 768 阅读 · 0 评论 -
npm中安装命令-D -S -save等命令用法
区分两种环境其实npm包中 只有两种环境一种是 dependencies生产环境,一种是devDependencies开发环境。区别就是npm run build打包的时候,是否打包进HTML中。以安装axios为例子1.以下命令结尾都会被安装到dependencies(生产环境)中,区别只是全写与简写。npm i axios -Snpm i axios --save2.以下命令结尾都会被安装到*devDependencies(开发环境)中.npm i axios -Dnpm i a原创 2021-11-24 14:25:06 · 666 阅读 · 0 评论 -
vue vuex+keep-alive进阶用法(灵活缓存页面,主要是移动端)
vue vuex+keep-alive进阶用法(灵活缓存页面,主要是移动端)https://blog.csdn.net/u014678583/article/details/111384354注意:每个页面都要添加name,name:"页面名称’,不然不起作用1、在App.vue中,编写如下代码<template> <div id="app"> <!-- include 需要缓存的组件 --> <keep-alive转载 2021-11-19 15:28:43 · 277 阅读 · 0 评论 -
在vue+webpack3/4 项目中引入高德地图API
1 首先在index.html中引入高德地图 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>配置地图环境webpack3 在build/webpack.base.conf.js中修改配置module.exports = { context: path.resolve(__dirname, '../'), en原创 2021-10-30 14:42:28 · 624 阅读 · 0 评论 -
手机调试本地vue项目
vue 项目在手机上调试cmd,打开自己电脑终端,输入ipconfig,就能看到自己电脑的ip地址了标题vue.config.js文件module.exports = { devServer: { host: '192.168.1.6', // 将浏览地址的本地服务修改为本机ip地址,用来到手机上测试 port: 8080, //端口号 },}然后项目启动的时候,直接访问:Network: http://10.0.XXX/原创 2021-10-29 11:23:02 · 451 阅读 · 1 评论 -
javascript @description 注释
js中vue 组件中包含两种注释:头部 解释组件的功能方法部分: 解释该方法 执行的作用头部 <!-- * author: lyx * time: 2021/10/22 * des: 检查填报- 隧道-土建的新增表单 * mark: * -->methods: {} /** * @description formlist的数据渲染 基础数据 * @param { String } fdObjectid */原创 2021-10-22 11:40:17 · 3024 阅读 · 0 评论 -
vant Dialog组件调用的坑
vant Dialog 组件调用如果需要在弹窗内嵌入组件或其他自定义内容,可以使用组件调用的方式。export default { data() { return { show: false, }; },};export default { data() { return { show: false, }; },};坑:如果使用按需引入+组件调用的方式,Dialog不受v-model的值的控制,而是会自动显示蒙层和一转载 2021-10-19 16:29:41 · 2832 阅读 · 0 评论 -
vue中实现输入框函数防抖debounce
防抖函数的原理:只有在事件触发的时候才会延迟加载,如果在延迟加载之前再次触发,则会刷新延迟时间重新延迟,触发次数有且只有触发一次;使用场景:防抖函数一般是用于频繁触发事件,而我们只需要它触发一次的场景,比如:输入框的oninput事件、button按钮点击事件、点赞等操作场景;实例:例如在vue-cli脚手架中使用防抖函数来进行提升性能vue-cli:定义一个util.js// 函数防抖export function debounce(fn, wait) { let timeout转载 2021-10-13 10:59:47 · 959 阅读 · 0 评论 -
vue-cli 4.x 配置 htmlWebpackPlugin.options.title
在 vue.config.js 中添加配置:// 修改或新增html-webpack-plugin的值,在index.html里面能读取htmlWebpackPlugin.options.title chainWebpack: config =>{ config.plugin('html').tap(args => { args[0].title = '你想要设置的title'; return args;原创 2021-10-12 16:52:13 · 839 阅读 · 0 评论 -
moment.js 获取当前时间常用api
moment().format("YYYY-MM-DD HH:mm:ss"); //当前时间moment().subtract(10, "days").format("YYYY-MM-DD"); //当前时间的前10天时间moment().subtract(1, "years").format("YYYY-MM-DD"); //当前时间的前1年时间moment().subtract(3, "months").format("YYYY-MM-DD"); //当前时间的前3个月时间moment(原创 2021-10-12 10:41:28 · 178 阅读 · 0 评论 -
vue-CLI4 proxy跨域代理
跨域:浏览器的同源策略限制。是一种浏览器安全策略。例如: https:192.168.1.1:8080协议 ip 端口号 任意不同视为跨域;一般来说: web页面和接口服务都是在一个服务器上; 但是项目在开发的时候,vue项目在本地,接口在另外服务器上,这种情况则造成跨域。解决方式:1.. .env.development文件 为CLI4配置开发变量的文件NODE_ENV=developmentVUE_APP_API_URL=development api urlVUE_A原创 2021-10-10 18:44:14 · 321 阅读 · 0 评论 -
vant中picker选择器label id
数据格式: column: [ { label: "杭州", id: 0 }, { label: "宁波", id: 1 }, ],要求下拉显示label, 获取id. 尝试插槽失败,并且官网上没有案例。采用如下方式:value-key=“label” <van-popup v-model="showPicker" round position="bottom"> <van-picker原创 2021-10-10 12:40:40 · 3091 阅读 · 3 评论 -
vue中mixins的使用方法和注意点
vue mixins的功能使用场景:列表类页面,table,都有翻页,列表渲染方法,查看, 对经纬度做相同的数据格式处理,对于这种在多个页面,使用相同的方法和下拉数据的情况,可以适应混入组件的方法。mixins基础概况vue中的解释是这样的,如果觉得语言枯燥的可以自行跳过嘿~混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。怎么用?举个栗子:定义一个混入对象把混入对原创 2021-09-08 18:03:14 · 749 阅读 · 0 评论 -
vue封装公共方法并调用
1.新建文件common.js,如下:export default { /** 01 * @description 校验值是否为无效值 * @param {object} params 被校验值 * @return {boolean} 无效值返回true, 有效值返回false */ isLegitimate(param) { if ( param == null || param == undefined原创 2021-09-07 14:46:20 · 750 阅读 · 0 评论 -
一次向后端传递两张图片
重点代码: let params = new FormData(); for (let key in this.params) { params.append(key, this.params[key]); } 完整版 // 检查文件上传 // 入参 file:当前上传的文件,fileList:所有被上传的文件列表 checkFilesChange(file, fileList) { if (!t原创 2021-08-16 16:07:56 · 159 阅读 · 0 评论 -
vue项目使用高德地图计算两点之间驾驶路线长度和直线距离
https://lbs.amap.com/api/webservice/guide/api/newroute#t5原创 2021-07-28 11:47:20 · 1066 阅读 · 1 评论 -
vue中使用高德地图路线规划
<template> <div class="map-content"> <div class="page" id="map-container"></div> <div id="panel"></div> </div></template><script>import AMap from "AMap";export default { name: "Amap",原创 2021-07-28 11:38:45 · 1163 阅读 · 0 评论 -
vue3 笔记整理
vue3使用ts重构底层代码,并对渲染打包进行逻辑速度提升。并增加了新的api方法,在项目代码上,有了更好的阅读和编写体验。diff 算法 静态提升和监听缓存vue2 是全量对比,每次编译都是逐个对比,耗时较大,vue3,改进了方法,对可能改变的dom,进行标记,准对性对比。缓存部分: 对于复用的dom,使用缓存。不在重新编译。1 项目建立项目建立有多种方法,以下是vue/clinpm install -g @vue/clivue create appcd appvue add vue-原创 2021-06-15 09:24:37 · 228 阅读 · 0 评论 -
webpack 笔记精讲
小知识点:webpck官方地址 : https://webpack.docschina.org/guides/getting-started/#basic-setupnrmnrm(npm registry manager )是npm的镜像源管理工具,有时候国外资源太慢,使用这个就可以快速地在 npm 源间切换nrm ls 展示所有镜像列表带星号的是 当前正在使用的镜像。 npm -------- https://registry.npmjs.org/ yarn ------- https:原创 2021-06-15 09:08:38 · 134 阅读 · 0 评论 -
Babel 整理笔记
使用Babel升级工具https://blog.csdn.net/c183662101/article/details/106363055/官方的介绍是这样的一个工具,可以更新大多数使用babel的依赖关系,配置文件,和JavaScript文件(将来可能会更多)。一些常识:npm install --save-dev @babel/preset-env–save-dev 指的是 安装到开发环境, babel插件 的作用是, 你可以使用 js高级语法, 但是浏览器只能解析低版本js,原创 2021-06-12 12:22:06 · 137 阅读 · 2 评论 -
elemnet ui vue笔记
elemnet ui vue pc端2020.05.15 总结:form表单组<el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form-item label="审批人"> <el-input v-model="formInline.user" placeholder="审批人"></el-input> </el-form-ite原创 2021-05-14 09:47:16 · 2768 阅读 · 1 评论 -
vue没有热加载编译
vue没有热加载编译可能原因:1. vue 监控文文件 触发 是保存事件。 保存后发现有代码改变就进行重新编译。 因为浏览器只能解析显示编译后的 js css html。 并不是直接读取vue组件。 但是编译的越频繁,消耗性能越多。 所以,热加载监控文件区域只是 src。 故,main.js pro.js等配置文件修改,并不会触发重新编译。2. 修改src内的组件,编译失效。 可以npm install 。因为编译本省也是一段js 。 或者是插件,有损坏或者报错的可能。初始化一下...原创 2021-03-24 11:43:32 · 1058 阅读 · 0 评论 -
vue运行后没有实时编译解决
写代码时发现,视图没有实时更新。解决方法:npm install // 可能是缺少了插件,无法检测到代码的变动npm run dev然后在启动就可以了原创 2020-11-05 19:04:40 · 1292 阅读 · 0 评论 -
vue v-for循环对象的用法
v-for循环对象<template> <div> 数据源{{ data }} <div v-for="(item, index, i) in data" :key="index"> item 值 {{ item }} --- index 键 {{ index }}--- i下标---{{ i }} </div> </div></template><script>expor原创 2020-09-24 19:41:26 · 2933 阅读 · 0 评论 -
Vue中watch的简单应用
Vue.js 有一个方法 watch,它可以用来监测Vue实例上的数据变动。如果对应一个对象,键是观察表达式,值是对应回调,值也可以是方法名,或者是对象,包含选项。下面写两个demo,参考demo来了解一下demo1监听变量<template> <div> <h1>测试</h1> <el-input v-model="value"></el-input> </div></templa转载 2020-09-23 22:14:07 · 207 阅读 · 0 评论 -
VueJS条件语句:v-if、v-else、v-else-if
VueJS条件语句:v-if、v-else、v-else-ifHTML:if-else<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>转载 2020-09-22 22:24:54 · 133 阅读 · 0 评论 -
router-view 组件间传值
情况一:router-view 子组件发生变化导致父组件发生改变父组件中:<router-view @getMessage="showMsg"></router-view>showMsg (val) { // methods方法 val即为子组件传过来的值 console.log(val)}子组件中:this.$emit('getMessage', “传给父组件的值”);}情况二:router-view 父组件发生变化导致子组件发生改变父组件中:&转载 2020-09-21 23:14:09 · 3793 阅读 · 2 评论 -
vue按钮权限的控制解决方案
目标:vue按钮权限的控制解决方案准备知识点:(一)Vue.directive指令(自定义指令)webpack中案例main.js中写入如下代码:1. 怎么配置自定义指令的生命周期Vue.directive('hello', { // 当被绑定的元素插入到 DOM 中时……被调用 inserted: function(el,binding,vnode) { el.style["color"]= binding.value; }, update: function() {原创 2020-09-20 16:13:50 · 992 阅读 · 0 评论