[Vue] 뷰 프로젝트 생성 및 서버 시작하기

Vue.js 공식 홈페이지를 봐도 프로젝트 생성하고 실행을 설명하는 부분을 찾지 못해서 작성합니다.

 

해당 내용은 공식 홈페이지에서 제공하는 동영상 가이드를 보고 정리한 것입니다.

https://www.vuemastery.com/courses/real-world-vue-js/vue-cli

Vue CLI 3 - Creating our Project - Real World Vue.js | Vue Mastery

• Vue CLI
• Vue UI
• 프로젝트 만들기
• 프로젝트 탐색하기

---

 

Vue CLI

Vue Command Line Interface

• 우리의 프로젝트에 사용될 라이브러리를 선택합니다.
• 웹팩을 사용합니다.
• 원하는거 다 쓰셔도 됩니다.
• .vue, 타입스크립트, scss, pug, 최신 ECMA6
• HMR 지원합니다.

Vue 설치

• npm i -g @vue/cli

프로젝트 만들기

1. vue create [name]

vue create new-vue-project

 

2. preset 설정

기본적으로 babel, eslint만 쓸건지,

추가적으로 Router, Vuex 등 쓸건지 결정합니다.

 

이외 추가 설정은 마음대로 하시면 됩니다.

 

3. 실행

cd new-vue-project

npm run serve

localhost:8080 접속

 

Vue UI

커맨드 창에서 vue ui 를 입력한 뒤 엔터를 입력하면 인터넷 창이 열립니다.

해당 창에서 위 방법과 똑같이 설정을 하여 프로젝트를 생성하고 관리할 수 있습니다.

플러그인 관리도 가능합니다.

 

프로젝트 탐색하기

• node_modules: 모든 라이브러리를 관리합니다.
• public: 웹팩의 영향을 받고싶지 않은 파일들을 넣습니다.
• scr: 모든 코드가 있는 곳입니다.
  • assets: 이미지, 사진 등을 저장합니다.
  • components: 뷰 앱의 컴포넌트들을 저장합니다.
  • views: 페이지들을 저장합니다.