Vue
明耀
我只是这世间闪过的一秒,在这一刹那之间,我明白了,,,,,,,,,,,,,,,
展开
-
VScode 格式化html属性不换行
VScode 格式化html属性不换行转载 2024-02-25 16:15:55 · 1225 阅读 · 1 评论 -
使用vue3.0+electron搭建桌面应用并打包exe
设置后,安装electron、vue-cli-plugin-electron-builder以及electron-devtools-installer,后两个插件用于打包。步骤一:src目录下新建一个background.js文件,作为electron的入口文件。打开win-ia32-unpacked或win-unpacked下的任务管理.exe,出现以下界面,说明也没问题。全局先安装最新的vue cli,下面是安装命令,已安装的可以跳过。安装完成后,先别急着运行,还得改造一下。所以最好先设置一下代理。转载 2023-08-23 18:26:02 · 517 阅读 · 0 评论 -
将Vue项目打包成exe可执行文件
可以在浏览器打开dist中的index.html文件查看是否白屏,如果白屏可能是路由模式的问题 不要使用 history模式。紧接着在目录下就会生成一个 App-win32-x64 的文件 双击文件中的App.exe就可以看到打包好的成果了。紧接着将Vue项目中打包好的dist文件放置到这个目录下。然后删除掉原来文件下有的index.html。然后新建vue.config.js文件。打包完成之后会在目录中生成dist文件。这样的话我们的静态文件就准备好了。打开main.js文件。转载 2023-08-23 17:39:29 · 483 阅读 · 2 评论 -
store值变化,能够实时监控变化
【代码】store值变化,能够实时监控变化。原创 2023-08-07 09:30:14 · 183 阅读 · 0 评论 -
npm卡死
如果还不行试试,官方镜像。原创 2023-08-04 10:22:57 · 136 阅读 · 0 评论 -
electron windows设置镜像地址环境变量
可以进配置文件里改试试。转载 2023-08-04 09:46:49 · 920 阅读 · 0 评论 -
vue-wxlogin vue扫码登录
是样式base64位。原创 2023-02-23 19:54:10 · 462 阅读 · 0 评论 -
Vue 高德地图自定义样式信息窗体
Vue 高德地图 自定义样式信息体原创 2023-02-21 17:57:35 · 1440 阅读 · 0 评论 -
Vue 高德地图点标记
/ 经纬度对象,也可以是经纬度构成的一维数组[116.39, 39.9]// 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15。// 申请好的Web端开发者Key,首次调用 load 时必填。// 需要使用的的插件列表,如比例尺'AMap.Scale'等。//给每一个点位增加点击事件。//给标记点添加点击事件。//初始化地图中心点位置。//设置地图容器id。原创 2023-02-21 17:32:13 · 1061 阅读 · 0 评论 -
Vue 高德地图点聚合
/ 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15。// 申请好的Web端开发者Key,首次调用 load 时必填。// 需要使用的的插件列表,如比例尺'AMap.Scale'等。// 海量点数据,数据中需包含经纬度信息字段 lnglat。//初始化地图中心点位置。//设置地图容器id。原创 2023-02-21 17:24:04 · 1158 阅读 · 0 评论 -
VUE集成MQTT
VUE集成MQTT。原创 2023-02-17 11:21:04 · 330 阅读 · 0 评论 -
elementUI中的侧边栏去除白色边框
我们在使用elementUI组件库的el-menu组件时,会发现右侧有白色边框。通过以下样式即可去除白色边框。转载 2023-01-03 08:27:25 · 1329 阅读 · 1 评论 -
JS 监听变量值变化
import BLETool from '../../utils/ble-tool.js' Object.defineProperty(BLETool, 'conState', { set: value => { //更新值的时候会触发 } }); BLETool.conState = 2;ble-tool.jsexport default { conState: -1, //销毁 0:未连接 1:正在连接 2:已连接}...原创 2022-04-30 16:05:24 · 1704 阅读 · 0 评论 -
echarts 创建多图表
<template> <div class="monitor-3"> <div> </div> <div v-for="item in dataList"> <div class="chart" :id="'echart-'+item.deviceId"></div> </div> </div></template><script> imp原创 2022-04-11 23:42:14 · 2167 阅读 · 0 评论 -
input-tag
<template> <el-tag size="medium" :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)"> {{tag}} </el-tag> <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" r原创 2022-03-22 17:51:44 · 460 阅读 · 0 评论 -
vue 自带video
<template> <div class="video-doc"> <div> <label>基础</label> <div></div> <button><img /><label>文档视频</label></button> </div> <div> <video :src="videoUrl原创 2021-10-20 16:19:18 · 190 阅读 · 0 评论 -
vue 高德 官方组件
vue 高德 官方组件原创 2021-10-12 13:39:25 · 73 阅读 · 0 评论 -
vue 处理打包后加载慢的问题
原因:1、chunk-vendors文件过大2、js没有压缩3、服务器没有开启gzip解决办法:首先在build发布时候压缩js、css等资源文件安装npm压缩组件npm install --save-dev compression-webpack-plugin //vue3 npm i compression-webpack-plugin@5.0.1 //vue 4压缩js、css文件,在vue.config.js 中加入如下配置项:const CompressionPl转载 2021-08-27 15:20:47 · 2620 阅读 · 0 评论 -
vue部署到nginx
1、安装nginx2、打包vue项目npm run build生成3、配置nginx location / { root edu/dist; #dist路径 index index.html index.htm; }4、放入dist5、成功访问http://localhost/原创 2021-08-27 14:46:08 · 385 阅读 · 0 评论 -
el-input 只能输入数字和小数点
oninput="value=value.replace(/[^0-9.]/g,'')"原创 2021-08-19 14:03:16 · 708 阅读 · 0 评论 -
text点击效果 修改字体颜色
>text { flex: 1; background-color: #FFFFFF; padding: 20rpx; text-align: center; } >text:active { color: #007AFF; }原创 2021-08-14 21:42:42 · 1117 阅读 · 0 评论 -
Syntax Error: TypeError: this.getOptions is not a function
转载:Syntax Error: TypeError: this.getOptions is not a function出现问题场景:vue运行项目过程中报错检查代码中并无写错的地方其实涉及到这个问题,就是版本原因了,我安装的 scss-loader 版本太高,卸载安装低版本即可npm uninstall --save sass-loader // 卸载npm i -D sass-loader@8.x // 安装npm uninstall --save node-sass // 卸载np转载 2021-04-18 11:11:11 · 230 阅读 · 0 评论 -
vuex-persistedstate
npm install --save vuex-persistedstateimport createPersistedState from 'vuex-persistedstate'export default new Vuex.Store({ 。。。 plugins: [createPersistedState()]})import createPersistedState from 'vuex-persistedstate'export default new Vuex.Sto原创 2021-01-27 18:30:56 · 139 阅读 · 0 评论 -
vue-seamless-scroll 轮播滚动
<template> <vue-seamless-scroll :data="CardPartsStatisticsList" class="seamless-warp" :class-option="classOption"> <ul> <li class="DataList_top" v-for="(item,index) in CardPartsStatisticsList" :key="index" v-if="index < 5">原创 2021-01-09 12:00:32 · 578 阅读 · 1 评论 -
flex 高度或者宽度被拉伸解决方案
<div class="box"> <div class="a"></div> <div class="b"></div></div>.box { display: flex;}.b { flex: 1; }.a {width: 100px;}正常两栏布局,但如果b得子元素太宽,会撑开b,导致a的宽度被挤小将b的宽度设置为width: 0;,就可以解决总结:flex布局,如果自身高度或者宽度被拉伸了,直接把自己的原创 2021-01-09 11:56:56 · 8763 阅读 · 6 评论 -
VUE v-chart 修改样式
VUE v-chart 修改样式原创 2021-01-08 16:24:05 · 924 阅读 · 0 评论 -
html PDF查看
pdf-view 放在tomcat里面就可以 window.location.href = 'http://localhost:8080/pdf-view/web/viewer.html?file='+encodeURIComponent(JSON.parse(item.url)[0]);原创 2020-12-19 17:44:05 · 246 阅读 · 1 评论 -
vue打包 桌面程序
1.创建项目 vue create electron-vue-start2.安装electron-buildervue add electron-builder会报错:解决方案:cnpm install --loglevel error3.运行看效果:4、在项目根目录下添加vue.config.js配置文件,打包配置如下module.exports = { //打包为应用程序配置 pluginOptions: { // vue-cli-plugin-elect原创 2020-11-05 11:53:34 · 449 阅读 · 0 评论 -
vue项目打包为桌面应用程序
转载:vue项目打包为桌面应用程序 1、通过Vue-cli创建vue 项目 vue create electron-vue-start1 2、Vue项目下,命令行执行 vue add electron-builder1 注意:执行过程中可能会出现错误,如果出现错误,他会转载 2020-11-05 09:34:27 · 2959 阅读 · 0 评论 -
vue 环形进度条
cnpm install vue-circleprogressbar<div style="height: 160px;" > <circle-progressbar style="overflow-y:hidden;" barColor="#00ffff" backgroundColor="rgba(0,0,0,0.8)" :width="60" :radius="25" :progress="70" :isAnimation="true"></circle-原创 2020-10-09 09:39:01 · 1257 阅读 · 0 评论 -
vue按钮点击事件不传递到父控件
<button @click.stop="mapClick" class="cu-btn round sm " :class="[bordersize?'lines-cyan':'line-cyan', shadow]">地图</button>原创 2020-10-06 23:13:39 · 1428 阅读 · 0 评论 -
SVG 进度条绘制
<svg width="150px" height="150px" class="svg"> <circle cx="75" cy="75" r="70" stroke="#EAEFF4" stroke-width="8" fill="none" /> <circle cx="75" cy="75" r="70" stroke="#AE40FB" stroke-width="8" fill="none" stroke-dasharray="439.8"原创 2020-09-15 10:07:59 · 330 阅读 · 0 评论 -
页面实现类似新闻滚动效果
案例-1<template> <div class="scroll-wrap"> <div class="scroll-content" :style="{ top }" @mouseenter="Stop()" @mouseleave="Up()"> <p v-for="item in 10"> <svg width="150px" height="150px" class="svg"> <circle r=原创 2020-09-15 08:51:27 · 625 阅读 · 0 评论 -
uniapp 输入对话框 漂亮进阶
<template> <uni-popup ref="customModal" type="center"> <view class="model-wraper"> <view class="modal-title" v-if="modalTitle !== ''"> {{modalTitle}} </view> <view class="modal-body"> <input v-mod.原创 2020-09-03 14:53:50 · 4052 阅读 · 2 评论 -
VUE 升级 清除客户端浏览器缓存
index.html <meta http-equiv="Expires" content="0"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-control" content="no-cache"> <meta http-equiv="Cache" content="no-cache">原创 2020-08-25 14:38:26 · 2139 阅读 · 0 评论 -
vue 文件下载
this.download(api.baseURL + api.EXT_DEVICE_PRO_DATA,'设备运行数据-'+ this.extData+'.xlsx')download(url, fileName) { let x = new XMLHttpRequest(); x.open("GET", url, true); x.responseType = 'blob'; x.onload = function(e) { let url = wi...原创 2020-07-27 17:31:20 · 4773 阅读 · 0 评论 -
js 全局使用vue
import Vue from 'vue' Vue.prototype.$message.error("网络异常");原创 2020-06-22 15:03:30 · 252 阅读 · 0 评论 -
vue 路由拦截
//全局守卫router.beforeEach((to, from, next) => { //这里是对登录后的值进行判断,也可对token的值进行判断 if (store.state.user === null) { if (to.path === '/login') { next(); } else { next({ path: '/login' }) } } else {.原创 2020-06-21 09:52:14 · 1103 阅读 · 0 评论 -
vue 广播(emit)
转载:vue 广播(emit) 1.创建Vue 创建一个VueFunc.js文件**2.调用js例: import VueFunc from “…/model/VueFunc”;**3.在发送方使用VueFunc.$emit(‘n转载 2020-06-02 23:08:06 · 1046 阅读 · 0 评论 -
vue CSS style 表达式
<uni-card :style="{ 'margin-left': count==2 ? '10rpx' : '0rpx' }" >原创 2020-05-19 16:39:57 · 1329 阅读 · 0 评论