Vue 之webpack BIMFACE（JavaScript 转 Vue） 搭建工程(1)

最新推荐文章于 2024-04-04 18:04:19 发布
最新推荐文章于 2024-04-04 18:04:19 发布
阅读量329 收藏 5
点赞数 1
分类专栏： 2024年程序员学习 文章标签： javascript vue.js webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76352849/article/details/137365802
版权
本文介绍了如何在Vue应用中集成BimfaceSDKLoader，展示如何在mounted钩子函数中操作DOM并添加事件监听器，包括异步加载BIM项目和创建按钮以触发特定方法（如隐藏组件和获取目录树信息）。
摘要由CSDN通过智能技术生成

if (dom != null && dom.nodeName == “BUTTON”) {

dom.innerText = text;

}

}

3、转换为Vue代码

（1）引入依赖

import {BimfaceSDKLoader,BimfaceSDKLoaderConfig,Glodon} from ‘bimfacesdkloader’

在这里插入图片描述

（2）mounted（将JS的代码直接复制到mounted当中）

在div上设置一下标题

ref=“bfContainer”

在这里插入图片描述

获取当中对应的div，负责到渲染BIM项目当中

在这里插入图片描述

4、转换后全部Vue代码（HelloWorld.vue）

5、调用对应的方法

在mounted 前加上异步操作

在这里插入图片描述

在这里插入图片描述

将需要操作的对象声明在最外面

在这里插入图片描述

创建method将对应的方法复制到其中即可

在这里插入图片描述

创建 对应的按钮

在这里插入图片描述

全部代码

<button @click=“hideComponentsByData()”>隐藏

<button type=“button” class=“button” @click=“getModelTree()”>目录树信息

