Vue CLI(https://cli.vuejs.org/)에 대한 자세한 정보를 참고하기 바랍니다.
Vue CLI는 빠른 Vue.js 애플리케이션 개발을 위한 시스템을 제공합니다.
Vue CLI 설치하기
1. 콘솔을 실행하고 Vue CLI를 설치하기 위해 npm install 명령어를 실행합니다.
npm install -g @vue/cli
설치가 진행됩니다.
설치가 완료됩니다.
2. 설치 후 vue 명령어로 정상적으로 설치되었는지 확인할 수 있습니다.
vue --version
Vue 프로젝트 만들기
1. 콘솔을 실행하고 C:\workspaces\nodeserver 폴더로 이동합니다.
만약 폴더가 없으면 생성하시기 바랍니다.
2. Vue 프로젝트를 생성하기 위해 vue create 명령어를 실행합니다. Vue 프로젝트 명은 "testvue"입니다.
vue create testvue
Vue 프로젝트를 어떻게 구성할 건지 preset(프리셋 : 사전 설정)합니다. 키보드의 화살 키로 위/아래로 이동할 수 있습니다.
Vue 프로젝트를 기본 구성으로 된 Vue 2 또는 Vue 3 버전을 선택하거나 직접 기능을 선택할 수 있습니다.
여기서는 Default (Vue 3)으로 하겠습니다.
만약 "Manually select features"를 선택하면 사용할 기능들을 직접 선택할 수 있습니다.
Vue 프로젝트를 기본 구성으로 된 Vue 3 버전으로 설치가 진행됩니다.
testvue 폴더가 생성되고 1340개의 모듈 설치와 Vue 프로젝트 관련 파일들이 생성되어 완료됩니다.
탐색 창으로 testvue 폴더를 오픈합니다.
package.json 파일의 "dependencies"와 "devDependencies" 보면 node_modules 폴더에 설치된 Vue 모듈과 babel, eslint 모듈 정보를 확인할 수 있습니다.
{
"name": "testvue",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
그리고 package-lock.json 파일은 node_modules에 있는 모듈들에 대한 버전 정보들을 가지고 있어 설치되는 모듈 간의 의존성 처리에 사용됩니다.
Vue 프로젝트의 폴더 구성은 다음과 같습니다.
testvue : Vue 프로젝트 폴더
+- node_modules : Node 모듈 폴더
+- public : 이미지 파일이나 CSS 파일, JavaScript 파일등과 같은 정적 파일들이 있는 폴더
+- favicon.ico : 아이콘 파일(파비콘)
+- index.html : 레이아웃 웹 페이지 파일 (html-webpack-plugin으로 처리될 템플릿)
+- src : 소스 폴더
+- assets : 이미지 파일이나 CSS 파일, JavaScript 파일등과 같은 정적 파일들이 있는 폴더
(build로 배포 버전을 만들 때 public과 함께 배포)
+- logo.png : 로고 이미지 파일
+- components : Vue 컴포넌트 폴더
+- HelloWorld.vue : HelloWorld 컴포넌트 파일
+- App.vue : 애플리케이션 컴포넌트 파일
+- main.js : entry point 파일 (Vue 생성 - 제일 먼저 실행)
Vue 처리 순서를 간단히 설명하면 다음과 같습니다.
1. 서버가 실행되면서 entry point인 main.js를 실행
2. main.js에서 createApp() 메서드로 인스턴스를 생성하고 App.vue를 렌더링
3. App.vue에서 HelloWorld.vue를 가져와 렌더링
3. 렌더링 결과를 pulic 폴더에 있는 index.html에서 주입합니다.
main.js에 대한 Vue 2 vs Vue 3 버전 차이
Vue 2 프로젝트의 main.js 파일
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App),
}).$mount('#app')Vue 3 프로젝트의 main.js 파일
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')Vue 생성자(new Vue)에서 createApp() 메서드 사용으로 변경되어서 동일한 파일에서 여러 개의 Vue Instance 생성될 때 공통으로 사용되던 부분(Vue.use(), Vue.component())이 없어져 효율적인 Vue Instance 생성이 가능해졌습니다.
App.vue 파일을 통한 Vue 컴포넌트 구조 이해하기
Vue 컴포넌트의 파일 확장자는 ".vue"입니다.
Vue 컴포넌트는 <template>, <script>, <style>로 구분되어 있습니다.
- <template>은 Vue 컴포넌트에서 사용할 HTML입니다.
- <script>는 Vue 컴포넌트에서 처리할 javascript입니다.
- <style>은 <template>에 있는 element에 대한 css입니다.
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Vue 컴포넌트는 <script>를 통해 처리됩니다.
<script>에서는 import와 export를 이용해 가져오거나 보낼 수 있습니다.
export는 다른 컴포넌트에서 사용할 수 있게 전달합니다.
import는 모듈이나 컴포넌트를 가져옵니다.
다음은 HelloWorld.vue에서 props를 통해 상위 컴포넌트로부터 "msg"란 속성으로 문자열(String)을 전달받겠다고 지정하였습니다.
export default {
name: 'HelloWorld',
props: {
msg: String
}
}props의 타입은 네이티브 생성자(String, Number, Boolean, Function, Object, Array, Symbol) 중 하나를 사용할 수 있습니다.
다음은 App.vue에서 components 폴더에 있는 HelloWorld.vue를 지정된 이름인 "HelloWorld"로 가져옵니다.
import HelloWorld from './components/HelloWorld.vue'그리고 <template>에서 "HelloWorld"에 "msg"로 문자열(String)을 전달합니다.
<HelloWorld msg="Welcome to Your Vue.js App"/>
import의 from에서 Vue 컴포넌트를 가져올 때 현재의 Vue 컴포넌트의 폴더를 기준으로 상대 경로로 가져옵니다.
"./"는 현재 폴더, "../"는 현재 폴더의 부모 폴더가 기준이 됩니다. 이런 상대 경로는 복잡해 보일 수 있습니다.
그래서 상대 경로를 절대 경로로 가져올 수 있습니다.
src 폴더를 가리키는 "@"를 사용하면 됩니다. "@"는 src 폴더의 alias입니다.
import HelloWorld from '@/components/HelloWorld.vue'
export의 구조 이해
name : 상위 컴포넌트에서 사용할 수 있게 이름을 설정합니다. (필수는 아닙니다.)
components : 컴포넌트에서 사용하고 있는 컴포넌트들을 설정한다.
props : 상위 컴포넌트로부터 데이터를 전달받을 수 있게 이름과 타입을 설정합니다.
setup : 컴포넌트에서 사용할 데이터들은 state로 설정하고 메서드들을 설정한다. (Vue 2에서 사용되는 data, method가 setup으로 변경) - Vue 3
data : 컴포넌트에서 사용할 데이터들을 설정한다. - Vue 2
method : 컴포넌트에서 사용할 메서드를 설정한다. - Vue 2
computed : 컴포넌트에서 data들이 변화면 자동 처리되는 메서드를 설정한다. - Vue 2
자세한 설명은 다음에 이어서 하겠습니다.
package.json의 "scripts"에는 npm run 명령에서 사용할 스크립트가 정의되어 있습니다.
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
Vue 프로젝트를 실행
npm run serveVue 프로젝트를 컴파일하여 dist 폴더로 출력
npm run buildVue 프로젝트에 대한 오류 체크
npm run linteslint를 이용하여 에러 체크합니다.
3. 콘솔을 실행하고 C:\workspaces\nodeserver\testvue 폴더로 이동합니다. 그리고 콘솔에서 npm run 명령어를 실행합니다.
npm run serve
개발 서버가 모듈들을 로딩합니다.
로딩이 완료되고 정상적으로 서버가 실행됩니다.
4. 웹 브라우저에서 "http://localhost:8080"를 입력합니다.
5. 서버를 종료하려면 Ctrl + C를 누르고 "Y"를 입력하고 엔터키를 누르면 됩니다.
