四川
分享至
前言
我们基于mxcad创建了一个在线的CAD项目，该项目中包含了预览、编辑图纸、操作图纸数据库等多种CAD功能。用户集成后支持二次开发。当前我们提供了两种集成方式，方案1：通过iframe集成mxcad项目；方案2：直接在项目中集成mxcad-app插件。
下面我们详细讲解第2种mxcad-app的集成方式，这种方式与iframe嵌套集成相比更加方便，集成后也只需要维护当前一个系统项目。
MxCAD项目初始化界面如下：
一、基础集成步骤
1.1、基于vite集成mxcad-app
第一步，在`main.js`中引入mxcad项目所需要的样式文件，创建初始MxCAD项目
// 引入mxcad-app样式
import"mxcad-app/style";
// 引入MxCADView
import{ MxCADView} from"mxcad-app";
// 创建默认mxcad项目
newMxCADView().create();
第二步，在`vite.config.js`中加入MxCAD项目相关的资源配置
import{ defineConfig} from"vite";
import{ mxcadAssetsPlugin} from"mxcad-app/vite";
exportdefaultdefineConfig({
plugins:[
...
mxcadAssetsPlugin(),
...
],
});
1.2、基于webpack集成mxcad-app
第一步，在`main.js`中引入mxcad项目所需要的样式文件，创建初始MxCAD项目
// 引入mxcad-app样式
import"mxcad-app/style";
// 引入MxCADView
import{ MxCADView} from"mxcad-app";
// 创建默认mxcad项目
newMxCADView().create();
第二步，在`vite.config.js`中加入MxCAD项目相关的资源配
npm install style-loadercss-loader
const{ MxCadAssetsWebpackPlugin} = require("mxcad-app/webpack");
// webpack.config.js
constwebpack= require("webpack");
module.exports= {
// ...
mode:"development",
module:{
rules:[
{
test:/\.css$/, // 匹配所有 .css 文件
use:[
"style-loader", // 第二步：将 CSS 代码注入到 DOM 的
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