2301_76352849
关注
专栏目录
将.js文件转成vue标签结构的样式
木木木华的博客
02-10 1191
将.js文件转成vue标签结构的样式
vue3+ts+vite中使用BimFace
FWarriorJnaos的博客
06-29 894
广联达bimface没有提供可通过npm安装的依赖包，所以只能通过script标签引入script标签引入后，在vue文件中直接调用bimface的类和方法，在vscode中编辑时会有报错提示，但是不影响编译结果，解决办法（暂无）###更新由于以上报错会导致打包失败，所以尝试导入bimface第三方依赖包安装成功后，尝试在页面中import引入需要导入的bimfaec类或方法，发现有报错报错原因是未找到bimfacesdkloader的声明文件。
vue集成vue-3d-model预览3D模型
热门推荐
u010818514的博客
06-30 1万+
1、新增vue-3d-model依赖 npm installvue-3d-model 或者 yarn addvue-3d-model 2、使用 若模型路径为项目内路径，则需要将模型放在vue项目根目录下 项目中如下使用 否则会报如下错误： 若路径为服务器路径，则只需填写正确的src路径即可 3、为模型添加旋转等效果 vue-3d-model模型预览 0人点赞 ...
vue使用 BIMFACE demo
大家好，我是+V
04-20 782
vue使用 BIMFACE demo 一个小案例 首先在 index.html 文件引入 js 文件 <script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js"></script> 然后在相应的页面编写 bim 代码。其实官网给的demo都是js的，只要把它转成vue语法就可以了。 https://bimface.com/developer-jsde
uniapp简易集成bimface模型展示
weixin_41813738的博客
03-10 1562
总览：1、uniapp静态资源目录内新建bim.html，bim.html中集成bimface；2、uniapp页面利用web-view组件引用bim.html页面。 通过这种形式简单将bimface模型展示集成到uniapp。 1、bim.html <!DOCTYPE html> <html style="height: 100%;;padding: 0px;margin: 0px;"> <head> <meta name="viewport" con
webpack-vue:使用webpack搭建vue项目
05-09
使用webpack搭建vue项目 1.创建一个空项目 npm init -y 2.下载webpack，webpack-cli 目前可以使用webpack5不过还是建议使用webpack4 npm i webpack@4.44.2 webpack-cli@3.3.11 -D 3.配置webpack 1.根目录下创建...
ftl-vue-webpack:适用于webapp的vue.js，webpack和freemarker
05-16
ftl-vue-webpack 一个Vue.js多页&& spa项目，可以支持transform ftl并自动支持模拟刷新。 如果您想使用简单的纯html，请看 构建设置 # install dependencies npm install # serve with hot reload at localhost ...
vue-webpack项目初始化手动搭建源码
05-01
vue-webpack组件模块化项目初始搭建源代码，新学vue的同学可以借鉴，下载导入VSCode可以直接npm run dev 运行，可以参考博主博客 "VUE-Webpack基础知识点汇总"见详情内容指导。
vue2+webpack搭建h5框架
03-12
**使用Vue2和Webpack搭建H5框架的步骤：** 1. **安装依赖**：首先，需要全局安装Vue CLI（命令行工具）和Node.js环境。然后通过npm或yarn安装Vue2、Webpack及相关的依赖。 2. **初始化项目**：使用Vue CLI创建一个新...
webpack4+Vue搭建自己的Vue-cli项目过程分享
10-18
同时，Vue.js也迅速成为前端主流框架之一，结合Vue的脚手架工具Vue-cli，可以极大降低项目搭建的门槛。本文将详细介绍如何使用Webpack 4和Vue来搭建一个Vue-cli项目，从而实现快速开发Vue应用。 首先需要了解，...
vue使用 BIMFACE demo，面试经历分享
m0_61040489的博客
03-28 392
/ 创建WebApplication3D，用以显示模型。// 设置WebApplication3D的配置项。// 增加加载完成监听事件。// 设置模型载入的基点。// 加载成功回调函数。// 加载失败回调函数。// 添加构件嵌套关系。// 构造地图配置项。
C#开发BIMFACE系列27 服务端API之获取模型数据12：获取构件分类树
baibin7264的博客
09-11 626
系列目录 【已更新最新开发文章，点击查看详细】 BIMFACE官方示例中，加载三维模型后，模型浏览器中左上角默认提供了“目录树”的功能，清晰地展示了模型的完整构成及上下级关系。 本篇介绍如何获取单个模型的构件分类树信息。 请求地址：POST https://api.bimface.com/data/v2/files/{fileId}/tree 说明：单模型构件分类树...
第一篇：原生JS到Vue前端工程化开发
weixin_63566741的博客
08-02 1662
当前最为主流的开发模式是前后端分离开发：前端工程和后端工程。前端工程要通过发送异步请求消息，后端工程进行处理后再返回响应消息，实现前后端的数据交互。 这样前端工程与后端工程就由独立的团队进行开发，所以在开发过程中要实现对接功能必须遵守开发规范，开发规范根据产品经理提供的页面原型与功能需求，定义在专门的文档当中，称为接口文档。接口文档中定义了各个接口功能，描述功能的基本信息，请求参数，响应数据。
vue使用 BIMFACE demo，大学生必备
最新发布
2401_84097393的博客
04-04 377
button class=“button” id=“btnLoadMap” @click=“loadMap”>加载地图。然后在相应的页面编写 bim 代码。其实官网给的demo都是js的，只要把它转成vue语法就可以了。定义DOM元素，用于在该DOM元素中显示模型或图纸。
cesium（一）加载二维三维模型，加载BIM,wms
QDXBH的博客
03-29 1828
一级标题 二级标题 三级标题 四级标题 五级标题 六级标题
vue 项目中使用bimface
wzwzwz555的博客
06-01 8396
在vue项目中使用bimface 模型的方法 效果图 点击加载地图后 在vue项目的根目录下找到 在里面加入<script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js" charset="utf-8"></script> 如图 然后在我们的vue页面里面如图修改 结构 样式 行为 代码 <template> <di
vue 中使用 bimface
csdn姚宏波
11-04 2716
整个过程分为如下几个步骤 1、安装 vue 脚手架 2、创建项目 3、引入 bimface 响应的文件 4、修改 App.vue 文件，实现页面渲染 1. 安装 vue 脚手架 这里还是使用 Vue CLI 通过如下命令，全局安装 vue 脚手架工具 npm install -g @vue/cli 安装好之后，可以通过安装 nrm ，来切换镜像源，也可以直接进行下一步 2. 创建项目 找一个合适的目录，打开 cmd 或者 powshell，键入如下命令，创建名为 bimface-.
零基础搭建Vue3.0 webpack工程：从安装到配置详解
本篇教程是针对初级工程师的入门级指南，详细介绍如何从零开始在移动端构建一个基于Vue 3.0的单页面应用，并使用Webpack进行工程管理。整个过程将逐步引导读者设置环境、安装必要的依赖，以及配置基本的开发工具和...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值