vue cli 전면 분석

앞 에 쓰기:
vue 는 무엇 입 니까?사용자 인터페이스 를 구축 하 는 점진 적 인 프레임 워 크(홈 페이지 해석)입 니 다.점진 적 인 프레임 워 크 가 무엇 입 니까?간단 한 대답 은 주장 이 가장 적 습 니 다.이런 개념 들 은 자신 만 볼 수 있 고 자신 이 이해 할 수 있 습 니 다.천 명의 독자 가 천 개의 햄릿 이지 만 많은 해석 을 할 수 있 습 니 다.Vue 공식 문 서 는 전면적 입 니 다.
vue-cli 를 사용 하면 vue 프로젝트 를 신속하게 만 들 수 있 습 니 다.vue-cli 는 매우 좋 습 니 다.그러나 처음에 환경 을 구축 하여 vue-cli 와 관련 된 내용 을 설치 할 때 일부 사람들 에 게 골 치 아 픈 일 입 니 다.저 는 vue-cli 의 프로젝트 환경 을 구축 할 때 도 상당히 많은 구 덩이 를 밟 았 습 니 다.이에 환경 을 구축 하 는 강 좌 를 썼 습 니 다.한 걸음 한 걸음 상세 하 게 해석 하 겠 습 니 다.필요 하신 분 들 은 참고 해 주시 고,좋아 하 시 는 분 들 은 파 찬 을 누 르 시 거나 본인 을 지 켜 봐 주시 면 도움 이 되 셨 으 면 좋 겠 습 니 다.
vue-cli 비계 의 장점:

성숙 한 vue 프로젝트 구조 디자인 으로 Vue 프로젝트 를 신속하게 초기 화 할 수 있 습 니 다.

vue-cli 는 공식 적 으로 지원 하 는 비계 로 본 버 전에 따라 교체 업데이트 된다.

vue-cli 는 로 컬 node 테스트 서버 를 제공 합 니 다.vue-cli 가 제공 하 는 명령 을 사용 하면 서버 를 시작 할 수 있 습 니 다.

통합 포장 온라인 방안.

5.모듈 화,번역,예비 처리,열 로드,정적 검 측 과 자동화 테스트 등 여러 가지 장점 도 있 습 니 다.여러분 이 깊이 사용 하면 vue-cli 의 강 한 점 을 발견 할 수 있 습 니 다.
이 강 좌 는 윈도 우즈 시스템 을 바탕 으로 한다.
다음은 본 격 적 으로 vue-cli 비 계 를 구축 하 겠 습 니 다.
명령 행 도구
명령 행 도 구 는 우리 가 npm 를 조작 하 는 기초 입 니 다.이것 은 반드시 있어 야 합 니 다.많은 튜 토리 얼 이 명확 하 게 쓰 이지 않 았 습 니 다.그 튜 토리 얼 이 올 라 오 자마자 명령 행 도 구 를 많이 붙 였 습 니 다.처음에 명령 행 도 구 를 어디서 사용 하 는 지 몰 랐 습 니 다.
git bash 명령 행 도구
1.windows 에 서 는 GitHub 의 데스크 톱 관리 도 구 를 사용 하 는 git bash 명령 행 도 구 를 추천 합 니 다.정상적으로 다운로드 하여 설치 하면 됩 니 다.
2.다운로드 주소,아래 그림 은 다운로드 설치 가 완료 되면 git bash 의 사용 방법 입 니 다.

ps:물론 자체 터미널 cmd 명령 행 도 구 를 사용 하려 면 가능 하지만 git bash 가 잘 사용 되 지 않 기 때문에 편리 합 니 다.
node.js 설치
1.중국어 홈 페이지 에 node.js 를 정상적으로 다운로드 하여 설치 하면 됩 니 다.특별히 주의해 야 할 점 이 없습니다(바보 식 설치).
2.홈 페이지 에서 node.js 를 다운로드 한 후 npm(패키지 관리 도구)를 가지 고 있 으 며,npm 를 따로 설치 할 필요 가 없습니다.
3.node.js 버 전 을 다운로드 하려 면 4.0 이상 이 어야 하 며 버 전이 너무 낮은 영향 을 받 지 않도록 해 야 합 니 다.
4.명령 행 도구(아무 폴 더 나)를 열 고 명령 행 node-v,npm-v 를 입력 하 십시오.다음 그림 과 같 습 니 다.해당 버 전 번호 가 나타 나 면 설치 에 성공 한 것 을 설명 합 니 다.

타 오 바 오 미 러 설치
cnpm(타 오 바 오 미 러)관련:

이것 은 완전한 npmjs.org 미 러 로 npm 위의 모듈 을 동기 화 하 는 데 사 용 됩 니 다.

cnpm 의 동기 주파 수 는 10 분 입 니 다.

cnpm 를 설치 한 이유:npm 의 서버 는 외국 의 것 이기 때문에 가끔 우 리 는'모듈'을 설치 하 는 것 이 매우 느 리 고 느 리 며 매우 느리다.

cnpm 의 역할:타 오 바 오 미 러 는 npm 위의 모듈 을 국내 서버 에 동기 화하 여 우리 가 모듈 을 설치 하 는 시간 을 향상 시 킵 니 다.

타 오 바 오 미 러 를 설치 한 후 cnpm 와 npm 명령 행 을 모두 사용 할 수 있 습 니 다.두 사람 은 충돌 하지 않 습 니 다

설치 방법:명령 행 도 구 를 열 고 명령 행 을 입력 하 십시오:

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

cnpm 사용 방법:

$ cnpm install [name]

