boseok-note
  • README
  • javascript
    • 함수형 자바스크립트
    • core
      • 이벤트루프 (Event Loop)
      • boxing, unboxing
      • prototype
      • 실행컨텍스트
      • hoisting
      • 클로져(Closure)
      • arguments
      • Scope - 스코프 - 유효범위
    • api
      • Promise
      • Fetch API
      • worker-api
      • Web API
    • lib
      • rxjs
        • rxjs
    • 호스트객체?
    • es6
      • var-let-const
      • template-literals
      • async-await
    • tip
      • array-like
      • Object literal, new Object
    • dom-api
      • HTML Element get Text
      • get-size
      • scrollToBottom
    • for in, for of 차이
    • storage
    • Constructor (생성자)
    • Javascript
    • module
  • front-end
    • vuejs
      • vue-rx
      • README
        • 1-start
        • 2-basic-component
        • 3-add-component
        • 4-advanced-component
        • 5-dynamic-methods-event
        • 6-internal-process
      • next-tick
      • compare-react
      • v-model-with-props
      • v-for
      • vuejs
      • vuex
    • browser
      • dom
      • cssom
      • reflow, repaint
      • 렌더링 트리(Rendering Tree)
      • web-standard
    • css
      • text-ellipse
      • white-space
      • css layout
    • Pre-render
    • react-native
      • react-native
    • 최적화 관련
    • reactjs
      • performance
      • reactjs
    • CSR, SSR
  • server-side
    • letsencrypt
    • auto-deploy
    • nlb
    • Certbot, aws https setting with wildcard
    • mysql
    • node.js
      • npm
        • npm install
      • node-dynamodb
      • node에서 간편하게 letsencrypt를 사용하여 https 구현하는 방법
    • Docker
    • nginx
    • Amazon Web Service
    • nginx https 설정
  • design-pattern
    • observer
    • flux
    • README
  • coop
    • git
      • gitignore
      • remote
      • ssh key 사용하기
      • password
      • credential
      • git
  • cs
    • port
    • data-structure
      • tree
      • binary-tree
    • network
      • home-router
      • tcp-udp
      • http
    • process
  • etc
    • sync-async
    • seo
      • seo
      • SEO Check Point
    • rest
    • unity
      • methods
Powered by GitBook
On this page
  • 개발환경 설정
  • 1. node.js 설치하기
  • 2. vue/cli 설치하기
  • 3. 텍스트에디터 설치하기
  • 4. vue cli로 프로젝트 생성
  • 5. 에디터에서 생성한 프로젝트열기
  • 6. 로컬에서 웹 띄우기
  • 7. 브라우저에서 생성한 프로젝트 확인하기
  1. front-end
  2. vuejs
  3. README

1-start

PreviousREADMENext2-basic-component

Last updated 6 years ago

개발환경 설정

1. node.js 설치하기

2. vue/cli 설치하기

npm install -g @vue/cli
# 버전 확인
vue --version
# or
vue -V

3. 텍스트에디터 설치하기

추천 에디터

  1. WebStorm - 유료

  2. vscode - 무료

4. vue cli로 프로젝트 생성

vue create 프로젝트이름

프로젝트 생성시 여러가지 옵션들을 선택하게되는데, 여기에 대해 잘 모른다면, 두번째 선택지에서 Use NPM을 선택하시고 나머지는 기본을 선택하시면 됩니다. 3.0.4 기준으로는 선택지가 한개밖에없네요. 그냥 선택하고 넘어가시면 됩니다.

5. 에디터에서 생성한 프로젝트열기

에디터에서 생성한 프로젝트의 디렉토리를 추가하거나 open 하면됩니다.

6. 로컬에서 웹 띄우기

npm run serve

7. 브라우저에서 생성한 프로젝트 확인하기

http://127.0.0.1:8080/
# or
http://localhost:8080/

빈페이지가 아닌, 아래와 같은 화면이 나오면 성공

https://nodejs.org/ko/