圣京都-CSDN博客

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; // gltf加载器initModel() { let self = this; var loader = new GLTFLoader(); loader.load("/static/obj/2.gltf", function(gltf) { //创建纹理 self.scene.ad

2022-02-16 14:21:42 1797

转载多个项目复用node_modules

为了减少冗余文件，要让这些项目都共用一个node_modules。首先以管理员身份运行 cmd（命令提示符）mklink /d D:\Develop\WebStormProjects\meetm\meetm_test\node_modules D:\Develop\WebStormProjects\meetm\node_modules注意项目文件夹中不要有node_modules，项目路径和公共路径根据自己的路径去修改mklink /d <项目路径>\node_modules &lt

2022-01-24 11:39:39 1880

转载＜a＞标签下载文件重命名失败，download 无效

最近用到标签实现文件下载并对文件进行重新命名，遇到了一些问题，文件重命名一直失败，所幸最终还是解决了，在此记录一下，避免后来者踩坑。HTML 元素可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接，其中href和download是我们下载文件所需要的两个属性。download可以实现对下载文件的重命名，但目前存在很大的兼容性问题，只有Chrome和Opear才有效，并且如果说下载文件不是在子集的服务器或域名中，这些浏览器会忽视download属性，文件名不变。简而言之，

2022-01-12 16:01:52 1470

转载 Vue 新玩具 VueUse

什么是 VueUseVueUse 是一个基于 Composition API 的实用函数集合。通俗的来说，这就是一个工具函数包，它可以帮助你快速实现一些常见的功能，免得你自己去写，解决重复的工作内容。以及进行了基于 Composition API 的封装。让你在 vue3 中更加得心应手。简单上手1.安装 VueUsenpm i @vueuse/core2.使用 VueUse// 导入import { useMouse, usePreferredDark, useLocalStorage }

2022-01-11 10:31:11 1223

原创 vue 上下文与接口路径报错 404 问题

在vue.config.js 设置上下文 publicPath:"/web",接口错误问题当前存在反斜杠，export function getPageRelieve(query) { return request({ url: '/park/equipmentinfo/pageRelieve', method: 'get', params: query })}当前不存在反斜杠export function getPageRel

2022-01-10 10:42:12 935

原创自定义表格组件来解决avue 2.8.14版本的详情样式过于难看的问题

组件目录1.表格组件数据转换js文件使用步骤1 导入对应的组件和js文件2 修改对应avue 表格的js column 第一个插入对应数据3 调用方法1.表格组件<template> <el-table :data="tableData" border style="width: 100%" :show-header="false" :span-method="arraySpanMethod"> <el-table-column prop="titleOne"

2022-01-08 16:08:44 1104

原创常用的数据矫正 vue

/** * 邮箱 * @param {*} s */export function isEmail (s) { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)}/** * 手机号码 * @param {*} s */export function isMobile (s) { return /^1[0-9]{10}$/.test(s)}/** * 电话号码

2022-01-04 16:04:53 274

原创 vue 接口拦截

/**axios封装 * 请求拦截、相应拦截、错误统一处理 */import axios from 'axios';import QS from 'qs';// 请求超时时间axios.defaults.timeout = 60000;// post请求头axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';// 请求拦截器axios.interce

2021-12-24 09:56:57 964

原创去掉对象的空数据的键

export const filterForm = (form) => { let obj = {}; Object.keys(form).forEach(ele => { if (!validatenull(form[ele])) { obj[ele] = form[ele] } }); return obj;}

2021-12-14 16:25:27 267

原创 threejs 实现模型拖拽功能

导入相关插件import { DragControls } from "three/examples/jsm/controls/DragControls"; //拖拽控件 import { TransformControls } from "three/examples/jsm/controls/TransformControls"; //可视化平移控件代码objects 为存储移动的mesh模型。<template> <div id="myThree" ref=

2021-11-03 14:34:53 5095 6

原创 threejs+vue房子模型，实现BSP模型剪切，导入obj+mtl文件

threejs版本选择"dependencies": { "@types/three": "^0.126.1", "three": "^0.126.1", },代码<template> <div id="myThree" ref="myThreeRef" @dblclick="onMouseDblclick"> </div></template><script> import * as THREE f

2021-10-22 17:05:22 1677

原创如何解决threejs+vue 的模型重合问题，threeBSP 没有THREE.Geometry的问题

问题存在的原因的新版本的threejs将对应的Geometry删除，所有会找不到对应的模型。解决方案，将版本降低到Geometry还存在的情况，但是可能会出现geometry.faces的报错，目前暂时不知道解决方案使用新的库进行修改，换使用jthreebspjthreebsp使用这个必须修改threejs的版本为npm install [email protected]...

2021-10-22 09:34:38 2258 5

原创 threejs实现点击模型选中以及对选中模型修改材质

利用 groud来实现对模型的存储let group = new THREE.Group();模型加入场景修改 var scene = new THREE.Scene(); var loaderStl = new THREE.STLLoader(); //导入模型 loaderStl.load('离心叶轮.stl', function(geometry) { geometry.name = "李欣" console.log(geometry); var de

2021-10-20 14:35:09 7273

原创优化vue项目打包的chunk.js 和 chunk-vonder.js

