vue CLI를 통해서 작업하는 방법을 배워보자.
public폴더의 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
기본적으로 div id="app"부분에 작업물이 들어가게 된다.
main.js에서 작업을 통해 하는 줄 알았으나, vue에서는 .vue라는 특유의 확장자를 사용할 수 있다.
처음엔 텍스트 파일처럼 나와서 중요하지 않은 줄 알았는데, extension에서 vetur을 설치하니 인터페이스가 바뀌었다.
app.vue라는 파일에서 기존에 하던 작업을 진행하고, import 하여서 사용하면 된다.
main.js
import { createApp } from "vue";
import App from "./App.vue";
import FriendContact from "./components/FriendContact.vue";
const app = createApp(App);
app.component("friend-contact", FriendContact);
app.mount("#app");
- component를 import할 수 있다.
- component명을 html태그처럼 사용할 수 있다.
app.vue
<template>
<section>
<header><h1>My Friends</h1></header>
<ul>
<friend-contact></friend-contact>
<friend-contact></friend-contact>
</ul>
</section>
</template>
<script>
import FriendContact from "./components/FriendContact.vue";
export default {
components: { FriendContact },
data() {
return {
friends: [
{
id: "manuel",
name: "Manuel Lorenz",
phone: "012 123 456",
email: "manuel@localhost.com",
},
{
id: "julie",
name: "Julie Jones",
phone: "013 235 789",
email: "julie@localhost.com",
},
],
};
},
methods: {},
computed: {},
};
</script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Jost&display=swap");
* {
box-sizing: border-box;
}
html {
font-family: "Jost", sans-serif;
}
body {
margin: 0;
}
header {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
margin: 3rem auto;
border-radius: 10px;
padding: 1rem;
background-color: #58004d;
color: white;
text-align: center;
width: 90%;
max-width: 40rem;
}
#app ul {
margin: 0;
padding: 0;
list-style: none;
}
#app li {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
margin: 1rem auto;
border-radius: 10px;
padding: 1rem;
text-align: center;
width: 90%;
max-width: 40rem;
}
#app h2 {
font-size: 2rem;
border-bottom: 4px solid #ccc;
color: #58004d;
margin: 0 0 1rem 0;
}
#app button {
font: inherit;
cursor: pointer;
border: 1px solid #ff0077;
background-color: #ff0077;
color: white;
padding: 0.05rem 1rem;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
}
#app button:hover,
#app button:active {
background-color: #ec3169;
border-color: #ec3169;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}
</style>
- style을 추가하여 css를 관리할 수 있다.
component폴더의 FriendContact.vue(=PascalCase)
<template>
<li>
<h2>{{ friend.name }}</h2>
<button @click="toggleDetails">
{{ detailsAreVisible ? "Hide" : "Show" }} Details
</button>
<ul v-if="detailsAreVisible">
<li><strong>Phone:</strong>{{ friend.phone }}</li>
<li><strong>Email:</strong>{{ friend.email }}</li>
</ul>
</li>
</template>
<script>
export default {
data() {
return {
detailsAreVisible: false,
friend: {
id: "manuel",
name: "Manuel Lorenz",
phone: "012 123 456",
email: "manuel@localhost.com",
},
};
},
methods: {
toggleDetails() {
this.detailsAreVisible = !this.detailsAreVisible;
},
},
};
</script>
- 파일명은 PascalCase로 사용
코린이(코인아님)