前端基础工程化知识.docx

《前端基础工程化知识.docx》由会员分享，可在线阅读，更多相关《前端基础工程化知识.docx（17页珍藏版）》请在第一文库网上搜索。

1、前端基础工程化知识前言目前绝大部分前端项目都是一个标准的工程化项目在使用我们提供的mxdraw和mxcad库中，我们默认也是采用模块化的引入方式。如果你对前端不是很了解，那么就可以使用我们提供的前端库的js脚本直接加载到htm1页面使用，或者学习一下前端工程化知识，采用模块化的方式引入我们提供的前端库来构建一个符合前端工程化的项目。Node环境安装如果你在我们文档中看见类似：npmimxdrawnpm是Node自带的包管理工具。首先安装NOdehttPS:nodeis.。用zh-cndOWn1oad/请根据电脑操作系统安装对应的安装包步骤1:双击下载后的安装包，如下所示：OpenFi1e-Se

2、curityWarningDoyouwanttorunthisfi1e?Name:E:down1oadnode-v0.10.26-x86.msiJkyPub1isher:JOVentInCType:WindowsInsta11erPackageFrom:E:down1oadnode-v0.10.26-x86.msiRunICancdA1waysaskbeforeopeningthisfi1eWhi1efi1esfromtheInternetcanbeusefu1,thisfi1etypecanPotentj协Iyhanyourcomputer.On1yrunsoftwarefrompub1is

3、hersyoutrust.VVhatitherisk?步骤2:点击上图的RUn（运行），将出现如下界面：步骤3:勾选接受协议选项，点击next（下一步）按钮：朝NodejsSetup02jEnd-User1icenseAgreementP1easereadthefo11owing1icenseagreementcarefu1yAedcNodes1icensefo11ows:CopyrightJoyentrInc.andotherNodecontributors.A11rightsreserved.Permissionisherebygranted,freeofcharge,toanyperso

4、nobtainingacopyofthissoftwareandassociateddocumentationfi1es(theSoftware)todea1intheSoftvarevithoutrestriction,inc1udingvithout1imitationtherightstouse,copyrmodify,merge,pub1ish,distribute,sub1icense,and/orse11copiesoftheSoftvzare,andtopermitpersonstovhomtheSoftvzareisfurnishedtodosorsubjecttnthpf11

5、vjinrnditinncIacceptthetermsinthe1icenseAgreementPrintBackNextCance1步骤4:NOdejS默认安装目录为C:ProgramFi1esnodejsz你可以修改目录，并点击next(下一步):步骤5:点击树形图标来选择需要的安装模式，然后点击下一步next（下一步）jNode.jsSetupDIM3步骤6:点击Insta11（安装）开始安装Nodejse也可以点击Back（返回）来修改先前的配置。然后并点击next（下一步）：jNodejsSetupDIgReadytoinsta11NodejsAdc(g)C1kkInsta11to

6、beginteinsta11ation.C1ickBacktorevieworchangeanyofyourinsta11ationsettings.C1ickCance1toexitthewizard.BackIInsta11Cance1安装过程：点击Finish（完成）按钮退出安装向导。2.Node安装完成后需要配置环境变量全部应用文档网页更多.最佳匹配命令提示符应用IVS2015x86本机工M命令提ZF符-IVS201的x64x86交叉工具命令提、-IVS201ix64ARM兼容工具命令提搜索网页QCmd-Q1Cmd检测PATH环境变量是否配置了Nodejs,点击开始二运行二输入cmd=

7、输入命令path,输出如下结果：命令拄汀符MicrosoftVindows10.0.19042.1348(c)MicrosoftCorporationo保留所有权利OC：UsersAddnpathPATH=C：ProgramFi1esComonFi1esOrac1eJavajavapath;C:WIND0WSsystem32;C:WINDOWSSystem32indowsPowerShe11v1.0;C：WIND0VSSystem320penSSH;C:ProgramFi1esMi:node;C:ProgramFi1esTortoiseSVNbin;C：ProgramFi1esMySQ1MyS

