vue.js 의 비계 vue-cli 프로젝트 구축 절차

2596 단어 vuecli비계
손발 걸 이 는 무엇 입 니까?
알다 시 피 현재 의 전단 프로젝트 가 점점 커지 고 있 습 니 다.우리 전단 프로그래머 들 은 0 부터 완전한 프로젝트 를 구축 하 는 데 시간 이 걸 리 기 때문에 전단 공사 의 비계 가 나 타 났 습 니 다.
제 가 사용 하 는 vue-cli 도 그 중의 하나 입 니 다.그리고 다른 것 도 잘 모 르 겠 습 니 다.제 가 접촉 이 많은 이 vue-cli 를 말씀 드 리 겠 습 니 다.
그러나 모든 핸들 의 핵심 은 완전한 프로젝트 구 조 를 신속하게 구축 하기 위해 개발 자 는 생 성 된 프로젝트 구 조 를 바탕 으로 개발 하면 매우 간단 하고 효율 적 이다.
그 다음 에 vue-cli 의 비계 프로젝트 템 플 릿 은 browserify 와 webpack 이 있 습 니 다.vue-lic 라 는 비계 는 미리 정 의 된 템 플 릿(서로 다른 서버 에 저장)을 로 컬 로 복사 하여 프로젝트 의 초기 구조 로 하고 홈 페이지 는 두 개의 템 플 릿 을 제공 합 니 다.webpack-simple 과 webpack 두 가지 입 니 다.
두 가지 차이 점 은 웹 팩-simple 은 Eslint 검사 기능 등 기능 을 포함 하지 않 고 일반 프로젝트 는 기본적으로 웹 팩-simple 로 충분 하 다 는 것 이다.
저 는 wbpack 이 걸 썼 습 니 다.
자신 이 손발 걸 이 를 만 들 수 있 는 지 에 대해 서 는 긍정 적 입 니 다.자신 만 템 플 릿 을 써 서 github 에 놓 으 면 됩 니 다.앞으로 의 프로젝트 를 세우 면 자신 이 세운 비 계 를 사용 할 수 있다.
vue-cli 사용
여기 서 제 가 사용 하 는 코드 편집기 가 vs code 이기 때문에 저 는 vs code 의 인터페이스 에 따라 보 여 드 리 겠 습 니 다.
터미널 이 있 는 다른 명령 편집기 에서 도 사용 할 수 있 습 니 다.
STEP 1:vue-cli 설치

npm install -g vue-cli

설치 완료 후 명령 을 통과 할 수 있 습 니 다.
vue list 에서 어떤 템 플 릿 이 호출 될 수 있 는 지 보기;

두 번 째 단계:프로젝트 디 렉 터 리 구축
명령 형식:vue init <template-name> <project-name>:위의 많은 템 플 릿 을 말 합 니 다.
:자신의 항목 의 이름 을 말 합 니 다.
예 를 들 어 웹 팩 이라는 템 플 릿 을 사용 합 니 다.  vue init webpack vuetest

STEP 3:설치 의존
새로 만 든 폴 더 에 들 어가 기:
명령 형식:cd vuetest폴 더 에 의존 도 를 설치 합 니 다.
명령 형식:npm install주의:
cnpm 타 오 바 오 라 는 패키지 관리 자 를 사용 하여 의존 도 를 설치 하지 않 아 도 비교적 많은 것 이 부족 할 수 있 습 니 다.
npm 로 다운로드 의존 이 느 리 지만 외국 링크 와 연결 되 어 있 기 때 문 입 니 다.
다음은 지금까지 있 었 던 곳 이다.

STEP 4:직접 실행
명령 형식:npm run dev터미널 에 이 명령 을 직접 입력 하면 OK 입 니 다.
기본 값 은 로 컬 8080 포트 입 니 다:


여기까지.OK!
웹 페이지 템 플 릿 으로 만 든 vue 프로젝트 디 렉 터 리 는 OK 입 니 다.
주의:
npm run 실행 중  dev 에서 사용 가능  cnpm run dev 로 대체 합 니 다.
그 속
설치
명령
다른 용법 은 npm 와 다 를 수 없다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
JavaScript 미끄럼 탐색 표시 줄 효과 구현
jquery 플러그 인 개발 옵션 제작 상세 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage