vue中怎样使用bimface

本篇文章给大家分享的是有关vue中怎样使用bimface,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

1. 安装 vue 脚手架

这里还是使用 Vue CLI

通过如下命令,全局安装 vue 脚手架工具

npm install -g @vue/cli

安装好之后,可以通过安装 nrm ,来切换镜像源,也可以直接进行下一步

2. 创建项目

找一个合适的目录,打开 cmd 或者 powshell,键入如下命令,创建名为 bimface-demo 的项目

 vue create bimface-demo

接下来,就是一系列选择了,通过截图的方式演示

通过上下箭头选择 Manually select features ,表示不适用默认配置,而是要自己配置 vue 项目,然后敲击回车

vue中怎样使用bimface

下面使用默认选择即可,然后敲击回车

vue中怎样使用bimface

下面选择 vue2 版本,然后回车

vue中怎样使用bimface

 下面选择代码检查工具 Eslint 的配置,通过上下箭头选择第3项,然后回车(后面禁用 ESlint 代码检查,如果不是专业前端,就不用配置这个了)

vue中怎样使用bimface

 下面选择第1项目,表示保存代码时,会对代码进行检查(因为后面我们会禁用 ESlint,所以这里无所谓了),然后回车

vue中怎样使用bimface

 下面选择使用默认配置(使用单独的配置文件,而不是将所有配置都写到一个文件中),然后回车

vue中怎样使用bimface

 下面询问,是否将上面的选择保存为模板,下次创建 vue 项目时可以直接使用次模板,我们这里输入 n,然后回车,等待创建项目完成

vue中怎样使用bimface

 经过一段时间等待,看到大概如下的界面,就证明项目创建成功了

vue中怎样使用bimface

3. 引入 bimface 文件

3.1 运行项目

首先运行一下项目,看看项目创建的是否成功

使用 vs cde(建议使用 vs code,而不是 webstorm 等) 打开刚刚创建的项目 bimface-demo

打开方式是,在 vs cde 的菜单栏,选择文件->打开文件夹,然后选择  bimface-demo 文件夹,然后点击 选择文件夹 即可

vue中怎样使用bimface

打开之后,在编辑器左侧“资源管理器”中,右键单击空白处,选择“在继承终端中打开”,或者使用快捷键 ctrl+`(就是 TAB 键上面的那个键),也可以在编辑器中打开终端,这是一个类似于 cmd 的命令行工具,我们可以在这里键入一些命令,而不用专门开启 cmd 或者 Powshell

vue中怎样使用bimface

 在终端中键入如下命令,然后回车,启动服务

npm run serve

当出现如下界面,表示启动成功

vue中怎样使用bimface

 此时在,浏览器中,输入上面标红的地址,出现如下界面,就万事大吉了

vue中怎样使用bimface

3.2 引入 bimface 文件

上面都是一些准备工作,下面开始真正的编写代码

因为 广联达 没有提供 bimface 的相关包,如 BimfaceSDKLoader,所以无法通过 npm 的方式在 vue 项目中安装  BimfaceSDKLoader,所以只能通过传统方式引入了

在项目目录中,找到 public 目录中的 index.html,打开

demo 中引入的几个 css 和 js 文件,在这里引入,别忘了保存文件

vue中怎样使用bimface