배경:
vue로 프론트엔드 프로젝트를 만들고 작은 웹사이트를 작성해서 손연습을 해보고 싶은데 프론트엔드 경험이 전무해서 vue용 오픈소스 템플릿을 인터넷에서 찾아서 사용했습니다 주소는 다음과 같습니다 :
오픈 소스 프로젝트 주소: GitHub - PanJiaChen/vue-admin-template: vue2.0 최소 관리 템플릿
노드 소프트웨어 주소: /download/release/v16.20.0/의 인덱스
오픈소스 프로젝트가 5년 동안 업데이트가 되지 않았기 때문에 비교적 오래된 vue2.6 버전을 사용하지만 특별한 요구 사항이 없고 거의 사용이 불가능합니다.
단계:
1. 프로젝트 다운로드
직접 다운로드한 후 로컬 디렉터리에 압축을 풉니다(예: D:\vue-admin-template).
2. 환경 설치
vue 프로젝트의 컴파일 및 시작에는 node, npm 및 Visual Studio C++ 라이브러리가 필요하므로 환경을 설치해야 합니다.
노드 공식 웹 사이트로 이동하여 소프트웨어 패키지를 다운로드하십시오. 프로젝트 버전 문제로 인해 여기에서 노드 v16 버전을 다운로드하십시오. 내 컴퓨터는 Windows 시스템이므로 설치 패키지를 msi 형식으로 다운로드하십시오.
컴퓨터에 다운로드 후 더블 클릭하여 바로 설치 가이드 페이지의 마지막 페이지에서 설치해야 할 도구를 확인하면 npm 및 Visual Studio C++ 라이브러리를 자동으로 설치할 수 있습니다.
3. 환경 확인
설치가 완료되면 컴퓨터를 다시 시작하고 명령줄 페이지에서 node -v 및 npm -v 명령을 실행하고 버전 번호가 나타나면 설치가 성공한 것입니다.
응용 프로그램 및 기능 페이지를 열고 검색 창에 c++를 입력하면 다음과 같은 인터페이스가 나타나 설치가 완료되었음을 나타냅니다.때때로 2015-2022가 아닌 경우도 있지만 2015-2019도 나타날 수 있습니다.이것은 버전 번호입니다. 2013, 2015, 2017, 2019, 2022 등의 버전이 있습니다. 이 프로젝트에는 최소 2017 버전이 필요합니다.
4. 프로젝트 종속성 패키지 다운로드
프로젝트 디렉터리를 입력하고 주소 표시줄에 cmd를 입력한 다음 명령줄 인터페이스를 입력합니다.
미러 소스를 국내로 전환
npm 구성 설정 레지스트리 https://registry.npm.taobao.org
미러 소스 전환이 성공했는지 확인
npm 구성 레지스트리 가져오기
종속성 패키지 설치 수행
npm 설치
5. 프로젝트 시작
주문 실행
npm 실행 개발
명령이 실행된 후 웹사이트 로그인 주소가 기본 브라우저에서 자동으로 열립니다.
6. 프로젝트 빌드
주문 실행
npm run build:prop
프로젝트 디렉토리에 /dist 폴더를 생성하고 패키징된 프로젝트 파일을 저장하고 파일을 웹 서버에 직접 복사합니다.서버는 nginx 또는 tomcat을 선택할 수 있습니다.
비고: 5단계와 6단계의 명령이 dev 및 build:prop를 사용하는 이유는 프로젝트의 구성 때문이며 서로 다른 프로젝트가 일관성이 없습니다.