软航文档控件VUE示例运行及控件替换方法记录

目录

示例运行

步骤一、npm install 

步骤二、npm run dev

软航文档控件替换

附

---

vue小白记录一下软航文档控件VUE示例的运行方法以及示例中控件的替换过程。

示例运行

在已经安装好VUE环境的电脑上，VUE环境部署可以参考另一篇：配置VUE环境过程中 npm报错的处理方案以及VUE环境搭建过程_vue 配置环境报错-优快云博客

步骤一、npm install 

npm （全称 Node Package Manager）是Node.js的官方包管理系统，提供了发布、发现和安装Node.js模块的功能。

npm install 

在包含 package.json 文件的项目目录中运行 npm install 时，npm会读取该文件，并根据其中 “dependencies” 和 “devDependencies” 字段所列出的模块及其版本要求，自动下载并安装到当前项目的本地 node_modules 目录中。

切换到示例目录下，打开cmd命令行窗口，运行npm install :

npm install 还能够帮助开发者解决由于依赖版本变更引起的冲突问题。当依赖树中的某个模块有新的版本发布时，通过重新执行 npm install，npm会基于版本约束规则解析和安装最新的兼容版本，以保持项目依赖的一致性。

与此同时，执行 npm install 过程中，会生成一个锁定文件（如 package-lock.json 或 npm-shrinkwrap.json），用于锁定项目具体使用的每个依赖项的确切版本。这样，在不同的开发环境或者多次安装时，都能确保得到完全一致的依赖树，从而提高项目的可复制性和稳定性。

步骤二、npm run dev

安装好项目依赖之后就可以尝试运行VUE项目，通过在命令行窗口 当前示例根目录下，运行npm run dev 来启动示例。

npm run dev 是指运行一个 node.js 项目中的开发环境。实际上执行的是package.json 文件中的"scripts"部分中定义的"dev"命令：

如上述，实际执行 npm run dev时，执行的是：vue-cli-service serve。

一般情况下，"dev"命令会启动一个本地服务器，并监听文件的变化，当有文件变化时自动刷新页面，方便开发人员进行调试和开发工作。 开发过程中就 运行npm run dev 就可以运行项目，之后项目就会自己更新，如果过程中修改了文件，浏览器中刷新即可。

软航文档控件替换

软航文档控件提供将近半年左右的演示版本测试时间，当过期或者向软航购买之后获取到正式产品就需要替换项目中控件的基本信息。

这里从软航官方获取了一个 控件替换的逻辑图：

从流程图中看主要就是要替换产品cab以及classid等基本信息。

在VUE的例子中，替换流程也是类似的，先在项目中找到引用软航控件的代码位置：

以我获取到的VUE3.0的例子为例：

在src/components目录下officecontrol：editindexcom.vue文件中是通过object标签定义了软航文档控件的信息，如id、classid、高宽、正式产品的授权信息等：

示例中codebase部分已经注释了，软航表示：鉴于浏览器自动加载控件可能出现意外加载不了在情况，因此现在都是提供exe安装包以供安装，代码中就不需要了。 将代码中的classid信息书写正确即可。classid信息来源于产品cab包中inf文件的内容，如下图所示：

不同cab信息不同，需要自己注意分辨。写对了exe安装好就可以，如果写的不对，可能就加载不了控件了。

修改控件信息完毕，就可以在浏览器中刷新示例页面，查看效果了。

附

接触VUE的机会不太多，自己也学的少，就简单记录一下，VUE项目运行的方法，顺带记录一下使用到的东西的情况。

示例里用到的这个软航文档控件，实际就是一个office文件的在线编辑软件，通过这个软件可以实现实在在浏览器中直接查看编辑word、excel、ppt以及wps的相关文件，可以免去需要单独下载到本地，然后修改文件，再通过业务系统中的上传功能回传到服务器的较为繁琐的操作。

好了，今天就到这了，VUE后续还要更多的研究，我先看看这个软航文档控件示例的情况 了~~