집 > 기사 > 웹 프론트엔드 > Vue와 Node를 사용하여 웹팩 환경을 구축하는 방법

Vue와 Node를 사용하여 웹팩 환경을 구축하는 방법

php中世界最好的语言원래의: 2018-04-16 10:14:101588검색

이번에는 vue와 node로 webpack 환경을 구축하는 방법을 알려드리겠습니다. vue와 node로 webpack 환경 구축 시 주의사항은 무엇인가요?

1. 환경 설정

공식 홈페이지로 이동하여 node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)

을 설치하세요. 노드 버전에 주의하세요. 하모니 모드를 지원하는 노드만 es6을 지원하며, webpack 기반으로 프로젝트 이름을 빌드할 때 오류가 보고되지 않습니다. 최신버전을 추천해드려요

설치 패키지를 다운로드한 후 설치를 클릭하면 됩니다.

npm을 사용하여 webpack을 설치하는 명령줄 명령문은 npm install webpack -g입니다. 성공적인 테스트 설치를 위한 인터페이스는 다음과 같습니다.

다음 단계는 vue-cli를 전역적으로 설치하는 것입니다. npm을 사용하여 vue-cli를 설치하는 데 시간이 오래 걸리며, 2시간 이상 걸릴 수도 있다는 점에 유의하세요

설치 설명은 다음과 같습니다. npminstall --globalvue-cli

webpack 템플릿을 기반으로 새 프로젝트 만들기

명령줄 명령문은 vue init webpack my-project입니다(여기서 my-project는 파일 이름이고 파일 이름은 소문자만 가능합니다). 새 템플릿 프로젝트를 생성할 때 지정된 폴더로 이동해야 합니다.

cmd에 vue init webpack my-project(프로젝트 폴더 이름)을 입력하고 Enter를 누르고 잠시 기다리면 'git' 아래 항목이 차례로 나타납니다.

새 프로젝트를 생성할 때 다음과 같은 경우. 오류가 보고되면 노드 버전이 너무 낮고 조화로운 모드를 지원하지 않는다는 의미입니다(아마도 es6을 지원한다는 뜻일 것이고, 그렇지 않으면 f를 지원하지 않는다는 뜻일 것입니다. 자세한 내용은 전문가의 안내가 필요합니다). 교체해야 합니다. 더 높은 버전의 노드를 사용하세요. 오류는 아래와 같습니다:

cmd 1) 입력: cd my-project (프로젝트 이름), Enter 누르기, 특정 프로젝트 폴더 입력

Enter: cnpm install, Enter 누르기, 잠시 기다리기

프로젝트 폴더로 돌아가면 프로젝트 구조에 추가 node_modules 폴더가 있는 것을 확인할 수 있습니다. (이 파일의 내용은 이전에 설치된 종속성입니다.)

webstorm 설치, 프로젝트 소개

공식 홈페이지에 접속하여 webstrom 설치 패키지를 다운로드하여 설치하세요.

계속 진행하세요. 컴퓨터 시스템에 따라 64비트 시스템 또는 32비트 시스템을 선택하여 설치하세요.

웹스톰에서 파일 아래 열기를 선택하세요(프로젝트 폴더 선택)

아주 간단해 보이지만 며칠 지나면 실수할까봐 걱정됩니다.

테스트 환경이 성공적으로 설정되었는지

방법 1: cmd에 입력: cnpm rundev

(물론 코드를 수정할 때마다 cmd에 가서 명령어를 입력하는 것은 매우 번거로운 과정이므로 웹스톰에서 npm 메뉴를 불러옵니다.

package.json 파일을 마우스 오른쪽 버튼으로 클릭하고 npm 스크립트 표시를 클릭하여 메뉴를 불러옵니다. 나중에 실행하려면 npm 메뉴에서 dev.

를 두 번 클릭하면 됩니다. 명령줄 실행 프로젝트와 개발 실행 프로젝트는 함께 실행할 수 없습니다. 하나를 실행하면 다른 하나를 닫아야 하며, 그렇지 않으면 포트가 사용 중이라는 오류가 보고됩니다.

)

방법 2: 브라우저에 localhost:8080을 입력하세요(기본 포트는 8080입니다)

실행 명령을 입력하면 오류가 보고됩니다. 아래 그림과 같이 두 가지 상황이 있습니다.

첫 번째 상황: 항만점령 문제

그렇다면 해결책 은 다음과 같습니다:

옵션 1: 프로세스 중에 포트를 닫습니다.

a. cmd를 열고 netstat –ano 명령을 입력하면 모든 포트 번호가 나타납니다.

b. 로컬 주소 아래에는 포트 번호가 있고, PID는 포트 번호를 차지하는 프로그램의 프로세스 번호입니다. (프로세스 번호를 기억하세요)

c. 작업 관리자를 열고(ctrl + alt +delete) 프로세스를 클릭한 다음 보기를 클릭하고 "열 선택"을 선택한 다음 확인을 클릭하면 포트를 차지하는 프로세스 프로그램을 찾을 수 있습니다

d. 기억된 프로세스 번호를 찾아 닫습니다.

옵션 2:config/index.js 파일에서 포트 번호를 수정하세요. 포트: 새 포트 번호입니다.

두 번째 유형: npm 버전이 너무 낮아 업그레이드가 필요함:

해결책:

a. npm install -g npm

명령을 입력합니다. b. C:Users{Windows 사용자 이름}AppDataRoamingnpmnode_modulesnpm 아래의 파일을 NodeJS 설치 디렉터리의 node_modulesnpm에 복사하여 모든 원본 파일을 덮어씁니다

(또는 벤젠을 비교하는 방법을 이용해서 이전 단계를 다시 진행하세요)

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"
}

이것으로부터 우리는 빌드 디렉토리

에서 dev-server.js 파일을 확인해야 함을 알 수 있습니다. dev-server.js 파일에서 발견됨

varuri='http://localhost:'+port

여기 포트가 우리가 찾고 있는 포트입니다. dev-server.js 시작 부분에서 찾을 수 있습니다

varpath=require('경로')

그리고 경로는 어디에서 오는가?

루트 디렉토리에 config 폴더가 있습니다. config 디렉토리에 있는 index.js를 열어보세요

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

여기에서 포트를 변경할 수 있을 뿐만 아니라 필요에 따라 다른 구성 정보도 변경할 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!