1. 노드 js(nodejs) 설치(https://nodejs.org/ko/)
2. 비주얼 스튜디오 코드(vs code) 설치(https://code.visualstudio.com/)
3.vs code로 프로젝트 생성 할 폴더를 오픈
4. 터미널창 열고 npm install -g @vue/cli 입력 및 설치
5. 확장메뉴(ctrl+shift+x)에서 vetur, html css support, vue 3 snippets 설치
6. 터미널창에서 vue create 프로젝트명으로 프로젝트 생성
7.vscode로 프로젝트 폴더를 오픈
8.src 또는 components에. vue 파일을 이용해서 코딩
9.터미널 창에 npm run serve 입력
10.localhost:8080에서 볼 수 있다
1. 노드 js(nodejs) 설치(https://nodejs.org/ko/)
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
2. 비주얼 스튜디오 코드(vs code) 설치(https://code.visualstudio.com/)
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
3.vs code로 프로젝트 생성 할 폴더를 오픈
4. 터미널창 열고 npm install -g @vue/cli 입력 및 설치
5. 확장메뉴(ctrl+shift+x)에서 vetur, html css support, vue 3 snippets 설치
6. 터미널창에서 vue create 프로젝트명으로 프로젝트 생성
7.vscode로 프로젝트 폴더를 오픈
8.src 또는 components에. vue 파일을 이용해서 코딩한다
9. 터미널 창에 npm run serve 입력
10.localhost:8080에서 볼 수 있다
npm 잘 안되면 yarn으로 설치(npm 잘돼서 yarn 모름)
https://startatage30.tistory.com/4
[2화] vuejs 의 데이터 바인딩
1. 데이터 보관 : data( ){ return{ 오프젝트 데이터 보관 } } 2. 데이터 바인딩 : {{ 오프젝트 데이터 명}} 3. 출력화면 1. 데이터 보관 : data( ){ return{ 오프젝트 데이터 보관 } } 2. 데이터 바인딩 : {{ 오프젝
startatage30.tistory.com
'Vue.js > 실습' 카테고리의 다른 글
| [vuejs] 컴포넌트(component), Props, Custom Event (1) | 2022.12.24 |
|---|---|
| [vuejs] 이미지(image) 및 모달창(modal screen) v-if 사용 (0) | 2022.12.24 |
| [vuejs] click 이벤트 (0) | 2022.12.22 |
| [vuejs] 반복문 v-for (0) | 2022.12.22 |
| [vuejs] 의 데이터 바인딩 (0) | 2022.12.22 |
댓글