vue+node+webpack 환경 구축 강좌

환경 구축
1.1.홈 페이지 에 node.js 설치http://www.runoob.com/nodejs/nodejs-install-setup.html
node 버 전 을 주의 하 십시오.조화 로 운 모드 를 지원 하 는 node 만 es6 를 지원 합 니 다.웹 팩 기반 프로젝트 이름 을 구축 할 때 오류 가 발생 하지 않 습 니 다.최신 버 전 을 추천 합 니 다.
설치 패 키 지 를 다운로드 한 후 직접 설 치 를 클릭 하면 됩 니 다.테스트 설치 성공 한 인 터 페 이 스 는 다음 과 같 습 니 다:

1.2 npm 를 이용 하여 웹 팩 명령 행 문 구 를 npm install 웹 팩-g 로 설치 합 니 다.테스트 설치 성공 한 인 터 페 이 스 는 다음 과 같 습 니 다:

1.3.다음은 타 오 바 오 미 러 를 설치 하 는 것 입 니 다.다음 과 같은 그림 입 니 다.

1.4.다음은 전역 에 vue-cli 를 설치 하 는 것 입 니 다.주의해 야 할 것 은 npm 를 사용 하여 vue-cli 를 설치 할 때 시간 이 오래 걸 리 고 두 시간 이 넘 을 수 있 습 니 다.
설치 문 구 는 npminstall--globalvue-cli 입 니 다.
1.5.웹 팩 템 플 릿 기반 새 항목 만 들 기
명령 행 문 구 는 vue init webpack my-project 입 니 다.템 플 릿 새 항목 을 만 들 때 지정 한 폴 더 아래로 들 어가 야 합 니 다.
cmd 에 vue init webpack my-project(프로젝트 폴 더 이름)를 입력 하고 차 로 돌아 간 후 잠시 기 다 립 니 다.'git'아래 항목 이 순서대로 나타 나 면 다음 그림 을 누 르 십시오.

명령 실행 이 완료 되면 my-project 폴 더 아래 에 다음 과 같은 내용 이 더 많아 진 것 을 볼 수 있 습 니 다.

새 프로젝트 를 만 들 때 다음 과 같은 오 류 를 보고 하면 node 버 전이 너무 낮 고 조화 로 운 모드 가 지원 되 지 않 습 니 다(대개 es6,f 를 지원 하지 않 으 면 지원 되 지 않 습 니 다.구체 적 으로 는 큰 신의 가르침 이 필요 합 니 다).높 은 버 전의 node 로 바 꿔 야 합 니 다.오 류 는 다음 그림 과 같다.

5.설치 의존
cmd 에서 1).입력:cd my-project(프로젝트 이름),리 턴,구체 적 인 프로젝트 폴 더 로 들 어가 기
2).입력:cnpm install,리 턴,잠시 기다 리 기
이 명령 을 실행 하면 다음 과 같은 오류 가 발생 할 수 있 습 니 다.해결 방안 은 다음 과 같 습 니 다.

프로젝트 폴 더 로 돌아 가면 프로젝트 구조 에 node 가 하나 더 있 습 니 다.modules 폴 더(이 파일 의 내용 은 이전에 설 치 된 의존)
비계 기반 기본 항목 구 조 는 다음 그림 과 같 습 니 다.

