# Single File Component Single File Components 체계는 `.vue` 파일로 프로젝트 구조를 구성하는 방식을 말한다. 확장자 `.vue` 파일 1개는 뷰 애플리케이션을 구성하는 1개의 컴포넌트와 동일하다. ``` ``` ``` ``` ``` ``` ## Vue CLI Single File Component 체계를 사용하기 위해서는 `.vue` 파일을 웹 브라우저가 인식할 수 있는 형태의 파일로 변환해주는 [웹팩(webpack)](https://dh00023.gitbooks.io/javascript/content/posts/2019-10-02-webpack.html)이나 Browserify와 같은 도구가 필요하다. 웹팩은 웹 앱의 자원(HTML, CSS, 이미지)들을 자바스크립트 모듈로 변환해 하나로 묶어 웹 성능을 향상시켜 주는 자바스크립트 모듈 번들러이다. 뷰 개발자들이 편하게 프로젝트를 구성할 수 있도록 CLI(Command Line Interface) 도구를 제공한다. ### 시작하기 ```bash $ vue create ``` ```bash Vue CLI v3.11.0 ┌───────────────────────────┐ │ Update available: 4.0.4 │ └───────────────────────────┘ ? Please pick a preset: (Use arrow keys) ❯ default (babel, eslint) Manually select features ``` 여기서 default를 선택하여 생성하게 되면 `babel`과 `eslint`가 설치된다. Manually select features를 선택하게 되면 아래와 같이 `vuex`, `vue-router` 등 몇가지를 더 선택할 수 있다. ``` ? Please pick a preset: Manually select features ? Check the features needed for your project: (Press to select, to t oggle all, to invert selection) ❯◉ Babel ◯ TypeScript ◯ Progressive Web App (PWA) Support ◯ Router ◯ Vuex ◯ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing ``` 프로젝트를 하다가 추가적으로 plugin을 설치하고 싶은 경우에는 `add`를 통해 할 수 있다. default 모드를 선택해 설치하게되면 다음과 같은 구조로 프로젝트가 생성된다. ``` .node_modules/ public/ favicon.ico index.html src/ assets/ logo.png components/ HelloWorld.vue App.vue main.js .gitignore babel.config.js package-lock.json package.json README.md ``` 컴포넌트 같은 경우에는 `src/components` 폴더에서 관리한다. 애플리케이션 규모가 커져서 기능별로 관리를 해야하는 경우에는 `components/기능/<컴포넌트명>.vue` (`components/login/LoginForm.vue`)와 같은 형식으로 관리하는 것이 좋다. ```bash $ vue add ``` 예를 들어서 `axios` 플러그인을 설치해볼것이다. ```bash $ vue add axios 📦 Installing vue-cli-plugin-axios... + vue-cli-plugin-axios@0.0.4 added 1 package from 1 contributor in 4.648s ✔ Successfully installed plugin: vue-cli-plugin-axios 🚀 Invoking generator for vue-cli-plugin-axios... 📦 Installing additional dependencies... added 5 packages from 8 contributors in 5.059s ⚓ Running completion hooks... ✔ Successfully invoked generator for plugin: vue-cli-plugin-axios The following files have been updated / added: src/plugins/axios.js package-lock.json package.json src/main.js You should review these changes with git diff and commit them. ``` axios 플러그인이 설치되고 난 후 수정된 파일과 새로 추가된 파일을 확인할 수 있다. #### 웹팩 설정 파일 `vue-cli 3.x` 에서는 웹팩 설정파일을 노출하지 않는다. 3.x에서는 설정을 추가하기 위해서는 root 디렉토리에 `vue.config.js` 파일을 설정하고 내용을 작성해준다. ```javascript // vue.config.js module.exports = { // 여기에 옵션을 작성해준다. } ``` ### vue ui Vue-CLI3 UI를 통해서 프로젝트를 관리할 수 있다. ```bash $ vue ui ``` 위와 같이 실행하면 프로젝트 매니저가 `localhost:8000`으로 브라우저를 실행시킨다. 이 프로젝트 매니저 위에 프로젝트를 생성할 수 있으며, 이미 생성된 프로젝트를 불러와서 관리 포인트로 둘 수 있다. ### 프로젝트 실행 ```bash $ npm run serve ``` #### build 상용 배포를 위한 빌드를 진행할 수 있다. ```bash $ npm run build ``` 빌드를 실행하면 Vue CLI가 웹팩을 통해 프로젝트의 모든 소스 파일들을 번들링하여 dist 디렉토리에 넣어준다. `dist` 디렉토리를 확인해보면 웹팩이 번들링한 파일들을 확인할 수 있다. 이 파일들은 상용 배포에 적합하도록 웹팩이 최적화 해놓은 것이다. ## 참조 * [Vue CLI](https://cli.vuejs.org/) * [\[Vue.JS\] Vue-CLI 3 시작하기](https://kdydesign.github.io/2019/04/22/vue-cli3-tutorial/) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://dahye-jeong.gitbook.io/til/vuejs/2019-10-22-singlefilecomponent.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.