草庐IT

Vue-Instant

全部标签

基于vue3.0实现vr全景编辑器

随着社会的不断发现,现实生活中有很多时候会使用到全景现实,比如房地产行业vr看房,汽车行业vr看车之类的,全景可视化真实还原了现场的场景,真正做到沉浸式体验。现在我们基于vue3.0版本开发出了一款沉浸式的编辑器,只需要使用全景相机在现场拍摄全景场景,然后将场景倒入编辑器,通过拖动图标和导航的方式绑定数据,从而实现沉浸式场景可视化。部分洁面:1、自定义动态添加数据绑定图标,实时监控数据运行状态2、自定义添加文字标记,绑定文字文本,标识场景设备名称 3、自定义添加场景标记,点击可以切换不同场景视角4、自定义添加地图经纬度标记,查看当前标记位置5、自定义添加音视频标记,点击查看音视频播放 6、自定

vite打包vue3项目白屏报错

一、白屏原因一:资源路劲问题修改:vite.config.tsexportdefaultdefineConfig({plugins:[vue()],//打包路径设置base:process.env.NODE_ENV==='production'?'./':'/',resolve:{alias:{'@':fileURLToPath(newURL('./src',import.meta.url))}}})原因二:打包后依旧打开还是白屏:原因是需要服务器进行静态资源访问,否则会因为跨域而报错:Accesstoscriptat'file:///F:/Progremes/Vue3/yanxuan_vue

vue2自定义切换主题 dark暗黑主题(暗黑模式)

前言业务要求要做一个主题色切换,类似于暗黑模式,以前没有做过于是在网络上搜罗现成的解决方案,由于是vue2的项目,找了很久都没有找到一个好的方便的解决方案,最后在github找到一个使用css3的解决方案,觉得十分不错,也很简单明了,于是就拿来直接用了,参考的github项目地址:https://github.com/LiuyangAce/theme-switch/tree/master,可以参考这位的项目结构代码步骤1、建立主题颜色css文件theme-light.css/*颜色变量名字必须以--开头*/:root{--bg-color:#fff;--menu-color:#f1f3f4;-

vue3+vite+ts视频背景酷炫登录模板【英雄联盟主题】

最近我准备在自己的网站上开发一个博客系统,首先要实现后台登录界面。我选择使用Vue3+Vite+TypeScript框架来构建,下面是针对该主题的详细说明:在网页中使用视频作为背景图已经相当常见了,而且网上也有很多相关的插件可供使用。我选择使用"vue-responsive-video-background-player"插件来实现这个功能。首先,你需要通过以下命令来安装该插件:npminstallvue-responsive-video-background-player下面是两种不同的引入方式,并将插件注册到Vue应用中:作为组件:在main.ts文件中引入插件,并将其作为一个全局组件注册

升级node版本至18后vue项目启动报错

升级node版本至18后vue项目启动报错报错日志报错原因解决办法报错日志报错原因版本不兼容导致。因为node.jsV17版本中最近发布的OpenSSL3.0对允许算法和密钥大小增加了严格的限制,可能会对生态系统造成一些影响。解决办法安装node版本管理模块n切换node至低版本重新启动项目即可

浏览器中下载了vue扩展程序,控制台却不显示vue,且vue标签是灰色

解决方法:1.查看扩展程序方法:点击浏览器右上角三个点→更多工具→扩展工具,确保这两个键是打开状态2.点击详细信息(如图)→将这俩按钮打开3.若vue标识还是灰色在浏览器中输入chrome://version/,找到个人资料路径,复制该路径,在电脑中找到该路径下的Extensions→插件文件名→manifest.json,将manifest.json中第三行代码改为:“persistent”:true拓展程序详情中的id就是他的插件名若找不到AppData路径,说明它被隐藏了,将隐藏项目进行展示重新打开项目就可以看见vue标签了

Vue中router-view无法显示

如果你存在:代码没报错,运行成功,但是index.js中router挂接的内容无法显示,没有犯书写错误,routes和component没有写错,在浏览器中检查,App.vue中对应的为空那么建议你接着看,首先,正确的结果://App.vue中//关键是router-view能否成功渲染IfElementissuccessfullyaddedtothisproject,you'llseean'">belowel-buttonexportdefault{name:'app',components:{}}//index.js文件importVuefrom'vue'importVueRouterfr

Vue中的component标签的用法

在Vue中,标签是用来动态渲染组件的。也就是说,它可以根据不同的条件来选择不同的组件进行渲染。在写标签时,需要使用v-bind:is属性来指定要渲染的组件的名称,例如:这里的currentComponent是一个变量名,表示当前要渲染的组件的名称。当这个变量的值改变时,标签会自动根据新的名称来重新渲染相应的组件。使用标签的好处是,能够动态地切换不同的组件,从而使页面更加灵活和复用性更高。

若依前端Vue3模板——自定义主题+炫彩主题

文章目录若依框架新增自定义主题风格实现结果实现步骤默认主题的设置布局设置图标文件布局组件准备CSS变量对状态管理库中的主题名称进行匹配logo图标组件左侧导航栏菜单组件顶部导航栏组件炫彩主题实现结果实现步骤布局设置布局组件其他展示内容的路由出口布局设置-开启topNav后,顶部展示的组件打开页面切换的TagesViews若依框架新增自定义主题风格实现结果实现步骤默认主题的设置文件位置:src/settings.jsexportdefault{//.../***侧边栏主题深色主题theme-dark,浅色主题theme-light,蓝色主题theme-blue,炫彩主题theme-shine*/