Vue 프로젝트 생성

[seungwongo]

Vue 프로젝트 생성

1. Vue 프로젝트를 생성할 루트 폴더 만들기 : 윈도우 탐색기에서 폴더 생성 (강의에서는 폴더명을 'vue-project'라고 함)
2. Visual Studio Code 열기
3. File > Open 에서 1번에서 생성한 폴더 열기
4. 메뉴에서 View(보기) > 터미널 열기
5. Vue 프로젝트 생성 명령어 입력 : vue create 프로젝트명
6. manually select features 선택
7. 선택 항목 중 Router, Vuex 추가 선택 (선택할 항목에서 '스페이스바' 키 입력)
8. 3.x 버전 선택
9. history mode는 y 입력
10. ESLint + Standard config 선택
11. Lint on save 선택
12. In package.json 선택
13. Preset: y 선택
14. Preset 이름 : vue basic

eslint, prettier 설정

1. .prettierrc 파일 생성
2. { "semi": false, "bracketSpacing": true, "singleQuote": true, "useTabs": false, "trailingComma": "none", "printWidth": 80 }
3. package.json 파일 열기
4. "rules": { "space-before-function-paren": "off" }

Vue 프로젝트 폴더 및 파일 구조 이해하기

• node_modules : 설치된 node 모듈이 위치해 있는 폴더. npm install 명령어를 통해 설치한 모듈이 위치하는 곳입니다.
• public : index.html 파일이 위치하는 곳 (정적 파일이 위치하는 곳)
• src : 구현되는 vue 컴포넌트 파일이 위치하는 곳
• src > assets : css, image 등 파일이 위치하는 곳
• src > components : Vue 컴포넌트 중 재사용을 위해서 구현된 컴포넌트가 위치하는 곳
• src > router : 라우팅을 정의하는 파일이 위치하는 곳
• src > store : vuex의 상태저장소인 store 파일이 위치하는 곳
• src > views : 웹 애플리케이션에서 각 화면, 즉 메뉴에 대응되는 화면에 해당하는 Vue 컴포넌트가 위치하는 곳
• App.vue : 최상위 Vue 컴포넌트
• package.json : Vue 프로젝트에 대한 정보 및 사용하고 있는 모듈 등에 대한 정보를 관리하고, Vue 프로젝트를 실행할 수 있는 스크립트가 정의된 파일

Vue 프로젝트 실행 구조 이해하기

Vue 프로젝트 실행 -> main.js 실행 -> App.vue 가져오기 -> public/index.html 에 마운트

1. Vue 프로젝트가 실행(npm run serve)이 되면 가장 먼저 main.js를 실행합니다.
2. main.js에서 App.vue 컴포넌트로 Vue 앱을 생성합니다.
3. main.js 라우터(router), 상태관리(vuex), 믹스인(mixins), 전역 모듈 등을 로드합니다.
4. App.vue 에서 네비게이션 처리 및 라우터에 해당하는 컴포넌트를 실행하게 됩니다.
5. App.vue 컴포넌트가 public 폴더의 index.html 의 html 요소 중 id가 "app"인 요소에 마운트됩니다.

Vue 컴포넌트 구조 이해하기

Vue 컴포넌트는 Html 구현 영역, 자바스크립트 구현 영역, CSS 구현 영역이 명확하게 구분이 되어 있어서 프로그램 코드를 언어에 맞게 구분하여 관리할 수 있다는 장점을 가지고 있습니다.

• <template> 태그 - Html 정의
• <script> 태그 - 자바스크립트 구현
• <style scoped> 태그 - CSS 정의