오랜만에 학습이라 지역콤포넌트/전역콤포넌트부터 다시 공부했다. 헤헤..
[한줄 요약]
-실무에서 쓰는건 지역콤포넌트!
-콤포넌트마다 개별 vue 파일로 제작!
-한 파일안에는 하나의 div 파일만 존재!
-App.vue 파일에 모을때는 import와 new vue에서 콤포넌트 정의 필수!
Vue.js 투두리스트를 만들기위해 기본 셋팅하기 + 지역콤포넌트 설정
2022/04/15
[반드시 필요한 개발 환경]
-NPM
-Visual Studio
-vue.js
-github
-Chrome
[Visual Studio code]
-무료 프로그램, 홈페이지에서 다운 받기
https://code.visualstudio.com/
-플러그인 vetur 사용하기
:코드를 인식하여 가독성 좋게 변경
-TSLint 사용하기
:TypeScript코드를 가독성 좋게 검사
-node.js,chrome, vue플러그인, github를 설치
기본 셋팅은 이전 공부에서 되어 있어서 참고
Vue.js 기본셋팅 - 프로그램, 확장 플러그인 설치 (vetur, google amterial icon, live server, ESLint, Prettier, Auto
다시 처음부터! 강의를 들어가며 개념을 다질려고 한다. 이전에 todo list를 만들면서 대부분의 프로그램과 플러그인을 설치했는데, 추가로 설치할 내용들이 있었다. 역시 플러그인은 알면 알수록
studiodebbbie.tistory.com
-Github계정이 없다면 계정도 만들어준다.
:찾아보니 이전에 사용하던 계정이 있어서 계속 사용!
-git clone시작
:원하는 리포짓토리의 주소복사
git clone 깃허브주소
-VUE-CLI 업데이트
VUE-CLI란 명령어를 실행하는 보조도구
npm install -g @vue/cli
추가적인 내용은 이전 포스팅에서>>
Vue.js - vue-cli 사용 방법과 살펴보기
Vue.js - vue-cli 사용 방법과 살펴보기 2022/01/17 1.VUE CLI -홈페이지 존재 -커맨드와 인터페이스의 약자이며, 명령어로 실행하는 보조도구 2.설치하기 -Get started의 Installation에서 실행 명령어로..
studiodebbbie.tistory.com
-새로운 뷰 프로젝트 생성
vue create 프로젝트명
-파일 위치 이동 및 서버 시작
(*꼭 파일 위치를 확인하고 서버를 열기)
cd vue-todo
npm run serve
-기본 파일 생성확인
-새로운 폴더 생성 > 새로운 파일 생성 > vue입력시 자동 vue템플릿 생성
(*하나의 콤포넌트 당 들어가는 div는 1개!)
-src/components 폴더에 콤포넌트 파일들 제작 (.vue)
-App.vue 파일에 모든 콤포넌트들을 import로 입력 > 각 파일을 출력하기위해 콤포넌트로 등록
(파일명에서 모든 내용을 App.vue로 가져오는 것)
-헤더/인풋/리스트/푸터 제작
예) 파일에서 가져오고
import TodoHeader from './components/TodoHeader.vue'
콤포넌트 값을 등록해주기
export default {
components:{
'TodoHeader' : TodoHeader,
}
}
-해당 vue 파일에서 모든 내용이 그대로 app.vue에서 표현된다
*콤포넌트란?
-화면을 영역 별로 구분해서 제작
-재사용성이 높아 코드의 반복을 줄이고, 빠른 화면 제작이 가능
1.전역 콤포넌트 제작
-<script>태그 내에
Vue.component('콤포넌트이름',{콤포넌트 내용});
<!--예시-->
Vue.component('app-header',{
template : '<h1>Header</h1>'
})-body 태그에 <app-header></app-header> 태그만 입력하면 자동으로 h1 태그가 적용된 Header 출력
2.지역콤포넌트 제작
-콤포넌트 정의 기본 문법 <script>태그 내에,
new Vue({
el:'#app',
components:{
'컴포넌트이름':컴포넌트 내용
}
})
<!--예시-->
new Vue({
'app-header':{
template:'<h1>Header</h1>'
}
})-<body> 태그 내에, <app-header>태그 입력시 h1태그가 입력된 Header 문자열 출력
-서버에서 확인하기위해 터미널 확인, 로컬을 열면 됨!
-화면에 입력 된 내용 확인
'괴발개발' 카테고리의 다른 글
| Vue.js 투두리스트 - List 데이터 로컬스토리지에서 가져오기, 삭제하기 (0) | 2022.04.21 |
|---|---|
| Vue.js 투두리스트 - Input를 위한 로컬스토리지 + 스타일 (0) | 2022.04.18 |
| git사용하기 (4) - git컴플릭트 해결하기 (0) | 2022.04.14 |
| git사용하기 (3) - 포크/풀리퀘스트/어멘드/리버트/체리픽 (0) | 2022.04.13 |
| 소스트리로 git/github 활용하기 - pull / push / merge (0) | 2022.04.05 |