2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
Table of contents
Softhang Document Control Replacement
Vue Xiaobai records the operation method of the VUE example of the Softhang Document Control and the replacement process of the controls in the example.
On a computer that has already installed the VUE environment, you can refer to another article for VUE environment deployment:The solution to npm error during VUE environment configuration and the VUE environment construction process_vue configuration environment error-CSDN blog
npm (full name Node Package Manager) is the official package management system of Node.js, which provides the functions of publishing, discovering and installing Node.js modules.
npm install
When you run npm install in a project directory containing a package.json file, npm reads the file and automatically downloads and installs the modules and their version requirements listed in the "dependencies" and "devDependencies" fields into the local node_modules directory of the current project.
Switch to the example directory, open a cmd command line window, and run npm install:
npm installIt can also help developers resolve conflicts caused by dependency version changes. When a new version of a module in the dependency tree is released, re-execute npm install, npm will parse and install the latest compatible version based on the version constraint rules to maintain the consistency of project dependencies.
At the same time, during the npm install process, a lock file (such as package-lock.json or npm-shrinkwrap.json) is generated to lock the exact version of each dependency used by the project. In this way, a completely consistent dependency tree can be obtained in different development environments or multiple installations, thereby improving the reproducibility and stability of the project.
After installing the project dependencies, you can try to run the VUE project by running npm run dev in the current example root directory in the command line window to start the example.
npm run dev means running the development environment in a node.js project. It actually executes the "dev" command defined in the "scripts" section of the package.json file:
As mentioned above, when npm run dev is actually executed, vue-cli-service serve is executed.
Generally, the "dev" command will start a local server and monitor file changes. When there are file changes, the page will be automatically refreshed, which is convenient for developers to debug and develop. During the development process, you can run the project by running npm run dev, and the project will update itself. If you modify the file during the process, just refresh the browser.
SoftAir document controls provide a demo version testing period of about half a year. When it expires or you purchase the official product from SoftAir, you will need to replace the basic information of the control in the project.
Here is a logic diagram of control replacement obtained from SoftAir official:
From the flow chart, it can be seen that the main thing is to replace basic information such as product cab and classid.
In the VUE example, the replacement process is similar. First, find the code location that references the soft navigation control in the project:
Take the VUE3.0 example I got:
In the officecontrol:editindexcom.vue file in the src/components directory, the information of the SoftAir document control is defined through the object tag, such as id, classid, height and width, and authorization information of the official product:
The codebase part in the example has been commented. Soft Air said: In view of the fact that the browser may not load the control automatically, the exe installation package is now provided for installation, which is not needed in the code. Just write the classid information in the code correctly. The classid information comes from the content of the inf file in the product cab package, as shown in the following figure:
Different cab information is different, you need to distinguish it yourself. If you write it correctly, you can install the exe. If you write it incorrectly, the control may not be loaded.
After modifying the control information, you can refresh the sample page in the browser to view the effect.
I don't have many opportunities to use VUE, and I haven't learned much, so I'll simply record how to run a VUE project and what I used.
The Softhang document control used in the example is actually an online editing software for office files. This software can be used to view and edit word, excel, ppt and wps related files directly in the browser, eliminating the need to download them separately to the local computer, modify the files, and then upload them back to the server through the upload function in the business system.
Well, that's all for today. VUE will be studied more in the future. Let me first take a look at the example of this soft navigation document control~~
I have devoted myself to the research of technology for more than 30 years. I am proficient in various languages such as Java, Linux, JavaScript, PHP, CSS, etc. I have made many contributions in the field of open source. I have established a developer documentation site to share some problems in technology development for everyone to read.
