vue.js 프로젝트를 시작하는 방법

방법: 1. node.js를 설치합니다. 2. vue-cli 스캐폴딩 빌딩 도구를 설치합니다. 3. "vue init webpack project name" 명령을 사용하여 프로젝트를 빌드합니다. 5. " npm run dev" 명령을 사용하여 프로젝트를 실행합니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue2.9.6 버전, Dell G3 컴퓨터.

관련 권장 사항: "vue.js Tutorial"

먼저 필요한 사항을 나열하세요.

• node.js 환경(npm 패키지 관리자)
• vue-cli 스캐폴딩 구성 도구
• cnpm npm의 Taobao 미러

node.js 설치

node.js 공식 웹사이트에서 node를 다운로드하고 설치하세요. 설치 과정은 매우 간단합니다. "다음 단계"만 하면 됩니다(어리석은 설치).

설치가 완료된 후 아래와 같이 명령줄 도구를 열고 node -v를 입력하면 해당 버전 번호가 나타나면 설치가 성공한 것입니다.

npm 패키지 관리자는 node.js에 통합되어 있으므로 npm -v를 직접 입력하면 아래 그림과 같이 npm 버전 정보가 표시됩니다.

알았어! 노드 환경이 설치되었으며, npm 패키지 관리자도 사용 가능합니다. 일부 npm 리소스가 차단되었거나 외부 리소스이기 때문에 npm을 사용하여 종속성 패키지를 설치할 때 종종 실패하므로 npm의 국내 미러---cnpm도 필요합니다.

Install cnpm

명령줄에 npm install -g cnpm --registry=http://registry.npm.taobao.org를 입력하고 기다리면 아래와 같이 설치가 완료됩니다.

완료 후 npm 대신 cnpm을 사용하여 종속성 패키지를 설치할 수 있습니다.

vue-cli 스캐폴딩 빌드 도구 설치

명령줄에서 cnpm install -g vue-cli 명령을 실행하고 설치가 완료될 때까지 기다립니다. (참고로 여기서는 npm 대신 cnpm을 사용합니다. 그렇지 않으면 속도가 매우 느려지고 작동이 중단됩니다.)

위의 세 단계를 거쳐 준비해야 할 환경과 도구가 준비되면 시작할 수 있습니다. vue-cli를 사용하여 프로젝트를 빌드합니다.

vue-cli를 사용하여 프로젝트 빌드

프로젝트를 생성하려면 먼저 디렉터리를 선택한 다음 명령줄에서 해당 디렉터리를 선택한 디렉터리로 변경해야 합니다. 여기서는 새 프로젝트를 저장할 데스크탑을 선택한 다음 아래와 같이 먼저 데스크탑에 디렉터리를 cd해야 합니다.

데스크탑 디렉토리의 명령줄에서 vue init webpack firstVue 명령을 실행하세요. 이 명령어에 대해 설명해주세요. 이 명령어는 webpack이 빌드 도구인 프로젝트, 즉 전체 프로젝트가 webpack을 기반으로 하는 프로젝트를 초기화한다는 의미입니다. 그 중 firstVue는 전체 프로젝트 폴더의 이름입니다. 이 폴더는 아래와 같이 지정한 디렉터리에 자동으로 생성됩니다(제 예에서는 폴더가 바탕화면에 생성됩니다).

초기화 명령을 실행하면 사용자에게 프로젝트 이름, 설명, 작성자 및 기타 정보와 같은 몇 가지 기본 옵션을 입력하라는 메시지가 표시됩니다. 입력을 채우지 않으려면 Enter 키를 누르기만 하면 됩니다. 기본.

firstVue 폴더를 열면 프로젝트 파일은 다음과 같습니다.

전체 프로젝트의 디렉터리 구조인데, 그 중 src 디렉터리에서 주로 수정을 합니다. 이 프로젝트는 아직은 구조적 프레임워크일 뿐이며, 아래와 같이 전체 프로젝트에 필요한 종속 리소스가 아직 설치되지 않았습니다.

프로젝트에 필요한 종속성 설치

종속성 패키지를 설치하려면 먼저 프로젝트 폴더(firstVue 폴더)로 CD를 이동한 후 cnpm install 명령을 실행하고 설치를 기다립니다.

설치가 완료되면 프로젝트 디렉터리의 firstVue 폴더에 프로젝트에 필요한 종속성 패키지 리소스가 포함된 추가 node_modules 폴더가 생깁니다.

종속성 패키지를 설치한 후 전체 프로젝트를 실행할 수 있습니다.

프로젝트 실행

프로젝트 디렉토리에서 npm run dev 명령을 실행하면 핫 로딩을 사용하여 애플리케이션이 실행됩니다. 핫 로딩을 사용하면 코드를 수정한 후 브라우저를 수동으로 새로 고치지 않고도 수정된 코드를 실시간으로 볼 수 있습니다. .

다음은 npm run dev 명령에 대한 간략한 소개입니다. "run"은 node build/dev-server에 대한 바로가기인 package.json 파일의 scripts 필드에 있는 dev에 해당합니다. .js 명령.

프로젝트가 성공적으로 실행되면 브라우저가 자동으로 localhost:8080을 엽니다(브라우저가 자동으로 열리지 않으면 수동으로 입력할 수 있습니다). 성공적으로 실행하면 아래와 같은 인터페이스가 표시됩니다.

이 페이지가 보이면 프로젝트가 성공적으로 진행되고 있다는 뜻입니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 vue.js 프로젝트를 시작하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!