Vue.js 프로젝트 생성하기

#vue-cli 

 

폴더구조, 라이브러리, build 등 기본 vue 개발 환경을 설정해주는 cli 도구 

 

#vue-cli 설치하기 

npm install -g @vue/cli

 

#vue 프로젝트 생성하기 

vue create projectName

vue create 명령어로 프로젝트 생성

 

* vs code terminal에서 실행되지 않는다면 windows powershell 문제로 

 

preset을 선택하면 프로젝트를 생성한다.

vue3 기본 환경으로 프로젝트를 생성하고 싶다면 vue3를 

vue2 기본 환경으로 프로젝트를 생성하고 싶다면 vue2를 

직접 라이브러리, build 등의 환경을 수동으로 설정하고 싶다면 manually를 선택하면 된다.

프로젝트가 생성되면 cd projectName, npm run serve로 프로젝트를 시작하라고 한다. 

프로젝트 디렉터리로 이동해서 서버를 실행하고 8080 포트로 접속하면 아래와 같은 화면이 나온다. 

 

**서버를 종료할 때는 ctrl+c 

 

vue-cli 로 생성된 프로젝트로 돌아가면 

workspace 안에 vue3-cli 프로젝트가 생성되어있다. 

 

먼저 package.json에는 프로젝트 정보, 프로젝트에 설치된 라이브러리 등이 있고 

package.json에 설정된 라이브러리는 node_module에 설치된 것을 확인할 수 있다. 

여기서 dependencies와 devDependencies 두가지가 있는데 

dependencies는 배포용, dev는 개발용이다. 

개발용 dependencies는 설치할 때 npm install library -D 로 설치하면 된다. 

그리고 scripts 의 serve, build, lint는 custom cli 명령어이다. 

 

 

public의 index.html 파일을 확인하면 

 

#app div가 있다. 

이 태그 안에 createApp 으로 만들어진 app 컴포넌트가 들어갈 것을 예상할 수 있다. 

그런데 index.html 파일에는 vue cdn, createApp을 하는 script등이 보이지 않는다. 

대신 주석을 보면 빌드된 파일을 자동으로 주입된다는 것을 볼 수 있다. 

 

localhost:8080 에서 개발자도구를 확인해본다. 

localhost는 index.html document이다. 

head에 app.js를 가져오는 태그가 자동으로 생성되었고 좌측에 app.js를 다운로드하였다. 

app.js는 main.js를 가져오는것을 알 수 있다. 

 

프로젝트의 main.js

package의 dependencies의 vue라이브러리의 vue로부터 createApp을 가져오고 

App.vue에서 App을 가져와 createApp(App)을 #app에 마운트하고 있다. 

 

App.vue파일은 

app(root)컴포넌트를 정의하는 파일이다. 

component패키지에 정의된 Helloworld.vue 컴포넌트를 import 하여 root 컴포넌트의 자식 컴포넌트로 정의하고 있다. 

이처럼 하위 컴포넌트들은 component 패키지에 분리하여 정의하고 root 컴포넌트를 main.js에서 import 함으로써 

main에는 큰 관심사만 모듈로서 정의하고 하위 컴포넌트들을 분리하여 유지보수와 확장성에 유리한 구조가 되었다. 

 

#Vue SFC (Single File Component)

 

싱글 파일 컴포넌트는 vue 컴포넌트의 템플릿, 스크립트, 스타일을 하나의 파일로 묶어낸 .vue 파일 형식이다. 

<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>

 

앞서 보았던 App.vue도 싱글 파일 컴포넌트이고 <template>, <script>, <style>로 구성된 것을 확인할 수 있다. 

 

이전 html 파일에서는 카멜케이스 사용에 관한 문제가 있었는데 

SFC 에서는 파스칼 케이스를 사용하는 것을 알 수 있다. 

물론, 카멜케이스로도 사용할 수 있지만 통일성을 위해 파스칼 케이스로 통일해주도록 한다. 

 

** vue vscode snippet 플러그인 shortcut

vbc(v-base with css) + tab : sfc 기본 구조 template, script, style 생성

vdata + tab : data() {return {}} 생성

 

 

 

https://cli.vuejs.org/

Vue CLI