如何在Vue里打开CAD,DWG文件”
Node环境安装
这里以一个Vue3工程为例子,首先安装Node下载 | Node.js请根据电脑操作系统安装对应的安装包
步骤 1 : 双击下载后的安装包,如下所示:
步骤 2 : 点击上图的Run(运行),将出现如下界面:
步骤 3 : 勾选接受协议选项,点击 next(下一步) 按钮 :
步骤 4 : Node.js默认安装目录为 C:\Program Files\nodejs\, 你可以修改目录,并点击 next(下一步):
步骤 5 : 点击树形图标来选择你需要的安装模式 , 然后点击下一步 next(下一步)
步骤 6 :点击 Install(安装) 开始安装Node.js。你也可以点击 Back(返回)来修改先前的配置。 然后并点击 next(下一步):
安装过程:
点击 Finish(完成)按钮退出安装向导。
2.Node安装完成后需要配置环境变量
检测PATH环境变量是否配置了Node.js,点击开始=》运行=》输入"cmd" => 输入命令"path", 输出如下结果:
我们可以看到环境变量中已经包含了 C:\Program Files\nodejs\
如果没有,我们就需要把我们前面安装Node 步骤四中安装目录设置为环境变量:
找到我的电脑 =》鼠标右键选择=》 选择属性=》 找到高级系统设置=》 环境变量=》 变量path=》 点击编辑=》将node安装目录填上并确定
最后检查一下Node.js版本看是否安装成功
编辑器 vscode
也可以是代码其他编辑器,这里以vscode为例
1.安装vscodeVisual Studio Code - Code Editing. Redefinedhttps://code.visualstudio.com/
2.安装vetur 插件点击install安装
3.vscode 命令行权限不足的问题: 例如执行vue、yarn等命令报错 在安装了@vue/cli提示vue不是内部命令这种情况,应该以管理员身份运行powerell命令行
4.如果在powerell也无法运行对应的命令就是没有设置对应的环境变量,比如yarn安装了,并且用yarn下载了@vue/cli 那么 vue不是内部命令就是yarn或者vue没有配置对应的环境变量,这里yarn环境配置 默认位置 :C:\Users\Mx\AppData\Local\Yarn\bin
配置完成后再重新安装@vue/cli就行了
执行命令 设置权限
get-ExecutionPolicy
set-ExecutionPolicy RemoteSigned
选择并输入Y或者A,然后再重新启动vscode打开命令行就好。
项目应用构建
基于Vue-cli构建Vue单页面应用程序
1.打开命令行安装vue-cli脚手架工具(已安装跳过此步骤)
npm install -g @vue/cli
# OR(或)
yarn global add @vue/cli
# 通过查看版本检查是否安装成功
vue --version
2.命令行运行命名创建新项目
# 创建名为mxdraw-test-vue3 的一个新Vue项目
vue create mxdraw-test-vue3
# 如果选择default则会直接创建项目,创建项目包括babel\eslin这些工具,比如Router/Vuex等其他依赖需要自己手动安装
? P1ease pick a preset:# 默认选项 Default (vue 3)([vue 3] babel, eslint) # 手动选择功能Manually select features
如果选择Manually select features(手动安装)则会进入下一步选项:(这里推荐大家进行手动配置)
? Check the features needed for your project :
(*) Choose vue version # 选择vue版本
(*) Babel # 代码编译
(*) TypeScript # ts
( ) Progressive Web App (PWA)Support # 支持渐进式网页应用程序
(*) Router # vue路由
( ) vuex # 状态管理模式
( ) css Pre-processors # css预处理
(*) Linter ; Formatter # 代码风格、格式校验
( ) Unit Testing # 单元测试
( ) E2E Testing # 端对端测试
TypeScript 选项配置
# 选择使用哪个版本的vue框架
? Choose a version of Vue.js that you want to start the project with
2.x # vue2.x
3.x # vue3.x
# 询问的是是否使用class风格的组件语法,如果在项目中想要保持使用TypeScript的class风格的话,建议大家选择y。
? Use class-style component syntax? (Y/n)
# 使用Babel与TypeScript一起用于自动检测的填充?这里一定要选择y
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)
Router 选项配置
# 路由是否使用history模式?如果项目中存在要求就使用history(即:y),但是一般还是推荐大家使用ha模式,毕竟history模式需要依赖运维。
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
CSS Pre-processors css 选项配置
# 选择一种CSS预处理类型,根据各个项目的要求使用对应css编译处理
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)Sass/SCSS (with node-sass)LessStylus
Linter / Formatter 选项配置
# TSLint只有在选择TypeScript时才会存在。
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only # 只进行报错提醒ESLint + Airbnb config # 不严谨模式ESLint + Standard config # 正常模式ESLint + Prettier # 严格模式TSLint (deprecated) # TypeScript格式验证工具
# 选择校验时机,一般都会选择保存时校验,好及时做出调整
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)(*) Lint on save # 保存时检测( ) Lint and fix on commit # 修复和提交时检测
Unit Testing 选项配置
# 选择单元测试解决方案,普遍用到最多的是Mocha + chai
? Pick a unit testing solution: (Use arrow keys)
> Mocha + ChaiJest
E2E Testing E2E(End To End)选项配置
# 选择端对端测试的类型
? Pick a E2E testing solution: (Use arrow keys)
> Cypress (Chrome only)Nightwatch (WebDriver-based)
额外选项
# 选择Babel,PostCSS, ESLint等自定义配置的存放位置。这里建议大家选择第一个
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files # 存放在专用配置文件中In package.json # 存放在package.json中
# 是否保存当前选择的配置项,如果当前配置是经常用到的配置,建议选择y存储一下当前配置项
? Save this as a preset for future projects? (y/N)
# 选择n之后则会直接开始创建项目了,选择y之后则会输入一个存储当前配置项的名称:
? Save preset as:
3.运行项目
cd mxdraw-test-vue3
yarn serve
详细说明请参考 [vue-cli文档指南]https://cli.vuejs.org/zh/guide/prototyping.html
vue框架使用请参考[Vue.js 中文文档]
安装 npm
yarn add mxdraw 或 npm install mxdraw
用法
1.引入
import Mx from "mxdraw"
2.加载
<canvas id="mxcad">
</canvas>
3.javascript
import Mx from "mxdraw"
// 动态加载 js库核心代码
Mx.loadCoreCode().then(()=> {// Mx.MxFun.setMxServer("ws://localhost:5090") // 开启socket通信 可编辑图纸// 创建控件对象Mx.MxFun.createMxObject({canvasId: "mxcad", // canvas元素的idcadFile: "/demo/buf/$hhhh.dwg.mxb1.wgh", // http方式(预览): 加载public/demo文件夹下转换后的图纸// cadFile: "test2.dwg", // socket通信方式请直接提供图纸名称 如:text.dwgcallback: (mxDraw, {canvas,canvasParent}) => {// 可以拿到canvas元素和它的父级元素console.log(canvas, canvasParent)console.log(mxDraw)// 拿到图层数据mxDraw.addEvent('uiSetLayerData', (listLayer) => {console.log(listLayer)})},isNewFile: true // 是否新建文件})
})
如何实现一个画线的功能命令?
1.实现画线功能
参考资料:
* [MrxDbgUiPrPointClass | getPoint] 构建取点对象
* [status] MrxDbgUiPrBaseReturn表示对应状态
* [McEdGetPointWorldDrawObjectClass | pWorldDraw] 用于构建一个动态绘制回调对象
* [MxThreeJS] three.js 基础封装的一些功能
* [pt1 | pt2 | lastPt] THREE.Vector3 数据类型
javascript
import Mx from "mxdraw"
// 画线的函数
function BR_Line() {// 构建取点对象const getPoint = new Mx.MrxDbgUiPrPoint();// 构建动态绘制对象const worldDrawComment = new Mx.McEdGetPointWorldDrawObject();// 开始动态拖动 行为: 鼠标点击画布时只执行一次回调函数,后续点击无效getPoint.go((status) => {if (status !== 0) {return;}// 获取鼠标在画布上的第一个点const pt1 = getPoint.value();// 将第一个点作为起始点let lastPt = pt1.clone();// 设置动态绘制的回调函数worldDrawComment.setDraw((currentPoint, pWorldDraw) => {// 绘制当前鼠标移动点到起始点的线段pWorldDraw.drawLine(currentPoint, lastPt);});// 设置取点对象交互过程中的动态绘制调用对象getPoint.setUserDraw(worldDrawComment)// 开启动态拖动,连续取点,直到ESC退出。 行为: 鼠标点击一下执行一次回调函数getPoint.goWhile((status) => {if (status === 0) {// 获取第二个点的位置const pt2 = getPoint.value();// 拿到Three的场景对象let sence = Mx.MxFun.getCurrentDraw().getScene();// 创建一条 从起始点到 当前点击位置的线段let line = Mx.MxThreeJS.createLine(lastPt, pt2, 0xffffff);// 将线段添加到场景中sence.add(line);// 将第二点作为起始点lastPt = pt2}});});
}
参考资料: 2.注册使用命名
* [MxFun.addCommand] 注册命名方法
* [MxFun.sendStringToExecute] 执行命名方法
* [MxFun.isRunningCommand]检查是否有命令在运行
javascript
import Mx from "mxdraw"
// 注册命名
Mx.MxFun.addCommand("BR_Line", ()=> {if(Mx.MxFun.isRunningCommand()) {return}BR_Line()
})
// 执行命令
Mx.MxFun.sendStringToExecute("BR_Line")
更多Api使用说明请参考[Mx模块集]对应模块中的Api接口说明
按需引入配置
使用babel
插件babel-plugin-import
实现按需引入
需要安装 npm i babel-plugin-import-D
然后找到或创建项目根目录的 .babelrc
文件新增如下内容:
json
{"plugins": [["import", {"libraryName": "mxdraw","libraryDirectory": "dist/lib/MxModule","camel2UnderlineComponentName": false,"camel2DaComponentName": false}]]
}
javascript基于babel-plugin-import
按需引入
import { MxFun } from "mxdraw"
或者直接通过import MxFun from "mxdraw/dist/lib/MxModule/MxFun"
这样的方式直接引入对应模块
如何在Vue里打开CAD,DWG文件”相关推荐
- 三、使用Teigha.net打开CAD(.dwg/.dxf)文件,并显示到panel界面绑定事件
目录 一.Teigha.net直接操作CAD(.dwg/.dxf)文件 01 .直接打开CAD(.dwg/.dxf) 02 .读取实体,修改后的CAD(.dwg/.dxf)文件进行保存 03 .Tei ...
- cad dwg文件在线展示平台源代码cad格式 dwg文件解析
cad dwg文件在线展示平台源代码cad格式 dwg文件解析,在线展示平台,全套代码 支持windows,linux,mac,支持导入2004,2007,2010,2013版本dwg文件,图层控制, ...
- cad dwg文件在线展示平台源代码cad格式 dwg文件解析,在线展示平台,全套代码
cad dwg文件在线展示平台源代码cad格式 dwg文件解析,在线展示平台,全套代码 支持windows,linux,mac,支持导入2004,2007,2010,2013版本dwg文件,图层控制, ...
- AutoCAD文档03——常见问题03.打开一个DWG文件提示缺少SHX
AutoCAD文档03--常见问题03.打开一个DWG文件提示缺少SHX <----------------------------------------------------------- ...
- dwg文件怎么打开?dwg文件用什么打开?
dwg文件怎么打开 dwg文件打开方法汇总: 第一步:安装AutoCAD,专业的CAD绘图软件,因为该软件设计出来的图纸保存的文件格式就是dwg文件. 第二步:下载安装dwg文件浏览器 由于不少朋友只 ...
- 推荐几个CAD/dwg文件批量转pdf或其他格式的方法
嗯,,主要是帮朋友的朋友忙,处理一下cad文件,是dwg格式的,想转成pdf在手机上也可以看,我看了一下文件结构,有很多子文件夹,大概300个dwg文件,用CAD一个一个转肯定是不现实的. 安装CAD ...
- ubuntu里打开rar,zip文件方法
方法一: rar 和 7zip 是两种源于 windows 的压缩格式, linux 对它们的支持并不像 tar 或者 gzip 那样理所当然,因此,当你在 ubuntu 下无法避开这两种压缩格式的文 ...
- 基于pythonarcpy的批量CAD/dwg文件转shp/shapefile
前言 在将多个CAD图纸合并到一张图上,或者实现图形的数据库管理时,往往会面临数据坐标转换和格式转换的问题,当前主流是统一用shapefile或者gdb地理数据库等方式进行管理. CAD转shapef ...
- 如何在WebIDE里打开一个HTML5应用
登录WebIDE,菜单File->Git->Clone Repository, 把github上包含了HTML5应用的repository地址粘贴进去: Clone完成之后,选中项目,点击 ...
最新文章
- gui design studio3 中文帮助(4)-用户界面 (中)-工具面板
- Python matplotlib高级绘图详解
- android:shareduserid获取资源,关于 android:sharedUserId=android.uid.system
- 这焊接技术,大开眼界了......
- React Native 开发环境搭建
- 主板后置音频接口图解_颜值出众、用料靠谱——华擎(ASRock)Z490 Extreme4极限玩家主板 简析...
- win7系统如何清理系统日志
- 严格匹配_2020湖北省考招录“刚柔并济”强调“人岗匹配”
- 图像分类任务中的tricks总结
- 4 5区别 angular 和_Angular 常见问题解答
- 开源web应用防火墙 - Naxsi
- oracle匿名代码块执行insert,MyBatis+Oracle在执行insert时空值报错之从源码寻找解决办法...
- Shell:函数返回值接收
- 【工控】脉冲当量怎么算?
- java 根据已有ppt模板修改其内容
- ios控制视图切换方向
- 计算机WORD列宽行高怎么设置,word2010表格列宽和行高怎么设置
- python 取数组最后一个_在numpy数组中查找最后一个值
- 苹果电脑系统更新中断怎么办_苹果发布健身公告中断按需锻炼空间
- 代码笔记源码php,读 PHP - Pimple 源码笔记(上)
热门文章
- 税务加强计算机相关知识培训,贺州市地税局推行分类分级培训提升干部素质
- uniApp的学习开发小程序(一)小程序基础搭建和基础部署
- python-pyautogui微信自动发消息
- (转)8000字干货:那些很厉害的人是怎么构建知识体系的
- 【毕业季】-职场10年大咖有话想说
- svn如何取消某个文件的版本管理_取消svn版本控制
- Python 英文文本预处理
- 基站交直流配电多回路无线智能电量采集监控装置
- GPIO 端口模式寄存器 (GPIOx_MODER)
- fft函数图像横坐标是什么_频谱图中横坐标为频率,纵坐标的幅值代表什么