nuxt3 사이트를 참고하여 새로운 프로젝트를 생성한다.
node 18이상이 설치되어 있어야 한다.
npx nuxi@latest init <project-name>node 버전만 잘 설치 했다면 별다른 문제는 없으므로, vscode 를 설정한다.
비용을 지불할 용의가 있다면, webstorm이 좋다. 2023년 이래로 vue에 대한 지원을 강화해서 설치만 하면 편리하게 사용할 수 있다.
vscode 에서 volar 플러그인을 설치한다.
tailwind를 사용한다면 tailwind css intellisense 도 같이 설치한다.
typescript를 사용한다면 eslint 플러그인 설치, 왠만하면 prettier 도 설치한다
clipboard 도 잘 활용하면 좋으므로, Clipboard manager 도 설치한다.
여기까지 설치한다면 기본적인 세팅은 다 되었음
vue 파일 사용의 편의성을 위해서는 한가지 세팅이 더 필요한데, 보통은 tailwind css를 많이 쓰니 html attribute 부분이 매우 길어서 쓰기가 불편한 경우가 많다.
가독성을 위해 다음 세팅을 추가한다.
먼저 Cmd(or Ctrl) + Shift + P 눌러서 Open User Settings (JSON) 으로 설정 JSON 파일을 열어서 다음 세팅을 추가한다
{
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.vueIndentScriptAndStyle": true,
"editor.formatOnSave": true,
"[vue]": {
"editor.defaultFormatter": "Vue.volar"
},
"html.format.wrapAttributes": "force-expand-multiline",
}이 정도만 하면 아주 쾌적하게 개발이 가능하다.