8、Q1Uti1ities1.6oca1MicrosoftVindowsApps;E：nodenode_g1oba1node_modu1es;E:MicrosoftVSCodebindenode_g1oba1;E：Gitmingw641ibexecgit-core;E：Gitmingw64bin;E：Gitbin;C:UsersAdmin我们可以看到环境变量中已经包含了C:ProgramFi1esnodejs如果没有，我们就需要把我们前面安装Node步骤四中安装目录设置为环境变量：找到我的电脑二鼠标右键选择二选择属性二找到高级系统设置二环境变量二变量path=点击编辑二将node安装目录填上并确定

9、TortoiseSVN属性B)映射网络驱动器幽.断开网络驱动器的。g.创建快捷方式删除)重命名(M)打开9)固定到快速访问整固日神屏幕(C:UsersAdini:PATH=CAProgrWSSysten32V1node;C:Prpca1Microsofdenode_g1oba|C:UsersAdini:命主页查找设置P痴Q显示G)声音口通知和操作关于K口期QCg上。操作系统内部版本19042.1348体验WindowsFeatureExperienceF复制更改产品密钥或升级Windows阅读适用于我们服务的Microsoft服务协议阅读Microsoft软件许可条款，专注助手(!)电源和睡眠

10、o存储见平板电脑si多任务处理切投影到此电脑相关设置Bit1ocker设置设备管理器远程桌面球眦高级系统设置重命名这台电脑出获取帮助r提供反馁乂体验共享a嵬贴板ri/，TZ!一c!H”-JIr-系统层性X计算机名硬件高级系统保护远程要迸行大多数更改，你必须作为管理员登录.性能视觉效果，处理器计划，内存使用，以及虑拟内存系统启动、系统故潼和调沉信息iS(T).仄境变量(N)确定肖仄境变量XAdmin的用户变量(U)变量值OneDriveC:UsersAdminOneDrivePathC:UsersAdminAppData1oca1MicrosoftWindowsApps;E:n.TEMPC:Us

11、ersAdminAppData1oca11emp新建(N).编蚩(E)删除(D)TMPC:UsersAdminAppData1oca1Temp值AC1ASSPATHComSpecDriverDataJAVA_H0MENODE_G1OBA1NODE_PATHNUMBERJDF.PROCESSORS.;%JAVA_HOME%1ibdtjar;%JAVA_HOME%1ibtoo1s.jar;C:WINDOWSsystem32cmd.exeC:WindowsSystem32DriversDriverDataE:androidjdk-17E:nodenode_g1oba1E:nodenode_g1oba

12、Knode_modu1es20V新建(W)编后删除(1)确定取消最后检查一下Nodejs版本看是否安装成功Enodeuersionu0.10.26E：|webpackwebpack是打包工具，用于打包前端项目。以下只是简单说明下如何安装和使用，建议直接去WebPaCk官网https:WebPaCk.is.oru/阅读1 .初始化目录我们先仓!建T目录:webpack然后进入到这个目录输入以下命令：npminit-y2 .安装依赖npminsta11webpackwebpack-c1ihtmI-webpack-p1ugin-D3 .安装mxdraw库npminsta11mxdraw4 .创建sr

13、c目录，并创建一个indexjs文件importIoadCoreCodezMxFunfrom,mxdrawnconstCreateCanvas=(id)=constdiv=document.createE1ement(div)constcanvas=documerit.createE1ement(canvas)/父级必须是固定高度(不能用百分比单位)，宽度可以用100%但是一定要设置div.sty1e.height=90vhdiv.sty1e.width=,100%canvas.id=iddiv.appendChi1d(canvas)document.body.appendChi1d(div)

14、1oadCoreCode().then()=constcanvas1d=nmxcadCreateCanvas(CanvasId)MxFun.createMxObject(canvas1dzcadFi1e:,./demo/buf/hhhh.dwg,)5 .配置webpack创建一个webpack.config.js文件constHtm1WebpackPIugin=require(,htmI-webpack-p1ugin)modu1e.exports=mode:process.env.deve1opment=deve1opment?deve1opment:production,p1ugins:newHtmIWebpackPIugin(tit1e:usemxdrawwebpackv5