1 将chunk-vonder.js 拆解处理1.1 修改vue.config.jsconfigureWebpack: config => { // chunk-vonder.js 分割 let optimization = { runtimeChunk: 'single', splitChunks: { chunks: 'all', maxInitialRequests: Infinity,

2021-10-15 15:48:52 3466

原创 uni-app 通过一个函数就可以方便的获取图片的exif和iptc信息包含gps地理位置等

uni-app 获取图片的exif和iptc信息的 js SDK 地址导入import { getImageData, getFloatLocationByExif } from '@/js_sdk/iz-exif/js_sdk/izExif/izExif.js'运用uni.chooseImage({ sizeType:['original'], success: (e) => { console.log(e) let src =

2021-10-15 09:40:57 1740 1

原创截图组件运用

截图组件<template> <div style="text-align: center;"> <div style="display: flex;justify-content: space-between;"> <div style="width: 300px;height: 300px;"> <div>图片预览</div> <img :src="viewImag

2021-10-15 09:25:14 84

原创按需加载element-ui

下载element-ui的ui 组件库创建index.js 文件import { Carousel,CarouselItem,} from 'element-ui'const element = { install: function (Vue) { Vue.use(Carousel) Vue.use(CarouselItem) }}export default element在mian.js导入文件import 'element-ui/l

2021-09-28 09:26:50 111

原创配置rem vue

下载对应插件"postcss-px2rem": "^0.3.0", "px2rem-loader": "^0.1.9",创建rem.js文件，导入main.js// rem等比适配配置文件// 基准大小const baseSize = 16;// 设置 rem 函数function setRem() { // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。 console.log(document.documentElement.clientWidth); let

2021-09-28 09:18:25 109

原创获取当前页面的缩放值

//获取当前页面的缩放值 detectZoom() { var ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefined) { ratio = window.devicePixelRatio; } else if.

2021-08-24 08:56:26 332

转载 Vue组件之间传值的11种方式总结

Vue组件之间传值的11种方式总结

2021-06-21 11:42:03 111

原创 nodejs nvm 版本控制器指令

1.nvm 下载地址下载地址全部下一步即可。2 通过在命令行输入 nvm 查看全部命令。windows下nvm的命令([]中的参数可有可无)：nvm arch 查看当前系统的位数和当前nodejs的位数nvm install [arch] 安装制定版本的node 并且可以指定平台 version 版本号 arch 平台nvm list [available]nvm list 查看已经安装的版本nvm list insta

2021-06-17 11:42:10 156

原创 nodejs学习-20210303版

本文章不详细介绍内容Node模块采用CommonJS规范。模块化结构通过require命令用于指定加载模块，加载时可以省略脚本文件的后缀名。如果是不是在node_modules的cosnt circle = require('./circle.js');// 或者const circle = require('./circle');如果是在的话const bar = require('bar');主要的核心模块- http：提供HTTP服务器功能。url：解析URL。

2021-03-03 16:36:40 79 1

原创 uni-app的分包过程

网上各种分包文章很多，可是很多不是缺胳膊少腿就是不清不楚，实际上，看api文档是最好的选择之一：1、manifest.json中启用分包，参考官方文档：https://uniapp.dcloud.io/collocation/manifest?id=app-vue-optimization2、在pages.json文件中做如下配置，参考官方文档https://uniapp.dcloud.io/collocation/pages?id=subpackages...

2021-02-26 09:01:36 1238

原创 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media.

如何解决VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media.<template>  <div class="container"> <div class="player"> <div v-if="src===''"> 视频播放

2021-01-12 16:00:30 31654 37

原创 vue-cli3以上使用CDN 降低 build后 chunk-vendors.js的大小

目前以 echart为例子参考资料11 导入cdnechartd的cdn在public文件下的index.html加下面这句话<script crossorigin="anonymous" integrity="sha512-q0nIjE1LHEOioBDYuyhml+xxTm+ftiPuzdWgEgwq5g3YAZ5CWDmjDUs4t7pFeWnvFQe7eLQg/+PepPbacIDtkA==" src="https://lib.baomitu.com/echarts/4.9.

2021-01-07 14:08:47 1701 10

原创 vue-cli4 vue2.x 解决view-design兼容ie浏览器的问题

1.安装插件 npm i @babel/polyfill -S2. 在main.js中引入（第一行）import "@babel/polyfill";3.在vue.config.js3.1// 配置IE兼容 configureWebpack: config => { //引入babel-polyfill'模块 //config.entry.app = ["babel-polyfill", "./src/main.js"] config.entry.app = ["

2021-01-06 15:08:39 656 21

原创 vue项目中开启gzip压缩，优化打包

1.安装包最新版本可能会出现 Cannot read property ‘tapPromise’ of undefined的报错npm i [email protected].修改vue.config.js配置文件，如果没有vue.config.js，在根目录自己创建一个，下面是配置文件的代码const webpack = require('webpack')const CompressionWebpackPlugin = require('compressi

2020-12-25 15:53:33 887 14

原创 vue-video-player实现实时视频播放（监控设备-rtmp流）

1导入vue-video-player插件npm install vue-video-player --save 2 在main.js导入import 'videojs-flash'require('video.js/dist/video-js.css')require('vue-video-player/src/custom-theme.css')3 父组件<template> <div class="about" style="width: 100%;height

2020-12-25 14:19:34 4155 3

uniapp-wxml-to-canvas-main

模型相关文件和插件.zip

通过一个函数就可以方便的获取图片的exif和iptc信息包含gps地理位置等

空空如也