rhanziy

Vue 3버전 설치, 개발환경 셋팅 본문

study

Vue 3버전 설치, 개발환경 셋팅

rhanziy 2023. 2. 1. 22:09

1. node.js 다운받기. 최신버전 확인

2. 프로젝트 폴더생성

3. 터미널에서 프로젝트 폴더로 이동 후

npm install -g @vue/cli

4. vs코드 에디터 부가기능 설치 Vetur, HTML CSS Support, Vue 3 Snippets

 

*npm install 안되면 yarn 1.xx 설치해보세요.
구글에 Installation | Yarn 사이트 들어가서 설치하고.. 재시작.
맥은 설치 필요 없이 터미널에 npm install --global yarn

yarn 있으면
yarn global add @vue/cli

 

5. 작업영역에 작업용 폴더 추가하고 vue create 프로젝트명

   - vue3 선택

6. vue 프로젝트를 작업영역에 추가

7. src > App.vue에 코드를 짜면 됨니다.

  - <template> 안에는 HTML, <script>안에는 JS, <style> 안에는 CSS

  - 미리보기 띄우고 싶으면 npm run serve

 

 

 

node_modules : 프로젝트에 쓰는 라이브러리들

src : 소스코드 담는 곳

public : html 파일, 기타파일 보관

package.json : 라이브러리버전, 프로젝트 설정 기록

 

Comments