Webstorm에서 vue 프로젝트를 실행하는 방법

WebStorm을 사용하여 Vue 프로젝트를 실행하려면 다음 단계를 따르세요. Vue CLI 설치 Vue 프로젝트 생성 WebStorm 열기 개발 서버 시작 프로젝트 실행 브라우저에서 프로젝트 보기 WebStorm에서 프로젝트 디버그

WebStorm을 사용하여 Vue 프로젝트를 실행하는 방법

WebStorm은 Vue.js 애플리케이션을 개발하는 데 사용할 수 있는 강력한 IDE입니다. WebStorm을 사용하여 Vue 프로젝트를 실행하려면 다음 단계를 따르세요.

1. Vue.js CLI 설치

먼저 Vue.js의 공식 명령줄 인터페이스 도구인 Vue CLI를 설치해야 합니다. 터미널에서 다음 명령을 실행하여 설치할 수 있습니다:

<code>npm install -g @vue/cli</code>

2. Vue 프로젝트 만들기

Vue CLI를 사용하여 새 Vue 프로젝트를 만듭니다. 터미널에서 프로젝트를 생성하려는 디렉터리로 이동하여 다음 명령을 실행합니다.

<code>vue create <project-name></project-name></code>

3. WebStorm 열기

WebStorm에서 방금 생성한 프로젝트 폴더를 엽니다. WebStorm은 Vue 프로젝트를 자동으로 감지하고 필요한 설정을 구성합니다.

4. 개발 서버 시작

WebStorm 도구 모음에서 "실행" 버튼(녹색 삼각형 아이콘)을 찾습니다. 버튼을 클릭하고 실행/디버그 구성을 선택합니다. 팝업 창에서 "NPM 스크립트" > "vue-cli-service Serve"를 선택합니다.

5. 프로젝트 실행

"실행" 버튼을 클릭하면 WebStorm이 Vue 개발 서버를 시작합니다. 서버는 기본적으로 localhost:8080을 수신합니다.

6. 브라우저에서 프로젝트 보기

브라우저에서 다음 URL을 엽니다.

<code>http://localhost:8080</code>

Vue 프로젝트가 실행되는 것을 볼 수 있습니다.

7. WebStorm에서 프로젝트 디버그

WebStorm에서 프로젝트를 디버그하려면 다음 단계를 따르세요.

• 프로젝트에 중단점을 설정하세요.
• 툴바에서 "디버그" 버튼(파란색 원 아이콘)을 클릭하세요.
• "실행/디버그 구성"을 클릭하고 "NPM 스크립트" > "vue-cli-service Serve"를 선택하세요.
• 팝업 창에서 "JavaScript 디버깅 활성화"를 선택하세요.
• "디버그" 버튼을 클릭하면 WebStorm이 디버거를 실행합니다.

위 내용은 Webstorm에서 vue 프로젝트를 실행하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!