웹 팩 으로 Vue 프로젝트 구축 실천

최근 내부 프로젝트 에서 vue+webpack 기반 시 도 를 했 습 니 다.작은 범위 에서 동료 들 과 토론 한 후에 도 많은 친구 들 이 인정 하고 좋아 하기 때문에 이 글 을 통 해 더 많은 사람들 에 게 공유 합 니 다.
시작 하기 전에 node 환경 을 설치 해 야 합 니 다.(설치 과정 은 여기 서 빠 지지 않 는 다)
1.기본 구 조 를 만 들 려 면 먼저 빈 폴 더(저 는 todos 라 고 합 니 다.마음대로 이름 을 지 을 수 있 습 니 다)를 프로젝트 의 루트 디 렉 터 리 로 만들어 야 합 니 다.의존 관계 가 없 는 package.json 을 만 들 고 명령 행 npm init 를 통 해 만 들 수 있 습 니 다.

기본 정 보 를 설정 하면 됩 니 다.index.html 파일 을 만 듭 니 다.이것 은 브 라 우 저 에 표 시 된 페이지 입 니 다.

주의:1.이곳 은 잠시 존재 하지 않 습 니 다.2.데 이 터 는 vue 파일 에 채 워 집 니 다.src 폴 더 를 만 들 고 폴 더 에 main.js 파일 을 새로 만 듭 니 다.

이렇게 해서 우 리 는 vuejs 골격 에 관 한 것 을 완 성 했 습 니 다.그러나 어떻게 그 를 브 라 우 저 에서 실행 시 킬 수 있 습 니까?이 럴 때 우 리 는 웹 팩 을 이용 하여 js 파일 로 포장 해 야 합 니 다.
2.기본 웹 팩 구축 웹 팩.config.js 파일 만 들 기:

명령 줄 에 웹 팩 설치 하기:

로 컬 라 이브 러 리(dev dependencies)를 설치 하려 면 package.js 에 devDependencies 부분 을 추가 해 야 합 니 다.

저장 후 실행:npm install 다음 vuejs 라 이브 러 리 를 dependencies 에 설치 합 니 다.

마지막 으로 웹 팩 을 실행 하여 포장 합 니 다:

3.vue-loader 와 vue 파일 은 vue-loader 가 무엇 입 니까?vue-loader 는 웹 팩 에서 loader 플러그 인 으로.vue 파일 을 구성 요소 로 출력 할 수 있 습 니 다.component 라 는 폴 더 를 만 들 고 폴 더 에 app.vue 파일 을 새로 만 듭 니 다.app.vue 내용 은 다음 과 같 습 니 다.

그리고 main.js 코드 를 수정 합 니 다.다음 과 같 습 니 다.

다시 한 번 운행 해 보 세 요.우 리 는 잘못 보고 한 것 을 보 았 습 니 다.
webpack
vue 의 새로운 문법 을 어떻게 처리 해 야 할 지 모 르 겠 어 요.그래서 웹 팩 설정 파일 을 수정 해 야 합 니 다:

동시에 package.json 에 라 이브 러 리 를 추가 합 니 다.

새로 라 이브 러 리 를 추가 한 후 npm install 에서 의존 패 키 지 를 다운로드 한 다음 다시 포장 합 니 다.

브 라 우 저 를 다시 새로 고치 면 최신 페이지 를 볼 수 있 습 니 다.4.열 모듈 대체/열 업데이트 열 모듈 대체 또는 열 업데이트 가 현재 가장 인기 있 는 새로운 기술 입 니 다.자 바스 크 립 트 파일 을 저장 하 라 고 하면 해당 구성 요 소 를 실시 간 으로 업데이트 합 니 다.우선,웹 팩 의 dev server 를 사용 해 야 합 니 다.devDependencies 가 package.json 에 있 는 것 을 수정 합 니 다.

그리고 명령 창 에서 cnpm install 을 실행 합 니 다.의존 패 키 지 를 다운로드 한 후 웹 팩-dev-server 를 다운로드 하고 명령 행 cnpm install-g 웹 팩-dev-server 를 실행 한 후 패키지.json 에 스 크 립 트 를 추가 합 니 다.

명령 행 npm run dev 실행:

여기 서 큰 내용 을 보 았 으 니 우 리 는 운행 해 야 한다.http://localhost:8080/효 과 를 볼 수 있 습 니 다.여기 서 주의해 야 할 것 은 이전에 우 리 는 웹 팩.config.js 에 publicPath 를 설정 하지 않 았 지만 웹 팩-dev-server 를 사용 하면 업데이트 가 되 지 않 을 것 이라는 것 을 알 수 있 습 니 다.package.json 파일 에서 publicPath 주석 을 사용 해 보 겠 습 니 다.

app.vue 코드 는 다음 과 같 습 니 다.

명령 npm run dev 를 입력 하여 브 라 우 저 에 표시 합 니 다:

페이지 를 다음 으로 변경 할 때:

브 라 우 저 를 새로 고침 하여 변 하지 않 음 을 표시 합 니 다.이 때 PublicPath 주석 을 취소 하고 명령 줄 을 다시 입력 하여 브 라 우 저 를 새로 고 칩 니 다.이 때 업 데 이 트 를 표시 합 니 다.

명령 행 에 다시 질 필요 도 없고 코드 를 수정 하면 업데이트 된다.이 럴 때 우리 가 수정 할 때 template 에 있 는 html 를 발견 할 수 있 습 니 다.이 럴 때 브 라 우 저 는 초 변 합 니 다.브 라 우 저 를 새로 고 칠 필요 가 없습니다.예 를 들 어:


하지만 데이터 데 이 터 를 업데이트 하려 면 브 라 우 저 를 새로 고 쳐 야 합 니 다.(이곳 에서 저 는 차이 가 많 지 않 고 30 분 이 걸 렸 을 때 이 상황 을 알 게 되 었 습 니 다.저 는 제 코드 에 문제 가 있 는 줄 알 고 template 를 업데이트 할 때 새로 고 칠 필요 가 없고 안의 data 를 업데이트 할 때 새로 고 쳐 야 한 다 는 것 을 알 게 되 었 습 니 다.왜 그런 지 모 르 겠 어 요.)
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.