1. 프로젝트 구조란?
프로젝트 구조는 Vue.js 애플리케이션에서 코드와 파일을 구성하는 방식을 의미합니다. 올바른 프로젝트 구조를 갖추면 코드의 유지 및 관리가 용이해지며, 협업과 확장에도 효과적입니다.
컴포넌트 중심의 구조
Vue.js에서는 컴포넌트 기반 개발 방식을 채택하고 있기 때문에 프로젝트 구조도 컴포넌트 중심으로 설계합니다. 컴포넌트는 재사용 가능한 UI 조각으로 구성되며, 조합하여 애플리케이션을 구축합니다.
단일 파일 컴포넌트 (Single File Components, SFC)
Vue.js에서는 단일 파일 컴포넌트(SFC)를 사용하여 각 컴포넌트를 구성합니다. SFC는 .vue 확장자를 가진 단일 파일로, 컴포넌트의 템플릿, 스크립트, 스타일을 한 파일에서 관리할 수 있도록 합니다.
예시 코드
<template>
<div class="container">
<h1>프로젝트 구조 예시</h1>
<my-component />
</div>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
name: 'App',
components: {
MyComponent
},
data() {
return {
message: '안녕하세요!'
};
}
};
</script>
<style scoped>
.container {
max-width: 800px;
margin: 0 auto;
}
</style>2. Single File Components (SFC)
2.1 컴포넌트 구조
Vue.js에서 컴포넌트는 단일 파일 컴포넌트(Single File Component, SFC)로 구성됩니다. SFC는 템플릿, 스크립트, 스타일을 한 파일에서 관리하며 각 부분은 구분된 섹션으로 작성됩니다.
2.2 컴포넌트 폴더 구조
일반적으로, 컴포넌트들은 컴포넌트를 포함하는 폴더 내에 위치합니다. 소규모 프로젝트에서는 모든 컴포넌트를 하위 폴더에 위치시키지 않고 한 폴더에 모아둘 수도 있습니다. 하지만 대규모 프로젝트에서는 컴포넌트를 기능 또는 모듈별로 폴더에 구분하여 관리하는 것이 일반적입니다.
2.3 컴포넌트 파일 네이밍 규칙
컴포넌트 파일의 네이밍은 일반적으로 파스칼 케이스(PascalCase)를 따릅니다. 컴포넌트 파일의 이름은 해당 컴포넌트의 이름과 일치해야 합니다.
예시 파일 명:
MyComponent.vue
UserForm.vue
ProductList.vue각 컴포넌트 파일은 .vue 확장자를 가집니다.
3. 라우팅 구조
라우팅 구조는 Vue.js 애플리케이션에서 페이지 간의 이동과 네비게이션을 관리하는 방식을 의미합니다. Vue Router를 사용하여 라우팅 구조를 설정하고 관리할 수 있습니다.
3.1 라우터 설정
Vue.js에서 라우터를 설정하기 위해 먼저 Vue Router를 설치하고, 라우팅과 관련된 컴포넌트들을 정의해야 합니다. 라우터 설정은 주로 애플리케이션의 진입점인 main.js 파일에서 이루어집니다.
3.2 라우트 파일 구조
라우트 파일은 Vue.js 애플리케이션의 각 페이지를 정의하는 파일입니다. 일반적으로 라우트 파일들은 라우터 디렉토리에 위치합니다. 각 라우트 파일은 특정 URL에 대한 경로와 해당 경로에 대응되는 컴포넌트를 정의합니다.
3.3 중첩 라우트
중첩 라우트는 라우트들을 계층적으로 구성하여 페이지 내에서 여러 레벨의 컴포넌트를 렌더링하는 방식입니다. 부모 라우트에 중첩된 자식 라우트들이 존재하며, 각 라우트마다 컴포넌트를 정의할 수 있습니다.
예시 코드:
// main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
import Contact from './components/Contact.vue';
Vue.use(VueRouter);
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{
path: '/contact',
component: Contact,
children: [
{ path: 'info', component: ContactInfo },
{ path: 'form', component: ContactForm }
]
}
];
const router = new VueRouter({
routes
});
new Vue({
router,
render: h => h(App)
}).$mount('#app');위의 코드 예시에서 `/contact` 경로에 접근하면 `Contact.vue` 컴포넌트를 렌더링하고, `/contact/info` 경로에 접근하면 `ContactInfo.vue` 컴포넌트를, `/contact/form` 경로에 접근하면 `ContactForm.vue` 컴포넌트를 렌더링합니다.
4. 상태 관리 구조
상태 관리 구조는 Vue.js 애플리케이션에서 데이터의 중앙 집중화와 상태 관리를 위한 구조를 설계하는 방식을 의미합니다. Vue.js에서는 주로 Vuex라는 상태 관리 패턴을 사용합니다.
4.1 상태 관리 패턴 (Vuex)
Vuex는 Vue.js 애플리케이션에서 상태를 관리하고, 컴포넌트 간에 데이터를 전달하고 변경하는 패턴입니다. 이는 중앙 집중식 상태 저장소(store)를 통해 애플리케이션의 전역 상태를 관리합니다.
4.2 Vuex 모듈 구조
Vuex는 기능이나 도메인(또는 모듈) 별로 상태를 구분하여 관리하기 위해 모듈 구조를 사용합니다. 각 모듈은 자체적인 상태, 변이(mutations), 액션(actions), 게터(getters)를 가질 수 있습니다. 이를 통해 애플리케이션을 더욱 모듈화하고 유지 관리하기 쉽게 만듭니다.
4.3 Vuex 폴더 구조
일반적으로 Vuex 관련 파일들은 `store` 폴더에 위치합니다. `store` 폴더에는 다음과 같은 파일들이 포함될 수 있습니다:
– `index.js`: 애플리케이션의 상태 저장소를 생성 후 모듈을 등록합니다.
– `state.js`: 애플리케이션의 전역 상태를 정의합니다.
– `mutations.js`: 상태를 변경하는 변이(mutations)를 정의합니다.
– `actions.js`: 변이(mutations)를 호출하고, 비동기 작업을 수행하는 액션(actions)을 정의합니다.
– `getters.js`: 상태의 값을 조회하는 게터(getters)를 정의합니다.
예시 코드:
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import state from './state';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';
Vue.use(Vuex);
export default new Vuex.Store({
state,
mutations,
actions,
getters
});
// store/state.js
export default {
username: '',
isLoggedIn: false,
cartItems: []
};
// store/mutations.js
export default {
setUsername(state, username) {
state.username = username;
},
setLoggedIn(state, isLoggedIn) {
state.isLoggedIn = isLoggedIn;
},
addToCart(state, product) {
state.cartItems.push(product);
}
};
// store/actions.js
export default {
login(context, username) {
context.commit('setUsername', username);
context.commit('setLoggedIn', true);
},
addToCart(context, product) {
// Perform asynchronous operation, e.g. fetch product details
context.commit('addToCart', product);
}
};
// store/getters.js
export default {
isLoggedIn: state => state.isLoggedIn,
cartItemCount: state => state.cartItems.length
};위의 코드 예시에서, `index.js` 파일의 `new Vuex.Store()` 메서드를 통해 상태 저장소(store)를 생성하고, 각 모듈을 등록합니다. `state.js` 파일에는 전역 상태를 정의하고, `mutations.js` 파일에는 상태를 변경하는 변이(mutations)를 정의합니다. `actions.js` 파일에는 비동기 작업을 수행하는 액션(actions)을 정의하며, `getters.js` 파일에는 상태의 값을 조회하는 게터(getters)를 정의합니다.
5. API 호출 구조
API 호출 구조는 Vue.js 애플리케이션에서 서버와의 데이터 통신을 관리하는 방식을 의미합니다. 주로 API 모듈화와 폴더 구조를 사용하여 각각의 API 호출을 관리합니다.
5.1 API 모듈화
API 모듈화는 애플리케이션에서 사용하는 API 호출을 별도의 모듈로 만들어 관리하는 방식입니다. 각각의 API 호출은 해당 모듈에 포함되어 있으며, 모듈을 통해 필요한 API를 재사용할 수 있습니다.
5.2 API 관리 폴더 구조
API 관리 폴더 구조는 일반적으로 `api` 또는 `services`와 같은 폴더를 생성하여 API 호출과 관련된 파일들을 그룹화합니다. 각 파일은 특정 API 호출과 관련된 코드를 포함하며, 필요에 따라 모듈화하여 사용할 수 있습니다.
5.3 axios 또는 fetch 라이브러리 활용
axios와 fetch는 주로 Vue.js 애플리케이션에서 서버와의 데이터 통신을 위해 사용되는 라이브러리입니다. 이들은 AJAX 요청을 보낼 수 있고, 응답을 받아 처리할 수 있습니다.
axios 예시 코드:
// api/users.js
import axios from 'axios';
export const getUsers = () => {
return axios.get('/api/users')
.then(response => response.data)
.catch(error => console.error(error));
};
export const getUserById = (userId) => {
return axios.get(`/api/users/${userId}`)
.then(response => response.data)
.catch(error => console.error(error));
};fetch 예시 코드:
// api/users.js
export const getUsers = () => {
return fetch('/api/users')
.then(response => response.json())
.catch(error => console.error(error));
};
export const getUserById = (userId) => {
return fetch(`/api/users/${userId}`)
.then(response => response.json())
.catch(error => console.error(error));
};위의 코드 예시에서, `/api/users`와 `/api/users/{userId}` URL에 대한 GET 요청을 보내는 함수들이 정의되어 있습니다. axios를 사용하는 경우 `axios.get()`을, fetch를 사용하는 경우 `fetch()`를 사용하여 데이터를 가져옵니다. 응답 데이터를 처리하기 위해 `.then()` 메서드를 사용하고, 에러를 처리하기 위해 `.catch()` 메서드를 사용합니다.
6. UI 구조
UI 구조는 Vue.js 애플리케이션에서 사용자 인터페이스를 구성하는 컴포넌트와 레이아웃의 구조를 설계하는 방식을 의미합니다. 주로 UI 컴포넌트 구조와 페이지 레이아웃 구조를 포함합니다.
6.1 UI 컴포넌트 구조
UI 컴포넌트 구조는 UI를 구성하는 다양한 컴포넌트들을 설계하고 관리하는 방식입니다. 컴포넌트는 재사용 가능한 단위로 구성되며, UI 요소들을 조합하여 화면을 구성합니다.
6.2 페이지 레이아웃 구조
페이지 레이아웃 구조는 애플리케이션 내에서 각 페이지의 레이아웃을 설계하는 방식입니다. 주로 컴포넌트들을 조합하여 페이지를 구성하고, 컨테이너 컴포넌트와 내부 컴포넌트들을 포함하는 구조를 갖습니다.
6.3 컴포넌트 재사용 방법
컴포넌트 재사용은 Vue.js에서 중요한 개념이며, 재사용 가능한 컴포넌트를 설계하여 코드의 효율성과 유지 보수성을 높입니다. Vue.js에서 컴포넌트 재사용을 위해 다음 방법들을 사용할 수 있습니다:
1. 컴포넌트 구조화: 비슷한 기능과 스타일의 컴포넌트는 구조화하여 재사용성을 높입니다.
2. 슬롯을 활용한 컴포넌트: 슬롯을 사용하여 부모 컴포넌트에서 자식 컴포넌트에 컨텐츠를 전달하거나 레이아웃을 조정할 수 있습니다.
3. 믹스인(Mixin): 공통된 기능을 가진 컴포넌트 로직을 믹스인으로 추출하여 다른 컴포넌트에서 재사용할 수 있습니다.
4. Vue 컴포넌트 상속: Vue 컴포넌트를 상속하여 공통된 기능을 가진 부모 컴포넌트를 만들어 재사용할 수 있습니다.
예시 코드:
슬롯을 활용한 컴포넌트:
<!-- ParentComponent.vue -->
<template>
<div>
<ChildComponent>
<p>Slot Content</p>
</ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ChildComponent';
export default {
components: {
ChildComponent
},
};
</script>
<!-- ChildComponent.vue -->
<template>
<div>
<slot></slot>
</div>
</template>Mixin을 활용한 컴포넌트:
// mixin.js
export default {
data() {
return {
message: 'This is a mixin!'
};
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('');
}
},
methods: {
logMessage() {
console.log(this.message);
}
}
}
// MyComponent.vue
<template>
<div>
<button @click="logMessage">Log Message</button>
<p>{{ reversedMessage }}</p>
</div>
</template>
<script>
import mixin from './mixin';
export default {
mixins: [mixin]
};
</script>위의 코드 예시에서, 첫 번째 예시는 슬롯을 활용하여 `ParentComponent`에서 `ChildComponent`로 컨텐츠를 전달하는 방법을 보여줍니다. 두 번째 예시는 `mixin.js` 파일에서 재사용 가능한 믹스인을 정의하고, `MyComponent`에서 믹스인을 사용하여 공통 로직을 재사용하는 방법을 보여줍니다.
7. 테스트 구조
테스트 구조는 Vue.js 애플리케이션에서 테스트를 관리하고 실행하는 방식을 의미합니다. 주로 테스트 파일 구조와 테스트 작성 방법을 포함합니다.
7.1 테스트 파일 구조
테스트 파일 구조는 테스트 스위트와 테스트 케이스를 포함하는 방식입니다. 테스트 스위트는 특정 기능이나 컴포넌트에 대한 여러 테스트를 그룹화하는 역할을 합니다. 테스트 케이스는 실제 테스트를 정의하는 코드를 포함합니다.
7.2 단위 테스트 작성 방법
단위 테스트는 개별적인 모듈, 함수 또는 컴포넌트의 동작을 테스트하는 방법입니다. Vue.js에서 단위 테스트를 작성하기 위해 주로 다음 방법을 사용합니다:
1. Jest 등의 테스트 프레임워크를 사용하여 테스트 환경을 설정합니다.
2. describe 함수를 사용하여 테스트 스위트를 생성하고 it 함수를 사용하여 개별 테스트 케이스를 정의합니다.
3. expect 함수와 Matcher 함수를 사용하여 예상 결과와 실제 결과를 비교하고 테스트를 평가합니다.
예시 코드:
// sum.js
export const sum = (a, b) => {
return a + b;
};
// sum.test.js
import { sum } from './sum';
describe('sum', () => {
it('adds two numbers', () => {
expect(sum(2, 3)).toBe(5);
});
it('returns NaN if any argument is not a number', () => {
expect(sum(2, '3')).toBe(NaN);
expect(sum(undefined, 3)).toBe(NaN);
expect(sum(null, 3)).toBe(NaN);
});
});위의 코드 예시에서, sum.js 파일은 ‘sum’이라는 함수를 내보냅니다. sum.test.js 파일은 Jest를 사용하여 테스트 환경을 설정하고 describe 함수를 사용하여 ‘sum’ 함수에 대한 테스트 스위트를 생성합니다. it 함수를 사용하여 개별 테스트 케이스를 정의하고, expect 함수와 Matcher 함수를 사용하여 예상 결과와 실제 결과를 비교하여 테스트를 평가합니다.
7.3 UI 테스트 작성 방법
UI 테스트는 Vue.js 애플리케이션의 사용자 인터페이스와 상호 작용하는 동작을 테스트하는 방법입니다. Vue.js에서 UI 테스트를 작성하기 위해 주로 다음 방법을 사용합니다:
1. Cypress나 Nightwatch 같은 엔드 투 엔드(e2e) 테스트 프레임워크를 사용하여 실제 브라우저에서 테스트를 실행합니다.
2. 테스트 스텁과 모의 객체를 사용하여 외부 의존성을 가짜로 대체하여 테스트를 진행합니다.
3. 각 UI 컴포넌트에 대한 테스트 케이스를 작성하고, DOM 요소에 직접 상호 작용하거나 Vue 인스턴스의 상태와 동작을 검증합니다.
예시 코드:
// Counter.vue
<template>
<div>
<button @click="increment">Increment</button>
<p>Count: {{ count }}</p>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
};
</script>
// Counter.spec.js (Cypress로 작성한 UI 테스트)
describe('Counter', () => {
it('increments count when the button is clicked', () => {
cy.visit('/counter');
cy.get('button').click();
cy.get('p').should('contain', 'Count: 1');
});
});위의 코드 예시에서, Counter.vue 파일은 간단한 카운터 기능을 가진 컴포넌트입니다. Counter.spec.js 파일은 Cypress를 사용하여 UI 테스트를 작성하고, describe 함수를 사용하여 ‘Counter’ 컴포넌트에 대한 테스트 스위트를 생성합니다. it 함수를 사용하여 개별 테스트 케이스를 정의하고, cy 객체를 사용하여 실제 브라우저에서 동작을 시뮬레이션하고 DOM 요소를 선택하며, should 함수를 사용하여 예상 결과를 확인합니다.
8. 빌드 구조
빌드 구조는 Vue.js 애플리케이션의 번들링 및 빌드 설정을 관리하는 방식을 의미합니다. 주로 빌드 설정 파일 구조와 프로덕션 및 개발용 빌드 설정에 대한 내용을 포함합니다.
8.1 빌드 설정 파일 구조
빌드 설정 파일 구조는 Vue.js 애플리케이션의 빌드 과정을 설정하는 파일의 구조를 의미합니다. Vue CLI를 사용하는 경우, 일반적으로 `vue.config.js` 파일이 사용됩니다. 이 파일은 프로젝트의 빌드 구성 요소와 설정 옵션을 정의하는 JavaScript 파일입니다.
8.2 프로덕션 빌드 설정
프로덕션 빌드는 배포할 때 사용되는 최적화된 빌드를 생성하는 과정을 의미합니다. 프로덕션 빌드 설정을 위해 주로 다음과 같은 방법을 사용합니다:
1. 압축 및 최적화: JS, CSS, HTML 파일의 크기를 줄이기 위해 코드 압축, 트리 쉐이킹, 번들 분할 등의 최적화 작업을 수행합니다.
2. 환경 변수 설정: 프로덕션 환경에서 필요한 변수를 설정하고, 개발 환경에서는 해당 변수를 무시하도록 구성합니다.
3. 메타데이터 설정: 정적 파일에 대한 캐싱, 컨텐츠 헤시 등의 메타데이터를 설정하여 브라우저 캐싱을 향상시킵니다.
4. 소스 맵 생성: 디버깅을 위해 소스 맵을 생성하고, 프로덕션 빌드에서는 소스 맵을 제외하도록 구성합니다.
8.3 개발용 빌드 설정
개발용 빌드는 개발 중에 사용되는 빌드를 생성하는 과정을 의미합니다. 개발용 빌드 설정을 위해 주로 다음과 같은 방법을 사용합니다:
1. 개발 서버 설정: 개발 서버를 설정하여 빠른 개발 반복 및 실시간 리로드를 가능하게 합니다.
2. 소스 맵 지원: 디버깅을 위해 소스 맵을 생성하고, 개발용 빌드에서 소스 맵을 포함하도록 구성합니다.
3. 환경 변수 설정: 개발 환경에서 필요한 변수를 설정하고, 프로덕션 환경에서는 해당 변수를 무시하도록 구성합니다.
4. 플러그인 활성화: 개발 시 유용한 플러그인이나 도구를 활성화하고, 프로덕션 빌드에서는 제외하도록 구성합니다.
예시 코드:
빌드 설정 파일
9. 배포 구조
배포 구조는 Vue.js 애플리케이션을 실제 서버에 배포하고 관리하는 방식을 의미합니다. 주로 배포 스크립트 구조와 배포 환경 구조, CI/CD 파이프라인 구축 방법을 포함합니다.
9.1 배포 스크립트 구조
배포 스크립트 구조는 Vue.js 애플리케이션을 배포하기 위해 필요한 스크립트와 명령어의 구성을 의미합니다. 배포 스크립트는 주로 서버에 코드를 전달하고, 의존성을 설치하고 빌드하며, 애플리케이션을 실행하는 단계로 나누어집니다.
9.2 배포 환경 구조
배포 환경 구조는 Vue.js 애플리케이션을 배포할 때 사용되는 서버 및 인프라스트럭처의 구성을 의미합니다. 배포 환경은 주로 다음과 같은 요소로 구성됩니다:
1. 웹 서버: Vue.js 애플리케이션을 호스팅하고 실행할 웹 서버를 선택하고 구성합니다.
2. 데이터베이스: 필요한 경우 애플리케이션에서 사용하는 데이터를 저장하기 위한 데이터베이스를 선택하고 구성합니다.
3. CDN (Content Delivery Network): 정적 파일을 캐싱하고 전 세계적으로 배포하기 위해 CDN을 사용할 수 있습니다.
4. 도메인 및 SSL 인증서: 애플리케이션에 사용할 도메인 및 SSL 인증서를 구성합니다.
9.3 CI/CD 파이프라인 구축 방법
CI/CD (Continuous Integration / Continuous Deployment) 파이프라인은 애플리케이션의 지속적인 통합과 배포를 자동화하기 위한 방법을 의미합니다. Vue.js 애플리케이션의 CI/CD 파이프라인 구축 방법으로는 일반적으로 다음과 같은 단계를 거칩니다:
1. 소스 코드 버전 관리: Git과 같은 버전 관리 시스템을 사용하여 소스 코드를 관리합니다.
2. 지속적인 통합 (CI): 코드 변경 사항을 자동으로 빌드하고 단위 테스트를 실행하여 코드 품질을 유지합니다.
3. 지속적인 배포 (CD): 테스트, 스테이징, 프로덕션 환경에 자동으로 배포하는 파이프라인을 구축합니다.
4. 테스트 환경: 테스트를 자동으로 실행하기 위한 테스트 환경을 구성하고, 서버 및 데이터베이스를 구성합니다.
5. 빌드 및 릴리스: 빌드 스크립트를 사용하여 빌드하고 관련 파일을 릴리스에 업로드합니다.
6. 모니터링: 배포된 애플리케이션의 성능과 오류를 모니터링하고 필요한 조치를 취합니다.
CI/CD 파이프라인 작성을 위한 코드 예시는 제공하기 어렵지만, 인기 있는 CI/CD 도구인 Jenkins, GitLab CI/CD, Travis CI, CircleCI 등을 사용하여 CI/CD 파이프라인을 구축할 수 있습니다.
10. 참고 자료 및 관련 도구
10.1 공식 문서 및 가이드
Vue.js에 대한 공식 문서 및 가이드는 다음과 같은 리소스를 참고할 수 있습니다:
– Vue.js 공식 문서: [https://v3.vuejs.org/](https://v3.vuejs.org/)
– Vue CLI 공식 문서: [https://cli.vuejs.org/](https://cli.vuejs.org/)
– Vue Router 공식 문서: [https://router.vuejs.org/](https://router.vuejs.org/)
– Vuex 공식 문서: [https://vuex.vuejs.org/](https://vuex.vuejs.org/)
10.2 Vue.js 개발자 커뮤니티
Vue.js 개발자 커뮤니티는 다음과 같은 온라인 리소스를 통해 정보와 지원을 받을 수 있습니다:
– Vue.js 포럼: [https://forum.vuejs.org/](https://forum.vuejs.org/)
– Vue.js 유용한 링크 및 리소스 목록: [https://github.com/vuejs/awesome-vue](https://github.com/vuejs/awesome-vue)
– Vue.js Slack 채널: [https://vue-land.js.org/](https://vue-land.js.org/)
10.3 유용한 Vue.js 도구 및 라이브러리
Vue.js 애플리케이션 개발 시 유용한 도구와 라이브러리는 다음과 같습니다:
– Vue Router: Vue.js 애플리케이션 내의 라우팅을 관리하기 위한 라이브러리입니다. [https://router.vuejs.org/](https://router.vuejs.org/)
– Vuex: Vue.js 애플리케이션 내의 상태 관리를 위한 라이브러리입니다. [https://vuex.vuejs.org/](https://vuex.vuejs.org/)
– Vuetify: Vue.js용 머터리얼 디자인 컴포넌트 프레임워크입니다. [https://vuetifyjs.com/](https://vuetifyjs.com/)
– Vue Test Utils: Vue.js 애플리케이션의 유닛 테스트를 위한 헬퍼 라이브러리입니다. [https://vue-test-utils.vuejs.org/](https://vue-test-utils.vuejs.org/)
– Vue Devtools: Vue.js 개발을 위한 브라우저 확장 도구입니다. [https://github.com/vuejs/vue-devtools](https://github.com/vuejs/vue-devtools)
이 외에도 [Awesome Vue](https://github.com/vuejs/awesome-vue)에는 많은 유용한 Vue.js 도구와 라이브러리가 나열되어 있습니다.