Vue 프로젝트 세팅하기

Vue 프로젝트 생성 시 Manually select festures 선택 시

Vue 프로젝트 생성 시 수동으로 옵션 선택하기

이전에 생성했던 프로젝트는 vue에 대해 알아보기 위하여 자동으로 빠르게 생성하였으나, 이제 앞으로 작업할 방식에 맞게 수동으로 옵션을 선택하여 새로운 프로젝트를 다시 생성할 것입니다.

먼저 VS Code를 닫고 이전에 생성한 폴더로 이동하여 webproject 폴더를 삭제합니다.

저의 경우 D:\dev\New 안에 있던 작업 폴더를 삭제하여 완전히 빈 폴더가 되었습니다. 

그리고 다시 VS Code를 열어 New 폴더를 엽니다. 여기에 이전과 같은 명령어로 Vue-CLI를 실행합니다. 새로운 작업 폴더의 이름은 "newproject"로 하였습니다.

vue create newproject

처음 나오는 옵션에서 수동으로 피쳐 선택(Manually select features)을 고릅니다(엔터 버튼)

이후에는 이후에도 약 10가지 정도의 옵션이 나타나는데 본문 위에 첨부된 사진을 참고하십시오.

주의할 것은 옵션을 다중 선택해야 하는데 엔터를 누르면 현재 선택된 옵션으로 질문에 대한 답이 완료되어 버립니다.

TypeScript, Profressive Web App (PWA) Support, Router, Vuex, Css Pre-processors, Linter / Formatter 옵션을 스페이스를 눌러 옵션을 선택합니다.

모두 선택한 후에는 엔터를 눌러 다음 질문으로 넘어갑니다.

Vue 프로젝트 생성 수동 옵션 선택(최종)

모든 질문에 대한 답을 완료하면 이전과 마찬가지로 설치가 시작됩니다.

선택한 각각의 옵션들은 대부분 생성되는 프로젝트에 최초 포함될 기능들에 대한 질문입니다.  이번에 새로 생선한 프로젝트를 살펴보면 이전에 디폴트로 생성한 프로젝트와 구성 요소가 조금 다르다는 것을 확인할 수 있습니다. 최초에 저희가 생성했던 프로젝트에서 src 폴더에 assets, components, App.vue, main.js만 있었으나 현재는 더 많은 내용을 볼 수 있습니다. 

 

VS Code Extension 설치

Extension(한글명: 확장)은 VS Code를 사용할 때 작동하는 편의 기능들을 적용합니다. 요새 우리가 많이 접할 수 있는 다른 개념으로는 라이브러리 혹은 애드온의 개념입니다. NPM도 어떻게 보면 비슷한 역할을 하고 있습니다. 화면 가장 좌측에 내비게이션 바 아래쪽으로 5개의 아이콘이 있습니다. 차례대로 탐색기, 검색, 소스 제어, 실행 및 디버그, 확장입니다. 마지막 확장을 선택하면 "마켓플레이스에서 확장 검색"이라고 쓰인 검색창에 검색할 수 있습니다. 

검색창에 "vue"를 입력하여 검색하면 vue와 관련된 수십 개의 검색 결과가 나옵니다. 리스트 최상단에 있는 vue 우측에 있는 설치 버튼을 눌러 설치합니다. 몇 초가 걸리지 않아 설치가 완료되고 해당 확장이 제공하는 기능을 사용할 수 있습니다. 

아래는 설치할 확장 프로그램 리스트와 간단한 설명입니다.

 

1. vue: Vue.js 구문 강조

2. Vetur: Vue와 관련 툴팁 추가

3. Vue VSCode Snippets: Vue 관련 오류 자동 수정 기능

4. Vuetify-vscode: Vuetify 관련 오류 자동 수정 및 단어 자동 완성 기능

5. TypeScript Hero: typescript 관련 툴팁 추가

6. npm: NPM 사용 지원 기능

7. JavaScript (ES6) code snippets: JavaScript 오류 자동 수정 기능

8. HTML CSS Support: HTML 속성 자동 완성 기능

9. ESLint: JavaScript 문법 교정 기능

10. Auto Close Tag: HTML 시작 태그 입력 시 마침 태그 자동 입력 기능

11. Auto Complete Tag : HTML 시작 태그 입력 시 태그 자동 완성 기능

 

Vuetify 설치

이제 터미널에서 경로 이동 명령어로 newproject로 이동한 후 이어서 진행하겠습니다.

cd newproject

터미널에 D:\dev\New\newproject로 현재 경로가 변경되었습니다. 여기에 vuetify를 설치합니다. 앞에서 말씀드린 것처럼 NPM을 이용해서도 설치는 가능하나(npm install vuetify) 앞으로도 계속 yarn을 이용할 것입니다.

yarn add vuetify

설치가 완료되면 package.json 파일을 열어 vuetify가 제대로 설치되었는지 확인합니다. 

"dependencies" 항목에 "vuetify": "^2.6.3"이 추가되었다면 제대로 설치된 것입니다.
(상기된 버전은 이후 업데이트가 진행됨에 따라 저와 다를 수 있습니다.)

 

마지막으로 서버를 실행시켜 페이지가 정상적으로 작동하는지 확인한 후 마치겠습니다.

yarn serve

서버가 실행되면 http://localhost:8080/ 페이지를 열어 확인합니다.
이전에 열어본 페이지가 기억나실지 모르겠지만 페이지 구성이 조금 달라진 것을 확인할 수 있습니다.

이후에 정상적으로 Vuetify를 사용할 수 있도록 필요한 추가 세팅은 다른 포스팅에서 꼭 확인하시기 바랍니다.

https://simsimcoding.com/entry/Vuetify-Vue-UI-Library-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0

 

여기서 마치겠습니다. 다음 포스팅에서는 어떤 웹 페이지를 만들 것인지 논의해보겠습니다.