기술나눔

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

목차

예시 실행

1단계. npm 설치

2단계. npm 실행 개발

Softhang 문서관리 교체

첨부된

---

Vue 초보자는 Softhang 문서 컨트롤 VUE 예제의 실행 방법과 예제의 컨트롤 교체 과정을 기록합니다.

예시 실행

VUE 환경이 이미 설치된 컴퓨터에서는 VUE 환경 배포에 대한 다른 문서를 참조할 수 있습니다.VUE 환경 구성 및 VUE 환경 구축 process_vue 환경 오류 보고 구성 중 npm 오류 보고 솔루션 - CSDN 블로그

1단계. npm 설치

npm(전체 이름 Node Package Manager)은 Node.js 모듈 게시, 검색 및 설치 기능을 제공하는 Node.js의 공식 패키지 관리 시스템입니다.

npm 설치

package.json 파일이 포함된 프로젝트 디렉터리에서 npm install을 실행하면 npm은 파일을 읽고 "종속성" 및 "devDependency" 필드에 나열된 모듈 및 해당 버전 요구 사항을 기반으로 해당 파일을 자동으로 다운로드하여 현재 프로젝트에 설치합니다. 로컬 node_modules 디렉터리에 있습니다.

예제 디렉터리로 전환하고 cmd 명령줄 창을 열고 npm install을 실행합니다.

npm install 또한 개발자가 종속성 버전 변경으로 인한 충돌을 해결하는 데 도움이 될 수 있습니다.종속성 트리에 있는 모듈의 새 버전이 출시되면 다시 실행하세요. npm install, npm은 버전 제약 규칙에 따라 최신 호환 버전을 구문 분석하고 설치하여 프로젝트 종속성의 일관성을 유지합니다.

동시에 npm 설치 실행 중에 프로젝트에서 특별히 사용하는 각 종속성의 정확한 버전을 잠그기 위해 잠금 파일(예: package-lock.json 또는 npm-shrinkwrap.json)이 생성됩니다. 이러한 방식으로 다양한 개발 환경이나 다중 설치에서 완전히 일관된 종속성 트리가 보장되어 프로젝트의 재현성과 안정성이 향상됩니다.

2단계. npm 실행 개발

프로젝트 종속성을 설치한 후 명령줄 창의 현재 예제 루트 디렉터리에서 npm run dev를 실행하여 VUE 프로젝트를 실행하여 예제를 시작할 수 있습니다.

npm run dev는 node.js 프로젝트에서 개발 환경을 실행하는 것을 의미합니다. 실제로 실행되는 것은 package.json 파일의 "scripts" 섹션에 정의된 "dev" 명령입니다.

위에서 언급한 것처럼 npm run dev가 실제로 실행되면 vue-cli-service Serve가 실행된다.

일반적인 상황에서 "dev" 명령은 로컬 서버를 시작하고 파일 변경 사항을 모니터링합니다. 파일 변경 사항이 있으면 페이지가 자동으로 새로 고쳐져 개발자의 디버깅 및 개발 작업이 용이해집니다. 개발 프로세스 중에 npm run dev를 실행하여 프로젝트를 실행하면 프로젝트가 자동으로 업데이트됩니다. 프로세스 중에 파일이 수정되면 브라우저에서 새로 고치면 됩니다.

Softhang 문서관리 교체

SoftHang Document Control은 약 반년 정도의 데모 버전 테스트 기간을 제공합니다. 만료되거나 SoftHang에서 구매하여 공식 제품을 구입하면 프로젝트에서 컨트롤의 기본 정보를 교체해야 합니다.

다음은 Softhang 공식에서 얻은 제어 교체에 대한 논리 다이어그램입니다.

흐름도를 보면 제품 cab, classid 등의 기본 정보를 대체하는 것이 주요 목적입니다.

VUE의 예에서 교체 프로세스는 유사합니다. 먼저 프로젝트에서 Soft Navigation 컨트롤을 참조하는 코드 위치를 찾습니다.

제가 얻은 VUE3.0 예를 예로 들어 보겠습니다.

src/comComponents 디렉터리의 officecontrol:editindexcom.vue 파일에서 SoftHang 문서 제어 정보는 id, classid, 높이 및 너비, 공식 제품 인증 정보 등과 같은 개체 태그를 통해 정의됩니다.

예제의 코드베이스 부분에 주석이 추가되었습니다. Softhang은 다음과 같이 말했습니다. 브라우저의 자동 로딩 제어가 예기치 않게 로드되지 않을 가능성을 고려하여 이제 설치를 위해 exe 설치 패키지가 제공되며 코드에는 필요하지 않습니다. 코드에 classid 정보를 올바르게 작성하면 됩니다. classid 정보는 다음 그림과 같이 제품 cab 패키지의 inf 파일 내용에서 가져옵니다.

택시마다 정보가 다르기 때문에 구별에 주의를 기울여야 합니다. 올바르게 작성하면 exe가 설치될 수 있습니다. 잘못 작성하면 컨트롤이 로드되지 않을 수 있습니다.

컨트롤 정보를 수정한 후 브라우저에서 샘플 페이지를 새로 고쳐 효과를 확인할 수 있습니다.

첨부된

VUE를 접할 기회가 많지 않고, 배운 것도 거의 없고, VUE 프로젝트를 운영하는 방법과 사용한 것들만 기록하겠습니다.

예제에 사용된 SoftHang 문서 컨트롤은 실제로 오피스 파일을 위한 온라인 편집 소프트웨어입니다. 이 소프트웨어를 통해 워드, 엑셀, ppt, wps의 관련 파일을 브라우저에서 직접 보고 편집할 수 있으므로 별도로 편집할 필요가 없습니다. 로컬에서 파일을 다운로드한 후, 파일을 수정하고, 비즈니스 시스템의 업로드 기능을 통해 다시 서버에 업로드하는 것은 비교적 번거로운 작업입니다.

좋아요, 오늘은 여기까지입니다. VUE는 앞으로 더 많은 연구가 필요합니다. 먼저 Softhang 문서 제어 예제를 살펴보겠습니다~~