Vue Basic
깃헙 링크
Template 프로젝트 만들기
Project 생성
vue create templateDirectory Tree 형태
template/ ├── babel.config.js ├── node_modules/ ├── package-lock.json ├── package.json ├── public/ | ├── favicon.ico | └── index.html ├── README.md └── src/ ├── App.vue ├── assets/ ├── components/ └── main.jscomponents/: 공통적으로 사용하는 component들을 보통 하나의 폴더로 묶어서 관리해준다.- 파일명은 Vue.js Style Guide를 따라 파스칼케이스로 만들어주었다.
- Vue component 파일은
.vue로 저장한다.
간단한 프로젝트로 배우기
Habit tracker
Template 복사하기
cd -R template habit-tracker- template의 상위 디렉토리에서 입력
Vue Mount
공식 문서
우리가 만든 컴포넌트를
html과 연결해 준다.public/index.html<body> ... ... <div id="app"></div> </body>src/main.jsnew Vue({ render: h => h(App), }).$mount('#app')appcomponent는 Virtual DOM에 저장되고vm.$mount(el)이 호출되었을 때 DOM에 업데이트 된다.
VUE 정리
Vue Component를 저장해주기 위해
app.vue로 만들어 주었다. 그럼.vue란 무엇일까?
공식문서
.vue가 없었을 때 Vue 작성법// 등록 Vue.component('my-component', { template: '<div>사용자 정의 컴포넌트 입니다!</div>' }) // 루트 인스턴스 생성 new Vue({ el: '#example' })html처럼 입력할 수 있도록 해주는.vue<template> <h1>Hello :)</h1> </template>
비즈니스 로직 작성
<template>
<div class="example">{{ msg }}</div>
</template>Language Blocks
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
<style>
.example {
color: red;
}
</style>
<custom1>
This could be e.g. documentation for the component.
</custom1>Template
vue-template-compiler에 의해 JavaScript code로 Compile되어 html<script>section에 삽입된다.
Script
- Vue.js Component option object 로 실행된다.
- ES Module을 실행하며, Webpack 규칙을 따른다.
Style
- CSS 코드를 입력할 수 있다.
Custom Blocks
- 이외에도 추가적으로 Custom Block을 만들어 줄 수 있다.
- 상세 내용
Habit tracker
habit component 만들기
vueInit+ tap 을 누르면 자동으로 기본적인 코드가 써진다.(Vue 3 Snippets extention이 설치된 경우)
file name은 두가지 이상 단어의 합성어로 PascalCase로 작성한다.
Fontawesome 추가
설치
npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons ## Using Vue 2.x npm i --save @fortawesome/vue-fontawesome@latestsrc/main.js에 추가import Vue from "vue"; import App from "./App.vue"; import { library } from "@fortawesome/fontawesome-svg-core"; import { "사용할 icon" } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; library.add("사용할 icon"); Vue.component("font-awesome-icon", FontAwesomeIcon); Vue.config.productionTip = false; new Vue({ render: (h) => h(App), }).$mount("#app");Fontawesome에서 검색해서 추가하기
상단 검색창에서 원하는 icon 검색
src/main.js에 icon 추가import 목록에 추가
import { "사용할 icon" } from "@fortawesome/free-solid-svg-icons";library에 추가library.add("사용할 icon");
'Web > Vue' 카테고리의 다른 글
| Vue.js 시작하기 (0) | 2020.12.25 |
|---|