Windows10 환경 IntelliJ에서 Vue.js 개발 환경 만들기

소개

Mac판의 개발 환경 순서를 「IntelliJ IDEA로 Vue.js 실행」라고 하는 타이틀로 miyamotok0105씨가 공개되고 있었습니다.
본 기사를 참고로, 이쪽에서는 Windows10판의 순서를 정리해 보았습니다.

IntelliJ의 Vue.js 플러그인이지만 단일 파일 구성 요소의 개발을 전제로하는 템플릿이 생성됩니다.
그 때문에 본 순서로 구축되는 환경도, 단일 파일 컴퍼넌트에 의한 개발을 실시하기 위한 환경이 됩니다.
통상 (?)의 아래와 같은 html 파일에 script 태그로 vue.js를 지정해 js를 골고루 쓰는 것과 같은 개발용이 아니기 때문에, 주의해 주세요.

이런 건! ! 대상외! !

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
 ～省略～
</html>

※ 참고:「 Vue.js 공식: 단일 파일 구성 요소 」

환경

소프트웨어
버전

Windows 10 Professional
-

IntelliJ Ultimate
2020.3

nodejs (※)
14.15.1

※ nodejs는 ZIP판을 C:\Programs\nodejs\node-v14.15.1-win-x64에 전개.

절차

Plugins에서 Vue.js를 설치합니다.

New Project에서 JavaScript를 선택하고 목록에서 Vue.js를 선택하고 Next를 클릭합니다.

Project Name: 적절하게 프로젝트 이름 입력
Project location: 기본값 그대로
Node interpreter : 설치된 nodejs의 절대 경로 설정 (※)
Vue CLI: 기본값 그대로
Finish를 클릭합니다.
※ 덧붙여 Node interpreter의 선택지에 Download Node(비늘 기억)라고 하는 선택사항이 있었으므로, 이 녀석을 선택하면
사전에 Node.js를 설치하지 않고 IntelliJ가 자동으로 최신 Node.js를 설치할 수 있습니다.