{"componentChunkName":"component---src-templates-blog-post-js","path":"/vue/vue-js-이해-및-환경설정/","result":{"data":{"site":{"siteMetadata":{"title":"Bottlehs Tech Blog","description":"웹·앱·AI 개발자 전병훈(bottlehs)의 기술 블로그. AI·LLM, JavaScript·Vue, Spring Boot, 알고리즘, 블록체인 실무 가이드를 다룹니다","siteUrl":"https://www.bottlehs.dev","author":{"name":"Jeon Byung Hun","summary":"개발을 즐기는 bottlehs - Engineer, MS, AI, FE, BE, OS, IOT, Blockchain, 설계, 테스트"},"social":{"github":"bottlehs","codepen":"bottlehs"}}},"markdownRemark":{"id":"a0f140e3-40bb-5fa8-8bf8-f9862fd1d993","excerpt":"Vue JS 이해 및 환경설정 Vue.js는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 자바스크립트 프레임워크이다. 아래와 같은 특징을 가진다. 특징 SPA (Single Page Application) 재사용 가능한 Components…","html":"

\"Vue

\n

Vue.js는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 자바스크립트 프레임워크이다.

\n

아래와 같은 특징을 가진다.

\n

특징

\n\n

확장도구

\n

chrome

\n\n

VS Code - Extensions

\n\n

Node.js

\n

구글 V8엔진을 기반으로 만들어진 서버측 자바스크립트 언어이자 플랫폼\nNode 설치시 “npm” 이 자동 설치된다.

\n\n

Vue CLI 설치

\n

VS Code 터미널 실행후 아래 명령어 입력 한다.

\n
npm install -g @vue/cli
\n

Vue CLI (Vue command line interface) 는 기본 vue 개발 환경을 설정해주는 도구이다. vue-cli 가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build, 어떤 라이브러리로 구성을 해야되는지 webpack 설정은 어떻게 해야되는지에 대한 고민을 덜을 수 있다.

\n
\n

CLI 란 ?

\n

명령 줄 인터페이스(CLI, Command line interface) 또는 명령어 인터페이스는 텍스트 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식을 뜻한다. 즉, 작업 명령은 사용자가 컴퓨터 키보드 등을 통해 문자열의 형태로 입력하며, 컴퓨터로부터의 출력 역시 문자열의 형태로 주어진다. (위키백과)

\n
\n

프로젝트 생성

\n\n
vue create {프로젝트명} // 프로젝트명이 폴더로 생성된다.
\n
    \n
  1. \n

    Manually select features

    \n

    \"Manually

    \n
    2. \n
  2. \n

    Babel, Progressive Web App (PWA) Support, Router, Vuex, Linter/Formatter, Unit Testing, E2E Testing 추가

    \n

    \"abel,

    \n
    3. \n
  3. \n

    Use history mode for router? (Y 선택)

    \n

    \"Use

    \n
    4. \n
  4. \n

    Pick a linter / formatter config (ESLint + Prettier 선택)

    \n

    \"Pick

    \n
    5. \n
  5. \n

    Pick additional lint features (Lint on save 선택)

    \n

    \"Pick

    \n
    6. \n
  6. \n

    Pick a unit testing solution (Jest 선택)

    \n

    \"Pick

    \n
    7. \n
  7. \n

    Pick an E2E testing solution (Cypress 선택)

    \n

    \"Pick

    \n
    8. \n
  8. \n

    Where do you prefer placing config for Babel, ESLint, etc.? (In dedicated config files 선택)

    \n

    \"Where

    \n
    9. \n
  9. \n

    Save this as a preset for future projects? (Y 선택 ~ 저장될 preset {이름})

    \n

    \"Save

    \n
    10. \n
  10. \n

    프로젝트 생성 완료

    \n

    \"프로젝트

    \n
    11. \n
\n

프로젝트 구조

\n

\"vue-프로젝트구조\"

\n\n

프로젝트 실행 or 빌드

\n

serve\n개발용 버전으로 웹 실행

\n
npm run serve\n// vue-cli-service serve
\n

\"vue

\n

실행 화면

\n

\"vue

\n

build\n배포용 버전으로 dist 생성

\n
npm run build\nvue-cli-service build
\n

\"vue

","tableOfContents":"","wordCount":{"words":474},"fields":{"slug":"/vue/vue-js-이해-및-환경설정/","image":"/assets/vue-logo.png","faq":[]},"frontmatter":{"title":"Vue JS 이해 및 환경설정","date":"2021년 3월 28일","dateISO":"2021-03-28T09:11:34.709Z","updatedISO":null,"category":"vue","description":"뷰(Vue.js)는 점진적으로 채택 가능한 구조를 갖추고 있다. 코어 라이브러리는 선언형 렌더링과 컴포넌트 구성에 초점을 두며 기존 페이지에 임베드가 가능하다. 라우팅, 상태 관리, 빌드 도구화와 같이 복잡한 애플리케이션에 필요한 고급 기능들은 공식적으로 유지 보수되는 지원 라이브러리와 패키지를 통해 제공된다.","tags":["vue","javascript","framework","frontend","web"]}}},"pageContext":{"slug":"/vue/vue-js-이해-및-환경설정/","previous":{"fields":{"slug":"/springboot/스프링-부트-구조/"},"frontmatter":{"title":"스프링 부트 구조","tags":["스프링","스프링부트","Spring","SpringBoot","Java","프레임워크","스프링부트구조","아키텍쳐"]}},"next":{"fields":{"slug":"/vue/vue-js-인스턴스-&-컴포넌트-소개/"},"frontmatter":{"title":"Vue JS 인스턴스 & 컴포넌트 소개","tags":["vue","javascript","framework","frontend","web"]}}}},"staticQueryHashes":["213619243","3262363727"]}