집 > 기사 > 웹 프론트엔드 > vue-cli 설치 및 사용 단계에 대한 자세한 설명

vue-cli 설치 및 사용 단계에 대한 자세한 설명

php中世界最好的语言원래의: 2018-05-28 11:16:291847검색

이번에는 vue-cliinstallation사용법을 단계별로 자세히 알려드립니다. vue-cli 설치 및 사용 시 주의사항은 무엇인가요?

vue-cli 설치를 위한 전제조건은 npm이 설치되어 있어야 한다는 것입니다. npm을 설치하려면 노드 설치 패키지를 직접 다운로드하여 설치하면 됩니다. 명령줄 도구에 npm -v를 입력하면 npm 설치 여부와 버전을 확인할 수 있습니다. 나타나는 버전 번호는 npm 및 node를 설치했음을 나타냅니다. 이 명령을 사용할 수 없으면 시스템 버전에 따라 노드 소프트웨어 패키지를 다운로드하여 설치하면 됩니다.

1. vue-cli 설치

명령줄 도구에 다음을 입력합니다.

npm install vue-cli -g

-g: 전역 설치를 나타냅니다. vue -V를 사용하여 설치 버전 번호를 확인합니다(-V는 대문자임)

2. 프로젝트 초기화

vue init 명령을 사용하여 프로젝트를 초기화합니다.

vue init <template-name> <project-name>

: 템플릿 이름을 나타냅니다. Vue-cli는

webpack, webpack-simple, browserify, browserify-simple, simple

이라는 5가지 템플릿을 제공합니다. , 이렇게 할 수 있습니다. 프로젝트에 따라 이름을 지정하세요. 실제 개발 과정에서는 일반적으로 webpack 템플릿을 사용합니다.

vue init webpack vueclitest

명령을 입력하면 몇 가지 간단한 옵션이 표시되며 필요에 따라 입력하면 됩니다.

프로젝트 이름: 프로젝트 이름. 참고: 여기서는 대문자를 사용할 수 없습니다.

프로젝트 설명: 프로젝트 설명입니다.

Author: 작성자, git으로 작성자를 구성하면 읽혀집니다.

vue-router를 설치하시겠습니까? : vue의 routing 플러그인을 설치할지 여부입니다. yes

코드에 ESLint를 사용하시겠습니까? : 코드 오류와 스타일을 제한하기 위해 ESLint를 사용할지 여부입니다. 혼자서 연습할 필요가 없습니다. 대규모 팀으로 개발하는 경우 구성하는 것이 가장 좋습니다.

Karma +Mocha를 사용하여 단위 테스트를 설정합니까? 단위 테스트 도구를 설치해야 합니까? 우리는 그럴 필요가 없습니다. N

Nightwatch로 e2e 테스트를 설정하시겠습니까?사용자 행동시뮬레이션 테스트를 위해 e2e를 설치할지 여부는 제 연습에는 필요하지 않습니다. n

을 입력하면 첫 번째 단계가 초기화됩니다.

cd vueclitest vue 프로젝트 디렉토리를 입력하세요.

npm install 프로젝트 종속성을 설치합니다. 즉, package.json에 패키지를 설치합니다(cnpm을 사용하여 설치할 수도 있습니다).

npm run dev 개발 모드에서 프로그램을 실행합니다. 개발 서버 환경을 자동으로 구축하고 브라우저에서 열어 코드 변경 사항을 실시간으로 모니터링했습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!