다음을 통해 공유

Linux용 Windows 하위 시스템에 Vue.js 설치

  • 아티클

이 가이드는 WSL(Linux용 Windows 하위 시스템)에 Vue.js 웹 프레임워크를 설치하여 Windows에서 Vue.js 개발 환경을 설정할 수 있도록 도와줍니다. Vue.js 개요 페이지에서 자세히 알아보세요.

Windows에 직접 또는 WSL에 Vue를 설치할 수 있습니다. 일반적으로 NodeJS 백 엔드와 상호 작용하거나, Linux 프로덕션 서버와의 패리티를 원하거나, Bash 명령을 활용하는 자습서를 따르려면 WSL에 설치하는 것이 좋습니다. Vite를 Vue.js 대안으로 고려할 수도 있습니다.

필수 조건

  • Linux 배포(예: Ubuntu)를 포함한 WSL(Linux용 Windows 하위 시스템)을 설치하고 WSL 2 모드에서 실행되고 있는지 확인합니다. PowerShell을 열고 wsl -l -v를 입력하여 확인할 수 있습니다.
  • WSL 2에 Node.js 설치: 여기에는 버전 관리자, 패키지 관리자, Visual Studio Code 및 원격 개발 확장 프로그램이 포함됩니다. npm(노드 패키지 관리자)은 Vue.js를 설치하는 데 사용됩니다.

Important

WSL에 Linux 배포를 설치하면 파일을 저장할 수 있는 디렉터리가 생성됩니다(\\wsl\Ubuntu-20.04)(Ubuntu-20.04를 사용 중인 Linux 배포로 대체). Windows 파일 탐색기에서 이 디렉터리를 열려면 WSL 명령줄을 열고 cd ~를 사용하여 홈 디렉터리를 선택한 후 explorer.exe . 명령을 입력합니다. 이때 탑재된 C 드라이브(/mnt/c/Users/yourname$)에 작업할 파일을 설치하거나 저장하지 않도록 주의하세요. 그렇지 않으면 설치 및 빌드 시간이 상당히 늘어납니다.

Vue.js 설치

WSL에 Vue.js를 설치합니다.

  1. WSL 명령줄(Ubuntu)을 엽니다.

  2. 새 프로젝트 폴더를 만들고(mkdir VueProjects) 해당 디렉터리를 입력합니다(cd VueProjects).

  3. npm(노드 패키지 관리자)을 사용하여 Vue.js를 설치합니다.

npm install vue

명령을 사용하여 설치한 버전 번호를 확인합니다(vue --version).

참고 항목

NPM이 아닌 CDN을 사용하여 Vue.js를 설치하려면 Vue.js 설치 문서를 참조하세요.

Vue CLI 설치

Vue CLI는 터미널/명령줄에서 Vue로 작업하는 데 사용되는 도구 키트입니다. 이를 통해 새 프로젝트(vue 만들기)를 신속하게 스캐폴드하거나, 새 아이디어(vue 서비스)로 프로토타입을 만들거나, 그래픽 사용자 인터페이스(vue ui)를 사용하여 프로젝트를 관리할 수 있습니다. Vue CLI는 전역으로 설치된 npm 패키지로, 일부 빌드 복잡성(예: Babel 또는 Webpack 사용)을 자동으로 처리합니다. 새 단일 페이지 앱을 빌드하지 않는 경우 Vue CLI가 필요하지 않을 수 있습니다.

Vue CLI를 설치하려면 npm을 사용합니다. 업그레이드하려면 -g 플래그를 사용하여 전역으로 설치해야 합니다(vue upgrade --next).

npm install -g @vue/cli

추가할 수 있는 플러그 인(예: 린팅 또는 GraphQL 통합용 Apollo)에 대한 자세한 내용은 Vue CLI 문서의 Vue CLI 플러그 인을 참조하세요.

추가 리소스