Vue, Node, Webpack 환경 구축 튜토리얼에 대한 자세한 설명

이 글은 주로 vue+node+webpack 환경 구축 튜토리얼을 자세히 소개하고 있습니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

1. 환경 구축

노드 버전에 주의하세요. 하모니 모드를 지원하는 노드만 es6를 지원하며, webpack 기반으로 프로젝트 이름을 구축할 때 오류가 보고되지 않습니다. 최신 버전을 권장합니다.

설치 패키지를 다운로드한 후 클릭해서 설치하면 됩니다. 성공적인 테스트 설치를 위한 인터페이스는 다음과 같습니다:

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

1.3 다음은 아래와 같이 Taobao 이미지를 설치하는 것입니다.

1.4. 다음 단계는 vue-cli를 전역적으로 설치하는 것입니다. npm을 사용하여 vue-cli를 설치하는 데 시간이 오래 걸리며 설치 설명은 다음과 같습니다.

npminstall --globalvue-cli

1.5. webpack 템플릿

명령 줄 설명은

vue init webpack my-project

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

vue init webpack my-project

(프로젝트 폴더 이름)을 입력하고 Enter를 누르고 잠시 기다리면 'git' 아래 항목이 차례로 나타나며 아래와 같이 조작하면 됩니다

명령을 실행한 후 my-project 폴더에 다음 내용을 볼 수 있습니다.

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

5. cmd에 종속성

을 설치합니다. 1) 입력: cd my-project(프로젝트 이름), Enter 키를 누르고 특정 프로젝트 폴더 입력: cnpm 설치하고 Enter를 누르고 잠시 기다리세요

이 명령을 실행한 후 다음 오류가 발생할 수 있습니다. 해결 방법은 다음과 같습니다.

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

Scaffolding을 기반으로 생성된 기본 프로젝트 구조는 아래와 같습니다.

6. Webstorm 설치, 프로젝트 소개

공식 바로가기 설치를 위한 웹스트롬 설치 패키지를 다운로드하는 웹사이트입니다.

계속 진행하세요. 컴퓨터 시스템에 따라 64비트 시스템 또는 32비트 시스템을 설치하도록 선택하고, js, css, html àjetbrainsà를 선택한 다음 설치하세요.

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

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

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

방법 1:

cmd에 입력:

cnpm rundev

(분명히 코드를 수정할 때마다 cmd로 들어가야 하는 과정이 매우 번거롭습니다. 매번 명령을 실행하므로 webstorm에서 npm 메뉴를 불러옵니다. package.json 파일을 마우스 오른쪽 버튼으로 클릭하고 npm 스크립트 표시를 클릭하여 메뉴를 불러오려면 npm에서 dev를 두 번 클릭하면 됩니다.

명령줄에서 프로젝트를 실행하는 것과 프로젝트를 실행하는 개발자는 함께 수행할 수 없습니다. 하나를 수행할 때 다른 하나를 닫아야 합니다. 그렇지 않으면 포트가 사용 중이라는 오류가 보고됩니다.

)

방법 2:

브라우저에 localhost:8080 입력(기본 포트는 8080)

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

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

그런 다음

해결책

은 다음과 같습니다.

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

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

b 포트 번호는 해당 포트 번호를 차지하는 프로그램의 프로세스 번호입니다. 프로세스 번호)

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

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

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

두 번째: npm 버전이 너무 낮으므로 업그레이드해야 합니다.

해결 방법:

a 명령을 입력합니다. npm install -g npm

b 복사 C:Users{your 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('path')

을 찾을 수 있습니다. 경로는 어디에서 왔나요?

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

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

}

포트 변경도 가능합니다. 필요에 따라 다른 구성 정보도 변경합니다.

관련 권장 사항:

AngularJS 환경 구축 튜토리얼

vue 환경 구축에 대한 간단한 튜토리얼의 자세한 예

PHP 서버 환경 구축에 대한 가장 명확한 그래픽 튜토리얼

위 내용은 Vue, Node, Webpack 환경 구축 튜토리얼에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!