78. Loading Assets
npm create vue@latest
강의에서 제공해준 CSS 파일은 src/assets 폴더 안에 css폴더에 넣습니다.
/* main.css */
a {
transition: all 0.15s ease;
}
/* text-yellow-500 */
a:hover {
color: #f59e0b;
text-decoration: none;
}
.text-orange {
color: #f59e0b !important;
fill: #f59e0b !important;
}
.card-header .fa.text-orange,
.card .card-header .fas.text-orange {
color: #ff5e3a;
fill: #ff5e3a;
}
.introduction-bg {
animation: slide 50s linear infinite;
will-change: background-position;
z-index: -1;
}
#playlist li:first-child {
padding-top: 25px;
}
.upload-dropbox.upload-dropbox-drag {
color: #fff;
background-color: #20d862;
border-color: #20d862;
border-style: solid;
}
input[type="file"] {
margin-top: 20px;
}
.progress-bar {
background-size: 1rem 1rem;
background-image: linear-gradient(
45deg,
rgba(255, 255, 255, 0.15) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.15) 50%,
rgba(255, 255, 255, 0.15) 75%,
transparent 75%,
transparent
);
animation: progress-bar-stripes 1s linear infinite;
}
.music-bg {
animation: slide 50s linear infinite;
will-change: background-position;
}
@keyframes progress-bar-stripes {
0% {
background-position: 1rem 0;
}
100% {
background-position: 0 0;
}
}
@keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: -4000px 0;
}
}
그리고 main.ts에서 Tailwind를 가져온 위치 아래에, main.css도 가져옵니다.
// main.ts
import './assets/base.css'
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
위와 같이 CSS 파일을 main.ts에 가져오는 이유는 CSS가 Vite에서 처리되게 하기 위해서입니다.
이제 이미지로 넘어갑니다.
이미지는 img 폴더에서 찾을 수 있습니다.
CSS 파일과는 달리, 이 이미지들은 vite에서 처리되길 원하지 않습니다.
대신에, Vite에서 생성한 번들로 복사되어야 합니다.
우리가 할 일은 이미지를 public 디렉토리로 복사하는 것입니다.
public 디렉토리에 배치된 파일들은 복사되지만, vite에서 완전히 처리되지는 않습니다.
앱을 프로덕션에 배포할 때, public/assets 디렉토리의 복사본을 만들 것입니다. 다음으로 public 디렉토리 내의 css 디렉토리를 삭제합니다.src 디렉토리에 이미 CSS 파일들이 저장되어 있기 때문에, public 디렉토리에 계속해서 CSS 파일을 저장하는 것은 의미가 없습니다.
파일을 저장하는 2가지 방법이 있습니다.src 디렉토리는 자산 파일을 저장할 수 있습니다.
이 디렉토리에 자산 파일을 저장하면, Vite가 이를 처리합니다.
만약 PostCSS나 SASS와 같은 다른 서드파티 라이브러리를 거치지 않고 복사하기만 원한다면 public 디렉토리 안에 파일들을 두어야 합니다.
로드해야할 마지막 파일은 폰트와 아이콘입니다.
편집기로 돌아가 템플릿 디렉토리의 index.html 파일을 엽니다.
문서의 head 섹션으로 이동합니다.
여기서 Roboto 폰트와 Font-Awesome 아이콘 세트에 대한 링크를 찾을 수 있습니다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>Music Template</title>
<!-- CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous"
/>
<link href="assets/css/main.css" rel="stylesheet" />
</head>
<body class="bg-gray-100 font-sans pb-24">
<!-- Header -->
<header id="header" class="bg-gray-700">
<nav class="container mx-auto flex justify-start items-center py-5 px-4">
<!-- App Name -->
<a class="text-white font-bold uppercase text-2xl mr-4" href="#"
>Music</a
>
<div class="flex flex-grow items-center">
<!-- Primary Navigation -->
<ul class="flex flex-row mt-1">
<!-- Navigation Links -->
<li>
<a class="px-2 text-white" href="#">Login / Register</a>
</li>
<li>
<a class="px-2 text-white" href="#">Manage</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Introduction -->
<section class="mb-8 py-20 text-white text-center relative">
<div
class="absolute inset-0 w-full h-full bg-contain introduction-bg"
style="background-image: url(assets/img/header.png)"
></div>
<div class="container mx-auto">
<div class="text-white main-header-content">
<h1 class="font-bold text-5xl mb-5">Listen to Great Music!</h1>
<p class="w-full md:w-8/12 mx-auto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
et dolor mollis, congue augue non, venenatis elit. Nunc justo eros,
suscipit ac aliquet imperdiet, venenatis et sapien. Duis sed magna
pulvinar, fringilla lorem eget, ullamcorper urna.
</p>
</div>
</div>
<img
class="relative block mx-auto mt-5 -mb-20 w-auto max-w-full"
src="/assets/img/introduction-music.png"
/>
</section>
<!-- Main Content -->
<section class="container mx-auto">
<div
class="bg-white rounded border border-gray-200 relative flex flex-col"
>
<div class="px-6 pt-6 pb-5 font-bold border-b border-gray-200">
<span class="card-title">Songs</span>
<!-- Icon -->
<i
class="fa fa-headphones-alt float-right text-green-400 text-xl"
></i>
</div>
<!-- Playlist -->
<ol id="playlist">
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
<li
class="flex justify-between items-center p-3 pl-6 cursor-pointer transition duration-300 hover:bg-gray-50"
>
<div>
<a href="#" class="font-bold block text-gray-600">Song Title</a>
<span class="text-gray-500 text-sm">Artist Name</span>
</div>
<div class="text-gray-600 text-lg">
<span class="comments">
<i class="fa fa-comments text-gray-600"></i>
15
</span>
</div>
</li>
</ol>
<!-- .. end Playlist -->
</div>
</section>
<!-- Player -->
<div class="fixed bottom-0 left-0 bg-white px-4 py-2 w-full">
<!-- Track Info -->
<div class="text-center">
<span class="song-title font-bold">Song Title</span> by
<span class="song-artist">Artist</span>
</div>
<div class="flex flex-nowrap gap-4 items-center">
<!-- Play/Pause Button -->
<button type="button">
<i class="fa fa-play text-gray-500 text-xl"></i>
</button>
<!-- Current Position -->
<div class="player-currenttime">00:00</div>
<!-- Scrub Container -->
<div class="w-full h-2 rounded bg-gray-200 relative cursor-pointer">
<!-- Player Ball -->
<span
class="absolute -top-2.5 -ml-2.5 text-gray-800 text-lg"
style="left: 50%"
>
<i class="fas fa-circle"></i>
</span>
<!-- Player Progress Bar-->
<span
class="block h-2 rounded bg-gradient-to-r from-green-500 to-green-400"
style="width: 50%"
></span>
</div>
<!-- Duration -->
<div class="player-duration">03:06</div>
</div>
</div>
<!-- Auth Modal -->
<div class="fixed z-10 inset-0 overflow-y-auto hidden" id="modal">
<div
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
>
<div class="fixed inset-0 transition-opacity">
<div class="absolute inset-0 bg-gray-800 opacity-75"></div>
</div>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen"
>​</span
>
<div
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
>
<!-- Add margin if you want to see some of the overlay behind the modal-->
<div class="py-4 text-left px-6">
<!--Title-->
<div class="flex justify-between items-center pb-4">
<p class="text-2xl font-bold">Your Account</p>
<!-- Modal Close Button -->
<div class="modal-close cursor-pointer z-50">
<i class="fas fa-times"></i>
</div>
</div>
<!-- Tabs -->
<ul class="flex flex-wrap mb-4">
<li class="flex-auto text-center">
<a
class="block rounded py-3 px-4 transition hover:text-white text-white bg-blue-600"
href="#"
>Login</a
>
</li>
<li class="flex-auto text-center">
<a class="block rounded py-3 px-4 transition" href="#"
>Register</a
>
</li>
</ul>
<!-- Login Form -->
<form>
<!-- Email -->
<div class="mb-3">
<label class="inline-block mb-2">Email</label>
<input
type="email"
class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
placeholder="Enter Email"
/>
</div>
<!-- Password -->
<div class="mb-3">
<label class="inline-block mb-2">Password</label>
<input
type="password"
class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
placeholder="Password"
/>
</div>
<button
type="submit"
class="block w-full bg-purple-600 text-white py-1.5 px-3 rounded transition hover:bg-purple-700"
>
Submit
</button>
</form>
<!-- Registration Form -->
<form>
<!-- Name -->
<div class="mb-3">
<label class="inline-block mb-2">Name</label>
<input
type="text"
class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
placeholder="Enter Name"
/>
</div>
<!-- Email -->
<div class="mb-3">
<label class="inline-block mb-2">Email</label>
<input
type="email"
class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
placeholder="Enter Email"
/>
</div>
<!-- Age -->
<div class="mb-3">
<label class="inline-block mb-2">Age</label>
<input
type="number"
class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
/>
</div>
<!-- Password -->
<div class="mb-3">
<label class="inline-block mb-2">Password</label>
<input
type="password"
class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
placeholder="Password"
/>
</div>
<!-- Confirm Password -->
<div class="mb-3">
<label class="inline-block mb-2">Confirm Password</label>
<input
type="password"
class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
placeholder="Confirm Password"
/>
</div>
<!-- Country -->
<div class="mb-3">
<label class="inline-block mb-2">Country</label>
<select
class="block w-full py-1.5 px-3 text-gray-800 border border-gray-300 transition duration-500 focus:outline-none focus:border-black rounded"
>
<option value="USA">USA</option>
<option value="Mexico">Mexico</option>
<option value="Germany">Germany</option>
</select>
</div>
<!-- TOS -->
<div class="mb-3 pl-6">
<input
type="checkbox"
class="w-4 h-4 float-left -ml-6 mt-1 rounded"
/>
<label class="inline-block">Accept terms of service</label>
</div>
<button
type="submit"
class="block w-full bg-purple-600 text-white py-1.5 px-3 rounded transition hover:bg-purple-700"
>
Submit
</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
이들을 index 파일로 복붙할 것입니다.
폰트는 외부 소스에서 옵니다.
모듈을 설치하거나 파일을 복사할 필요가 없습니다.
CDN을 사용하여 링크할 수 있습니다.
요약
자산을 로드하는 방법에는 직접 가져오기(link) 또는 public 디렉토리에 링크하는 두 가지 방법이 있습니다. (npm 설치 (src)까지 3가지 아닌가?)
어느 방법이든 유효합니다.public 디렉토리에 위치한 파일은 최종 번들에 복사됩니다.src 디렉토리에 파일을 두면, vite에 의해 처리된 후 번들과 함께 배송됩니다.