1강 Vue 설치 & 세팅

minjjai·2023년 1월 13일
0

프로젝트 생성

1. Node.js 설치


2. 에디터 설치(인텔리제이, vscode 등)

  • 강의에서는 vscode 사용, 필자는 intellij 사용

3. vue cli 설치

  • 폴더 생성
  • 에디터로 폴더 열기
  • 터미널로 vue cli 설치
npm install -g @vue/cli


npm 으로 install 에러 발생 시 대체로 yarn 사용 시도(안정적이고 약간 빠름)

4. 에디터 부가 기능 설치

vscode

  • Vetur
  • html css support
  • vue 3 snippets

5. vue 프로젝트 생성

  • create
vue create 프로젝트명

ex) vue create vueproject

  • 버전 선택(3버전)

6. vue안의 프로젝트 Open

난 처음의 vue폴더 안에 vueproject라는 이름으로 프로젝트 폴더를 생성했다.
자신의 에디터에서 Open Folder를 이용해 vue폴더 안의 프로젝트 폴더를 열어주자

  • intellij의 경우
    상단의 File -> Open -> 폴더 선택

결과

프로젝트를 성공적으로 열었다.

프로젝트 구조 & 실행

실행

  • 터미널에 실행
npm run serve

http://localhost:8080 접속시 아래와 같은 화면 출력

구조 : 폴더, 파일

  • App.vue
    메인 페이지라고 보면 된다.
    <template>안에는 html 짜고,
    <script>안에는 JS 짜고,
    <style>에는 css짜면 된다.
    App.vue 파일을 html 로 컴파일해 웹에 띄운다.
    public 폴더 안에 있는 index.html 안에 App.vue의 내용이 html로 컴파일되어 들어간다. -> main.js가 이 역할을 한다.

  • node_modules
    프로젝트에 쓰는 라이브러리들

  • src
    소스코드를 담는 곳

  • public
    html 파일, 기타파일 보관

  • package.json
    라이브러리 버전, 프로젝트 설정 정보 기록

추가 설명

  • node.js 설치시 npm 사용 가능
  • npm은 각종 웹 개발에 필요한 라이브러리 설치 도우미이다.
  • npm 으로 vue cli 설치
  • vue cli 는 vue 프로젝트를 빠르게 생성해주는 라이브러리
  • 프로젝트 생성 명령어 -> vue create 프로젝트명
profile
BackEnd Developer

0개의 댓글