Development/Vue.js

[Vue.js] 시작하기

Rosie, Lee 2021. 9. 23. 09:33

공식 가이드 문서

https://v3.vuejs-korea.org/guide/introduction.html

 

시작하기 | Vue.js

시작하기 NOTE 이미 Vue 2를 알고 있고 Vue 3의 새로운 점을 배우고 싶으신가요? Migration Guide를 확인하세요! Vue.js가 무엇인가요? Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를

v3.vuejs-korea.org

공식 가이드 문서를 참고하여 정리해보도록 하겠습니다.

 

1. 설치 방법

https://v3.vuejs-korea.org/guide/installation.html

 

설치방법 | Vue.js

설치방법 Vue.js는 점진적으로 적용할 수 있도록 설계되었습니다. 이는 요구사항에 따라 여러 방법으로 프로젝트에 통합될 수 있음을 의미합니다. 프로젝트에 Vue.js를 추가하는 3가지 주요방법이

v3.vuejs-korea.org

CLI(Command Line Interface) npm을  통해 설치할 수 있습니다.

$ npm i -g @vue/cli

-g 는 전역에 설치한다는 뜻입니다.

터미널에서 vue 명령어를 통해서 프로젝트를 실행하기 위해 전역에 설치합니다.

 

2. 프로젝트 생성

https://cli.vuejs.org/guide/creating-a-project.html

 

Creating a Project | Vue CLI

Creating a Project vue create To create a new project, run: WARNING If you are on Windows using Git Bash with minTTY, the interactive prompts will not work. You must launch the command as winpty vue.cmd create hello-world. If you however want to still use

cli.vuejs.org

$ vue create vue-test
 $ cd vue-test
 $ npm run serve

설치 완료되면, 위와 같은 명령어가 생성됩니다.

cd 명령어를 통해 만들어준 폴더로 이동할 수 있으며, npm run serve 명령어를 통해 개발서버를 열 수 있습니다.

 

3. 프로젝트 실행

$ code . -r

위 명령어를 통해 vs코드(소스코드편집기)를 실행해줍니다.

혹은 vs코드에서 해당 폴더를 직접 열어주셔도 됩니다.

 

만약 code . -r 로 실행하고 싶다면, 먼저 vs코드에서 아래와 같이 설치해주셔야합니다.

 

4. 생성된 파일 살펴보기

package.json 파일

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  • serve: 개발환경
  • build: 제품화
  • lint: vue 코드를 규칙에 맞게 작성했는지 확인

main.js 파일

createApp(App).mount('#app')

mount 메소드를 통해 css 아이디 선택자인 app이라는 요소를 선택해서 vue로 연결해준다는 의미 입니다.

 

App.vue 파일

코드의 하이라이팅이 없어서 보기 어렵다면, vs코드의 확장프로그램인 'vetur' 설치해줍니다.

vue 확장자를 가진 파일은 크게 세가지로 나누어져있습니다.

  • template(html)
  • script(js)
  • style(css)

 

자세한 내용은 다음 글에서  이어가도록 하겠습니다.

반응형