vue cli 비계 도구 설치 및 vue 프로젝트 구축

vue - cli 는 vue. js 프로젝트 비 계 를 공식 적 으로 발표 합 니 다. vue - cli 를 사용 하면 vue 프로젝트 를 신속하게 만 들 수 있 습 니 다. GitHub 주 소 는:https://github.com/vuejs/vue-cli
 
node. js 설치
우선 node 환경 을 설치 해 야 합 니 다. 중국어 홈 페이지 로 바로 갈 수 있 습 니 다.http://nodejs.cn/설치 패 키 지 를 다운로드 하 다.
다만 이렇게 설 치 된 node 는 고정 버 전 입 니 다. 여러 버 전의 node 가 필요 하 다 면 nvm 로 설치 할 수 있 습 니 다.http://blog.csdn.net/s8460049/article/details/52396399
설치 완료 후 명령 행 도구 에 입력 할 수 있 습 니 다. node -v 화해시키다 npm - v, 출판 본 번 호 를 표시 할 수 있다 면 설치 성공 을 설명 합 니 다.

vue - cli
우선 비계 도 구 를 소개 합 니 다. 대부분의 설정 시간 을 절약 할 수 있 기 때문에 간단 한 절차 만 제시 하고 명령 이 순조롭게 실행 되도록 하 는 전 제 는 최신 버 전의 node 와 npm 를 설치 하 는 것 입 니 다. 여기 서 업그레이드 절 차 를 설명 하지 않 습 니 다.
전역 설치 vue - cli
?
1 npm install vue-cli -g
이 를 통 해 웹 팩 을 전역 적 으로 설치 합 니 다.
?
1 npm install webpack -g
너 는 우리 가 맞 춤 형 으로 만 든 것 을 사용 할 수 있다. cnpm (gzip 압축 지원) 기본 값 대신 명령 행 도구  npm :

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

아니면 직접 추가 로  npm  매개 변수  alias  새 명령:

alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"

npm 와 cnpm 버 전이 일치 하도록 alias 방식 을 사용 하 는 것 을 권장 합 니 다!(자신 이 cmd 에서 alias 를 사용 할 때 사용 하기 어 려 우 면 mobaxtem 을 사용 해 야 합 니 다.  명령 행 도구 만 사용 가능)
설치 에 실패 하면 사용 할 수 있 습 니 다. npm cache clean 캐 시 를 정리 하고 잘못 보고 하면 다음 에 -- force 를 추가 하여 강제 실행 한 다음 에 다시 설치 합 니 다.뒤의 설치 과정 에서 설치 에 실패 할 경우 캐 시 를 먼저 청소 해 야 합 니 다.
마찬가지 로 사용 할 수 있다 cnpm -v 설치 성공 여부 확인

그리고 cnpm 를 사용 하여 vue - cli 와 webpack 을 설치 합 니 다.

cnpm install -g vue-cli

최신 vue 프로젝트 템 플 릿 에는 웹 팩 플러그 인 이 있 기 때문에 웹 팩 을 설치 하지 않 아 도 됩 니 다.
설치 완료 후 사용 가능 vue -V (V 대문자 주의) 설치 성공 여 부 를 확인 합 니 다.

'vue' 를 인식 할 수 없습니다. npm 버 전이 너무 낮 을 수도 있 습 니 다. npm install - g npm 로 버 전 을 업데이트 할 수 있 습 니 다.
3. 항목 생 성
우선 명령 줄 에 항목 디 렉 터 리 에 들 어가 서 입력 해 야 합 니 다:

vue init webpack vuedemo1

이 중 웹 팩 은 템 플 릿 이름 으로 vue. js GitHub 에서 더 많은 템 플 릿 을 볼 수 있 습 니 다.https://github.com/vuejs-templates
vuedemo 는 사용자 정의 프로젝트 이름 입 니 다. 명령 이 실 행 된 후 현재 디 렉 터 리 에 이 이름 을 가 진 프로젝트 폴 더 를 생 성 합 니 다.

 
설정 이 완료 되면 디 렉 터 리 아래 에 프로젝트 폴 더 가 하나 더 있 는 것 을 볼 수 있 습 니 다. 그 안에 vue - cli 가 만 든 웹 팩 기반 vue. js 프로젝트 입 니 다.
그리고 프로젝트 디 렉 터 리 (cd Vue - Project) 에 들 어가 cnpm 설치 의존 도 를 사용 합 니 다 (package. json 이 있 는 대상 에서 실행 하 는 것 을 주의 하 십시오)

cnpm install

그리고 프로젝트 시작 (포트 번호 에 직접 접근 하면 테스트 데모 에 들 어 갈 수 있 습 니 다)

npm run dev

브 라 우 저가 열 린 후에 페이지 를 불 러 오지 않 으 면 로 컬 8080 포트 가 점용 되 었 을 수도 있 습 니 다. 설정 파일 을 수정 해 야 합 니 다. config>index.js
 
포장
자신의 프로젝트 파일 을 src 폴 더 아래 에 두 어야 합 니 다.
프로젝트 개발 완료 후 npm run build 를 입력 하여 포장 작업 을 진행 할 수 있 습 니 다.

npm run build

포장 이 완료 되면 dist 폴 더 가 생 성 됩 니 다. 파일 경 로 를 수정 했다 면 로 컬 파일 을 직접 열 어 볼 수 있 습 니 다.
프로젝트 가 실 행 될 때 dist 폴 더 를 서버 에 두 기만 하면 됩 니 다.