헤르메스 LIFE

[Vue.js] 기초 #1 컴포넌트 생성 및 등록하기 + index.html(favicon.ico + font awesome) 본문

CSR(Client Side Rendering)

[Vue.js] 기초 #1 컴포넌트 생성 및 등록하기 + index.html(favicon.ico + font awesome)

헤르메스의날개 2022. 7. 22. 00:52
728x90

TodoHeader.vue Sample

<template>
  <div>
    header
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

실행

npm run dev

결과

파비콘 생성 사이트
https://www.favicon-generator.org/
 
    <!-- 반응형 웹 디자인을 위한 Meta Tag (일반적인 모바일 최적화 코드) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

font awesome 6.1.1

<script defer src="https://use.fontawesome.com/releases/v6.1.1/js/all.js" integrity="sha384-xBXmu0dk1bEoiwd71wOonQLyH+VpgR1XcDH3rtxrLww5ajNTuMvBdL5SOiFZnNdp" crossorigin="anonymous"></script>

font awesome 6.0.0

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />

font awesome 5.14.4

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" crossorigin="anonymous">

font awesome 5.0.9

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" crossorigin="anonymous">

Google Ubuntu Font

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue-todo</title>
    <!-- 반응형 웹 디자인을 위한 Meta Tag (일반적인 모바일 최적화 코드) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="src/assets/favicon.ico" type="image/x-icon">
    <link rel="icon" href="src/assets/favicon.ico" type="image/x-icon">
    <script defer src="https://use.fontawesome.com/releases/v6.1.1/js/all.js"
      integrity="sha384-xBXmu0dk1bEoiwd71wOonQLyH+VpgR1XcDH3rtxrLww5ajNTuMvBdL5SOiFZnNdp" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

https://fontawesome.com/v6/icons?m=free 

 

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

 

728x90

'CSR(Client Side Rendering)' 카테고리의 다른 글

[Vue.js] 인프런의 캡틴판교님의 Todo 샘플 리팩토링 정리입니다.  (0) 2022.08.02
[Vue.js] 인프런 캡틴 판교님의 Todo 샘플 정리  (0) 2022.08.01
[Vue.js] Vue.js Upgrade ( 2.9.x -> 3.x ) 후 개발환경 구축  (0) 2022.07.19
Windows환경에서 npm / node.js 최신버전으로 설치  (0) 2022.07.17
[Vue.js] DevTools 설치 - Chrome plugin 설치  (0) 2022.04.06
'CSR(Client Side Rendering)' Related Articles more