21.02.20 clean서비스 프로젝트(vue 개발환경 셋팅 및 기초 연습)

# NOTE

<node.js>

- java 14 등을 설치하듯이 자바스크립트를 사용하기 위해선 node를 설치해야 함

- node는 자바스크립트엔진

- 웹브라우저(구글)에는 웹엔진이 들어있어 자바스크립트를 구현할 수 있음

<npm, package.json 개념>

java 의존성 = 메이븐

node 의존성 = npm


- 메이븐 사용시 필요한 라이브러리를 poam.xml에 입력하면 자동으로 다운로드하듯이

- 필요한 라이브러리를 npm install --save jquery 라고 치면 자동으로 다운로드가 됨

- package.json = poam.xml이라고 생각하면 됨

- package.json 파일이 있으면 npm install만 쳐도 기존 라이브러리 복구가 가능함

 <vite 개념>

- vue 3.0 typescript로 작업을 하려면 package.json에 필요한 것들을 다 적어야 함

- 이 과정을 자동화해주는 것이 vite

- node.js 개발자가 vue 관련 프로젝트를 만들때 vue와 관련된 최적화된 package.json을 만들어 주는 것

- vue관련 프로젝트 작업툴

- 설치방식이아닌 호출방식

 <그 외 메모>

tailwind의 단점은 용량이 크다는 점

purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],

이 소스코드를 tailwind.config에 넣어주면

소스코드 업로드시 위 내용에서 한번이라도 언급된 것은 거르고 올려줌?

용량을 줄여줌 -> 최적화를 시켜주는 것

 

 

vue에서 각각의 페이지마다 css를 적용해주어야 함

<style scoped>라고하면 해당 css는 오직 그 vue에서만 적용됨

---

# 소스코드

<main.ts>

import { createApp } from 'vue'
import App from './App.vue'
import HomeMainPage from './pages/HomeMainPage.vue'
import ArticleListPage from './pages/ArticleListPage.vue'
import './index.css'
import { createRouter, createWebHistory } from 'vue-router'

// 라우팅 정보 설정
const routes = [
  { path: '/', component: HomeMainPage },
  { path: '/article/list', component: ArticleListPage }

];

// 라우팅 정보를 가져오는 라우터 생성
const router = createRouter({
  //Provide the history implementation to use. We are using the hash history for simplicity here.
  history: createWebHistory(),
  //routes : routes 이름이 똑같으면 아래처럼 축약 가능
  routes
});


//createApp(App).mount('#app') 이것을 풀어보면 아래와 같음

const app = createApp(App);
app.use(router)
app.mount('#app');

<App.vue>

<!-- vue를 하나의 jsp라고 생각하면 됨 -->

<template>


  <header class="header-bar h-40 bg-gray-100">
    <div class="container mx-auto flex h-full">
      <!-- router-link는 a와 같다고 보면 됨 -->
      <!-- to는 href -->
      <router-link to="/" class="h-full flex items-center">
        <img class="block w-20" src="./assets/logo.png" alt="">
      </router-link>

      <div class="flex-grow"></div>

      <nav class="header-bar__menu-box-1">
        <ul class="flex h-full">
          <li>
            <router-link to="/" class="h-full flex items-center font-bold px-10 hover:bg-black hover:text-white">
              HOME
            </router-link>
          </li>
          <li>
            <router-link to="/article/list" class="h-full flex items-center font-bold px-10 hover:bg-black hover:text-white">
              ARTICLE LIST
            </router-link>
          </li>
        </ul>
      </nav>
    </div>
  </header>

    
   <main>
    <!-- 이것을 해주어야 다른 페이지를 불러올 수 있음 -->
    <router-view></router-view>
  </main>

</template>

<script lang="ts">
import { defineComponent } from 'vue'


export default defineComponent({
  name: 'App'

})
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

<HomeMainPage.vue>

<template>
  <!-- TitleBar 컴포넌트를 불러오고 title을 입력한다 -->
  <!-- class를 추가하여 자신만의 css를 추가할 수도 있다. -->
  <TitleBar title="Home Main" class="bg-green-500"/>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import TitleBar from '../components/TitleBar.vue';
// TitleBar 컴포넌트를 임포트해야한다.

export default defineComponent({
  name: 'HomeMainPage',
   components: {
    TitleBar
    // TitleBar 컴포넌트를 정의해주어야 한다.
  }

})
</script>

<style scoped>

</style>

<ArticleListPage.vue>

<template>
  
  <TitleBar title="Article List" class="bg-purple-500"/>

</template>

<script lang="ts">
import { defineComponent } from 'vue'
import TitleBar from '../components/TitleBar.vue';

export default defineComponent({
  name: 'ArticleListPage',
  components: {
    TitleBar
  }

})
</script>

<style scoped>

</style>

<TitleBar.vue>

<template>
  <!-- 컴포넌트 = 일종의 템플릿? -->
  <!-- 이 양식을 다른 vue에서 불러오기만하면 양식이 적용됨 -->
  <section class="title-bar">
    <h1 class="container mx-auto">
      <!-- {{}}안에 title이라는 property 내용을 담는다 -->
      {{ title }}
    </h1>
  </section>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({  // 컴포넌트의 속성을 정의해주어야 함
  // title props의 속성을 정해준다
  props: {
    title: {
      type: String,
      required: true
    }
  },
  //컴포넌트의 이름을 정의한다
  name: 'TitleBar'
})
</script>

<style scoped>
  
</style>