Vue 환경설정( vscode 확장프로그램, 크롬 확장프로그램 설치)

1. web browser(chrome) - chrome extension 설치(file open허용)

 

검색창에 vue.js devtools 검색하기

 

 

설치후 검색창에

chrome://extensions/

 

세부정보 클릭

 

Vue.js devtools는 application을 웹 서버에 hosting하여 실행하면 곧바로 사용이 가능하지만 웹서버 없이 html파일을 직접 열어서 실행하는 경우에는 활성화 되지 않습니다. 이를 활성화시키기 위해서는 약간의 설정이 필요합니다.

Vue.js devtools를 찾은 다음 세부 정보 화면으로 이동한 후 파일 URL에 대한 엑세스 허용 기능을 활성화하면 됩니다.

 

2. vscode

vscode 확장프로그램 설치후 재시작

 

extensions 클릭

 

Search Extensions in... 에서 아래 extensions 를 검색 설치

vue - official     Vue.js 코드 문법 강조, 자동완성 기능 등 지원

view-in-browser  웹서버없이 html 페이지를 바로 브라우저로 보여주는 도구 우클릭하여 view in Browser 실행

vue vscode snippets   Vue언어용 코드 조각 모음 제공

eslint   Javascript 코드 스타일, 문법 체크 기능 제공

 

 

npm 을 이용하여 프로젝트를 구축하고자 한다면 Node.js 설치해야함. node.js 설치는 다음에...

 

 VSCode는 프로젝트를 생성한 후 작업을 진행합니다.

그리고 프로젝트를 관리하는 워크스페이스(Workspace)라는 개념이 존재합니다.

VSCode를 실행시 기본 워크스페이스가 존재하지만 직접 워크스페이스를 만들고 프로젝트를 관리하는 것이 더 좋습니다. 보통 프로젝트는 하나일 수 있겠지만 여러 개의 관련 프로젝트를 하나로 묶어 관리할 필요가 있는데 이때 워크스페이스가 유용하게 사용됩니다.

 

 

예시

1. c:/vue_workspace  폴더 생성

 

2. VSCode의 File > Save Workspace As.. 메뉴를 이용하여 해당 폴더를 선택하면 됩니다.

 

3. project 폴더를 생성한 후 File > Add Folder to Workspace... 메뉴를 이용하여 workspace에 추가한 후 작업을 진행하시면 됩니다.