노드를 설치 (1)
최종 개발 프레임 워크와 환경, Node.js를 개발 환경을 설치 Node.js를 필수, VUE 작업은 설치가 완료됩니다 달성하기 위해 노드의 NPM 관리 도구, 다운로드 https://nodejs.org/en/에 따라 달라집니다 그 후, 명령을 열고 입력 cmd를 시작합니다. (관리자 권한이 cmd를 필요).
노드의 버전 번호를 확인합니다
좋은 노드를 다운로드 한 후 입력, 관리자 cmd를 관리 도구를 엽니 다 (자동으로 환경 변수를 구성에 기본적으로 설치) node -v, 뷰 노드의 버전 번호를 입력, 버전 번호는 설치가 성공적으로 나타납니다.
Taobao의 NPM 거울을 설치합니다
NPM 해외이기 때문에, 느린 사용하는, 우리가 여기 Taobao의 사용 cnpmVUE를 설치하는 거울.
Taobao의 cnpm 명령 관리 도구가 기본 NPM 관리 도구를 교체 할 수 있습니다.
다음 명령을 입력 :
npm install -g cnpm -registry=https://registry.npm.taobao.org
4. 비계 글로벌 VUE-CLI를 장착
Taobao의 이미지가 성공적으로 설치 후, 우리는 전 세계적으로 VUE-CLI 발판을 할 수 있습니다.
명령 입력 : cnpm install --global vue-cli 입력하고
설치가 명령 입력 VUE, 정보 밖으로 VUE 및 설치가 성공적으로 성공적으로 확인,
다음 명령을 입력합니다 --global VUE를 설치 cnpm을 -cli
이 프로젝트는 새로 구축
발판을 구축 완료 후, 우리는 VUE는 디스크를 변경하려는 경우 파일이 크고, 다운로드 때문에, 나는 C 드라이브에 설치되지 않은 시도, 제안이 시간을 새로운 프로젝트를 빌드 시작하려면, 다음 직접 D를 입력 : 직접 입력 디스크를 변경
명령을 입력 : vue init webpack my-project-first
입력, my-project-first내 자신의 폴더의 이름입니다 기반 웹팩 프로젝트는 설치할지 여부까지 캐리지 리턴 후 입력 된되고 vue-route,
우리가 입력 그래서 우리가 사용 투사하는 y 캐리지 리턴
6. 주
여기에 직접 입력 할 수 있습니다, 우리가 덜 이것보다 수행의 필요성의 JS 구문 검사가있을 것입니다 no, 직접 다시 입력 할 수 있습니다 no우리는 더 적은보다는되고 있으며,
열린 D 드라이브 보면, 당신은 더 많은 단지 창조보다 더 찾을 것입니다 폴더
프로젝트 폴더를 입력합니다 (7)
: 폴더 이제 폴더를 입력 입력 할 수 음을 다운로드 한 cd my-project-first새로운 프로젝트로 입력합니다.
8. 설치 프로젝트에 따라 달라집니다
다양한 템플릿이 상호 의존적 사이에, 그래서 지금 우리가 종속성을 설치하려는 때문에, 프로젝트에 다음 명령을 입력합니다.
다음 명령을 입력 : npm install
이 느린 설치 사용하도록 강제 할 수있다 cnpm install
참고 : cnpm 사용 해보세요 발생했습니다 알 수없는 오류가있을 수 있습니다 :npm install
9. 실행
모든 설치 환경이 준비에, 우리는 명령을 입력 VUE 새로운 프로젝트의 작동을 테스트해야 의존 : npm run dev그냥 Enter 키를 누릅니다.
그것은 로컬 호스트 주소 기본값에 액세스하는 브라우저를 나타납니다 : 8080
참고 : run dev만 VUE를에 package.json포장 방법, 기본 초기화 프로젝트입니다 run dev후반 패키지 항목을 사용자 정의 설정을 할 수 있습니다, run build공감
액세스를 확인합니다 (10)
8080그것은 기본 포트입니다, 액세스는, 브라우저에서 직접 입력 localhost:8080기본 템플릿을 열 수 있습니다, 지금까지, VUE 개발 환경 설정이 완료됩니다.
마지막으로, 어떻게 기본 포트를 변경하려면?
우리의 초기화의 루트 디렉토리가있는 것을 볼 수 있습니다 config열기, 이름이 구성에 대해 알고 참조 폴더 config디렉토리를 index.js수정할 수, host그리고 portIP와 포트를 변경할 수없는 경우에만 필요에 따라, 다른 구성 정보를 수정할 수 있습니다.