vscode에서 vue를 빌드하는 방법

프런트 엔드 기술의 지속적인 개발로 인해 점점 더 많은 회사와 팀이 개발을 위해 Vue 프레임워크를 채택하기 시작했습니다. Vue 프레임워크의 뛰어난 디자인과 강력한 생태계는 점점 더 많은 개발자가 Vue를 선택하는 이유가 되었습니다. 실제 프로젝트 과정에서 효율적인 개발 환경은 개발 효율성을 크게 향상시킬 수 있습니다. 이번 글에서는 데모 시연을 통해 VSCode에서 Vue 프로젝트를 구축하는 실제 과정을 소개하겠습니다.

환경 준비

Vue 프로젝트 빌드를 시작하기 전에 Node.js, Vue-CLI, VSCode와 같은 필수 소프트웨어가 설치되어 있는지 확인해야 합니다. 아직 설치하지 않으셨다면, 다음 단계를 참고하여 설치해주세요.

Node.js 설치

Node.js는 Chrome V8 엔진 기반의 JavaScript 런타임 환경으로, 이를 통해 JavaScript가 서버 측에서 실행될 수 있습니다. 본 글은 Node.js 버전 14.17.3을 사용하였으며, 다운로드 주소는 https://nodejs.org/en/download/입니다.

Vue-CLI 설치

Vue-CLI는 Vue 프로젝트를 빠르게 구축하는 데 도움이 되는 공식 스캐폴딩 도구입니다. 설치하려면 터미널이나 명령줄에 다음 명령을 입력하세요.

# 全局安装Vue-CLI
npm install -g @vue/cli

VSCode 설치

VSCode는 여러 프로그래밍 언어를 지원하는 가볍고 강력한 크로스 플랫폼 코드 편집기입니다. 다운로드 주소는 https://code.visualstudio.com/입니다.

프로젝트 빌드

필요한 소프트웨어를 설치한 후 Vue 프로젝트 빌드를 시작할 수 있습니다. 프로젝트를 생성하려면 터미널이나 명령줄에 다음 명령을 입력하세요.

# 创建项目
vue create demo

그중 데모는 프로젝트 이름으로, 실제 상황에 따라 수정될 수 있습니다. 프로젝트를 생성한 후 다음 인터페이스로 들어가게 됩니다.

여기에서 기본 설정 또는 수동 구성 옵션을 사용하도록 선택할 수 있습니다. 수동 구성 옵션에는 다음이 포함됩니다.

• 2.x 및 3.x 버전을 포함한 Vue 버전 선택
• Babel 및 TypeScript 사용 여부
• ESLint, Prettier 및 기타 코드 사양 도구 사용 여부; Vue Router, Vuex 등 일반적으로 사용되는 플러그인을 사용할지 여부입니다.
• 실제 필요에 따라 설정할 수 있습니다. 완료 후 Enter를 누르고 프로젝트 생성이 완료될 때까지 기다립니다.

프로젝트가 생성된 후 VSCode를 사용하여 프로젝트 디렉터리를 열 수 있습니다. VSCode에서 "파일" → "폴더 열기"를 선택하고 방금 만든 데모 폴더를 찾아 엽니다.

프로젝트 실행

VSCode에서 프로젝트를 연 후 터미널이나 명령줄을 통해 프로젝트 디렉터리에 들어가서 프로젝트를 실행할 수 있습니다. 터미널이나 명령줄에 다음 명령을 입력하세요.

# 进入项目目录
cd demo

# 运行项目
npm run serve

항목을 입력하면 로컬 개발 서버가 시작되고 다음 정보가 출력됩니다.

 DONE  Compiled successfully in 4311ms                                                                        14:32:18

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.0.9:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

브라우저에서 http://localhost:8080/을 방문하세요. 방금 생성한 Vue 프로젝트 페이지로 이동하는 것을 볼 수 있습니다.

프로젝트 디버깅

Vue 프로젝트를 개발할 때 디버깅은 매우 중요한 링크입니다. 뛰어난 코드 편집기인 VSCode는 개발 프로세스 중에 디버깅을 용이하게 하는 풍부한 디버깅 기능을 제공합니다. 다음으로 VSCode에서 Vue 프로젝트를 디버깅하는 방법을 소개하겠습니다.

먼저 VSCode에서 "디버그" 패널을 엽니다. "실행 및 디버그" 드롭다운 목록에서 "Launch.json 파일 생성" 옵션을 선택합니다.

다음으로 팝업 창에서 Vue 프로젝트를 선택합니다.

Vue 프로젝트를 선택한 후 VSCode는 자동으로 launch.json 파일을 생성하고 기본 디버깅 구성을 채웁니다.

이제 VSCode에서 .vue 파일을 열고 왼쪽에 있는 중단점을 선택할 수 있습니다. 그런 다음 브라우저에서 http://localhost:8080/에 액세스하고 페이지의 기능을 작동하여 중단점을 트리거합니다.

Summary

이 문서에서는 VSCode에서 Vue를 빌드하는 실제 프로젝트 프로세스를 간략하게 설명합니다. 환경 준비, 프로젝트 생성, 프로젝트 실행, 프로젝트 디버깅까지 실제 개발의 기본 프로세스를 소개하고 데모와 스크린샷을 통해 독자가 실제 Vue 프로젝트를 빌드하는 과정을 더 잘 이해할 수 있도록 합니다.

Vue 개발 마스터가 되려면 기술과 도구를 익히는 것 외에도 지속적인 학습과 연습이 필요합니다. 이 글은 단순한 소개 가이드일 뿐입니다. 독자들이 이를 기반으로 Vue 프레임워크의 더 많은 기능을 계속해서 배우고 탐색할 수 있기를 바랍니다.

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