vue.js 설치 방법

vue 설치 부터 실행, 플러그인 설치, 빌드 까지
진짜 기본적인 사항들에 대해 간단히 살펴보겠습니다

node 설치

우선 vue.js 설치를 위해서는 node(npm) 설치가 필요 합니다

node 설치 방법은 아래 글을 참고해주세요!

https://hoho325.tistory.com/309

vue.js 설치

아래 명령어를 이용해 vue 설치를 진행합니다

npm install -g @vue/cli

vsc vue extension 설치

에디터로 vsc를 쓰기 위해 extension을 설치 합니다.

• html
• javascript
• vue vscode extension pack

구글 크롬 확장도구 설치

이는 꼭 설치 안 해도 되지만 크롬을 이용해 디버깅 한다면 좀 더 편리할 수 있습니다

• vue.js devtool 설치

vue cli 프로젝트 생성

vue-cli를 활용해 간단하게 프로젝트를 생성합니다

vue create vue-test

개발 서버 구동

저는 Vue 3 설치를 선택하여 진행했습니다

그러면 위와 같이 설치가 진행이 됩니다
맨 밑의 파란 글씨 처럼 입력하면 test를 해볼 수 있습니다

폴더를 들어가보면 위와 같이 여러 파일들이 생성되어 있습니다. 이제 서버 구동 고고

npm run serve

***위 명령어를 이용하는 이유***

package.json 파일을 보면 다음과 같이 되어있습니다

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

npm run server를 하게 되면 위 serve에 있는 값이 입력되어 서버가 구동되게 됩니다

위 주소에 접속해보게 되면 vue로 된 테스트 페이지를 보실 수 있습니다

vue 플러그인 설치

여러 플러그인 즉, 모듈들이 있지만 처음 vue 개발을 하더라도 아래 두개는 사용할 것입니다

• router
• vuex

npm install vue-rotuer
npm install vuex

위 명령어를 커맨드 창에서 입력해 추가합니다

설치된 목록들은 package.json 에서 dependencise 항목에서 버전과 함께 확인 가능합니다

빌드, 배포

배포시에는 아래와 같은 명령어로 build를 진행합니다.

npm run build

build를 하게되면 위 처럼 dist 폴더가 생성되며 파일들이 추가로 생기게 됩니다

실제 구동할 js 파일 들로 변환한다고 보시면 됩니다!