6.webstorm 설치,프로젝트 도입
홈 페이지 에 가서 웹 스 트 롬 설치 패 키 지 를 다운로드 하여 설치 하 세 요.
계속 next,자신의 컴퓨터 시스템 에 따라 64 비트 를 설치 하 는 시스템 을 선택 하 십시오.32 비트 를 선택 하 십시오.js,css,html à jetbrains à 를 선택 한 다음 에 설치 합 니 다.
웹 storm 에서 file 에서 open 을 선택 하 십시오(항목 폴 더 선택)
보기 에는 매우 간단 해 보이 는데,나 는 며칠 후에 내 가 조작 을 잘못 할 까 봐 두렵다.
7.환경 구축 성공 여부 테스트
방법 1:cmd 에 입력:cnpm rundev
(분명히 코드 를 수정 할 때마다 cmd 에 가서 명령 을 입력 하 는 것 은 매우 번 거 로 운 과정 이기 때문에 웹 storm 에서 npm 메뉴 를 찾 습 니 다.
package.json 파일 에서 오른쪽 단 추 를 누 르 면―show npm scripts 를 누 르 면 메뉴 를 내 보 낼 수 있 습 니 다.이후 실행 은 npm 메뉴 에서 dev 를 두 번 누 르 면 됩 니 다.
명령 행 실행 항목 과 dev 실행 항목 을 함께 진행 할 수 없습니다.하 나 를 진행 할 때 다른 하 나 를 닫 아야 합 니 다.그렇지 않 으 면 포트 가 점용 한 오 류 를 보고 할 수 있 습 니 다.
）
방법 2:탐색 에 입력:localhost:8080(기본 포트 8080)
실행 명령 을 입력 하면 오류 가 발생 합 니 다.다음 그림 과 같이 두 가지 상황 이 있다.
첫 번 째 상황:포트 점용 문제

해결 방안 은:
프로젝트 1:프로 세 스 에서 이 포트 를 닫 습 니 다.
a.cmd 를 열 고 명령 netstat Cano 를 입력 하면 모든 포트 번호 가 나타 납 니 다.
b.local address 아래 는 포트 번호 이 고 PID 는 포트 번 호 를 사용 하 는 프로그램의 프로 세 스 번호 입 니 다.(프로 세 스 번 호 를 기억 하 십시오)
c.작업 관리자(ctrl+alt+delete)를 열 고 프로 세 스 를 클릭 한 다음 보 기 를 클릭 하고'열 선택'을 선택 하 십시오.확인 을 클릭 하면 포트 프로 세 스 프로그램 을 점용 한 것 을 찾 을 수 있 습 니 다.
d.기억 하 는 프로 세 스 번 호 를 찾 아 닫 습 니 다.
프로젝트 2:config/index.js 파일 에서 포트 번 호 를 수정 합 니 다.Port:새 구호.
두 번 째:npm 버 전이 너무 낮 아서 업그레이드 가 필요 합 니 다.

해결 방안:
a.입력 명령:npm install-g npm
b.복사 C:\\Users\{당신 의 Windows 사용자 이름}\AppData\\Roamingpmodemodulespm 의 파일 을 NodeJS 설치 디 렉 터 리 에 있 는 odemodulespm 에서 기 존 파일 을 모두 덮어 씁 니 다.
(또는 벤젠 을 비교 하 는 방법 으로 이전의 절 차 를 다시 한 번 걷는다)
실행 한 후의 효 과 는 다음 그림 과 같다.

2.개인의 수요 에 따라 존재 하 는 변화
1.vue.js 는 기본 포트 번호 8080 을 지정 한 포트 로 변경 합 니 다.
npm run dev 를 실행 하 는 것 은 루트 디 렉 터 리 에 있 는 package.json 을 호출 하 는 것 입 니 다.
package.json 을 열 면 이런 코드 가 있 습 니 다.

"scripts":{
"dev":"nodebuild/dev-server.js",
"build":"nodebuild/build.js",
"lint":"eslint--ext.js,.vuesrc"

}

이 를 통 해 알 수 있 듯 이 build 디 렉 터 리 에 있 는 dev-server.js 파일 을 봐 야 합 니 다.
dev-server.js 파일 에서 찾 을 수 있 습 니 다.
varuri='http://localhost:'+port
이 곳 의 port 는 우리 가 찾 아야 할 것 입 니 다.dev-server.js 의 시작 부분 에서 우 리 는 발견 할 수 있 습 니 다.
varpath=require('path')
path 는 또 어디서 왔 을 까?
루트 디 렉 터 리 아래 에 config 폴 더 가 있 습 니 다.이름 만 봐 도 설정 과 관련 이 있 습 니 다.config 디 렉 터 리 아래 index.js 를 엽 니 다.

dev:{
env:require('./dev.env'),
port:8080,
autoOpenBrowser:true,
assetsSubDirectory:'static',
assetsPublicPath:'/',
proxyTable:{},
cssSourceMap:false

}

포트 를 바 꿀 수 있 을 뿐만 아니 라 필요 에 따라 다른 설정 정 보 를 바 꿀 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.