모듈 을 설치 할 때 npm 를 cnpm 로 바 꾸 면 됩 니 다.국내 많은 coder 는 cnpm 를 사용 합 니 다.개인 적 으로 모두 설치 하 는 것 을 권장 합 니 다.첨부:타 오 바 오 미 러 사이트,
웹 팩 설치
설치 방법:명령 행 도 구 를 열 고 명령 행 을 입력 하 십시오:

npm install webpack -g

설치 에 성공 한 후 웹 팩-v 를 입력 하 십시오.해당 버 전 번호 가 나타 나 면 설치 에 성공 한 것 을 설명 합 니 다.
vue-cli 비계 구축 도구 설치
설치 방법:전역 설치,임의의 폴 더,명령 줄 입력:

npm install vue-cli -g

설치 완료 후 명령 행 vue-V 를 입력 하여 버 전 번 호 를 확인 하고 해당 버 전 번호 가 나타 나 면 성공 합 니 다.

여 기 는 대문자 V 입 니 다.
vue-cli 를 통 해 vue 프로젝트 를 초기 화 합 니 다.
위의 몇 단 계 를 통 해 비 계 를 설치 하 는 데 필요 한 환경 과 도 구 를 모두 준비 하 였 습 니 다.다음은 vue-cli 를 사용 하여 프로젝트 를 초기 화 할 수 있 습 니 다.
1。항목 을 배치 하기 위해 vuetext(항목 이름)폴 더 를 새로 만 듭 니 다.
새 폴 더 의 이전 폴 더 에서 명령 줄 도 구 를 오른쪽 단추 로 열 고 명령 줄 을 입력 하 십시오:

vue init webpack vuetext1(   )

주:항목 이름 은 대문자 로 쓸 수 없고 중국 어 를 사용 할 수 없습니다.
이 명령 을 설명 하 십시오.이 명령 은 vue 프로젝트 를 초기 화 하 는 것 입 니 다.그 중에서 웹 팩 은 구축 도구,즉 전체 프로젝트 는 웹 팩 을 기반 으로 한 것 입 니 다.이 폴 더 는 전체 프로젝트 폴 더 의 이름 입 니 다.이 폴 더 는 지정 한 디 렉 터 리 에 자동 으로 생 성 됩 니 다.
2。다음은 비계 설치 과정(설치 절 차 는 그림 아래 에서 해석)

vue-cli 초기 화 항목 옵션 설정 상세 분석

$ vue init webpack vuetext1---------------------   vue-cli,   vue     
 Target directory exists. Continue? (Y/n) y--------------------   vuetext1         
Target directory exists. Continue? Yes
Project name (vuetext1)---------------------     （         ），ps：          ，     ，     
 Project name vuetext1
Project description (A Vue.js project)---------------------    ，     
 Project description A Vue.js project
 Author (OBKoro1)---------------------     
 Author OBKoro1 
 Vue build (Use arrow keys)--------------------      ，     （runtime standalone），      
 Vue build standalone
 Install vue-router? (Y/n) y--------------------      ，      
 Install vue-router? Yes
 Use ESLint to lint your code? (Y/n) n---------------------    eslint    ，       no，           ，        
 Use ESLint to lint your code? No
 Setup unit tests with Karma + Mocha? (Y/n)--------------------        
 Setup unit tests with Karma + Mocha? Yes
 Setup e2e tests with Nightwatch? (Y/n) y)--------------------    e2e   
 Setup e2e tests with Nightwatch? Yes
vue-cli ・ Generated "vuetext1".
To get started:)--------------------    
 cd vuetext1)--------------------        
 npm install)--------------------      
 npm run dev)--------------------    

문 서 는 https://vuejs-templates.github.io/webpack)--------------------vue-cli 공식 문서 에서 찾 을 수 있 습 니 다.
현재 vuetext 1 프로젝트 는 초기 화 되 었 습 니 다.안에 도 파일 이 있 지만 아직 성공 적 으로 실행 되 지 않 았 습 니 다.
3.프로젝트 를 어떻게 실행 합 니까?

vuetext 1 프로젝트 에 만 든 폴 더 에 들 어가 vuetext 1 프로젝트 의 폴 더 에서 git bash 명령 행 도 구 를 오른쪽 단추 로 실행 합 니 다.

설치 항목 의존.명령 행:npm install.앞에서 프로젝트 를 초기 화 할 때 package.json 파일 이 존재 합 니 다.npm install 설치 프로젝트 에 필요 한 의존 도 를 직접 사용 합 니 다.그렇지 않 으 면 프로젝트 가 올 바 르 게 실 행 될 수 없습니다.

완 성 된"vuetext 1"디 렉 터 리 를 만 드 는 것 은 다음 과 같 습 니 다.

완 료 된 프로젝트 구조 만 들 기
여기까지 vue-cli 를 사용 하여 vue 프로젝트 를 초기 화 하 는 데 성공 하 였 습 니 다.
시작 항목:
vuetext 1 디 렉 터 리 에서 명령 행 npm run dev 를 실행 하고 서 비 스 를 시작 합 니 다.서비스 가 시작 되면 브 라 우 저 는 기본적으로'환영 페이지'를 엽 니 다.다음 그림 입 니 다.

vue-cli 프로젝트 가 성공 적 으로 시작 되 었 습 니 다.
메모:기본 서비스 가 시 작 된 것 은 로 컬 8080 포트 입 니 다.따라서 8080 포트 가 다른 프로그램 에 의 해 점용 되 지 않도록 하 십시오.다른 vue 프로젝트 가 실 행 될 때 ctrl+c 를 사용 하여 실행 을 중단 할 수 있 습 니 다.