[FrontEnd] Vue 프로젝트 생성

ss0510s·2022년 6월 19일
0

졸업프로젝트

목록 보기
1/9

1. Node, npm, yarn 설치

  • Vue를 설치하기 위해서는 먼저, Node.js와 npm이 설치되어 있어야 함.

  • mac os -> homebrew 설치가 되어있을 때

    brew update
    brew install node
    node -v
    npm -v

  • yarn도 설치

    brew install yarn --ignore-dependencies
    yarn -v

2. Vue-cli 설치

  • npm을 이용하여 vue-cli 설치

    npm install -g @vue/cli

3. Vue 프로젝트 생성

vue create '프로젝트명'

  • 설치 옵션을 선택한 후 엔터를 치면 프로젝트가 생성됨

4. Vue 프로젝트 실행

  • yarn 사용

    yarn serve

  • npm 사용

    npm run serve

  • 기본 포트번호 8080으로 웹 페이지가 열림

5. Vue 프로젝트 폴더 구조

  • node_modules: npm으로 설치된 패키지 파일들
  • public: Webpack과 호환되지 않은 정적 리소스가 있는 폴더
  • src/assets: 이미지, css, 폰트 등을 관리하는 폴더
  • src/components: Vue 컴포넌트들이 모여있는 폴더
  • App.vue: 최상위 컴포넌트
  • main.js: Vue 인스턴스 생성
  • babel.config.js: 바벨 설정 파일
  • package.json: 프로젝트에 필요한 package를 정의하고 관리

6. 프로젝트 build

  • npm 사용시

    npm run build

  • yarn 사용시

    yarn build

  • 명령어 실행시, dist 폴더 생성

profile
개발자가 되기 위해 성장하는 중입니다.

0개의 댓글