Vite+Vue3+Router+TailWind+GitHub Pages 설치

Vite+Vue3+Router+TailWind+GitHub Pages 설치

복제 이름:vite-vue-router-tailwind-test
GiitHub 웨어하우스: https://github.com/reiya0104/vite-vue-router-tailwind-test
GitHub Pages: https://reiya0104.com/vite-vue-router-tailwind-test/

목표

Vite라는 빌드 도구를 사용하여 Vue(Vue3) + Router(Router4) 응용 프로그램을 만듭니다.
이후 TailWind라는 CSS 프레임워크를 가져와 GiitHub Pages에 공개할 수 있도록 했다.

생성 방법

Step.0 Node.설치 js/ npm/ yarn

Volta 버전 관리 도구로 설치했습니다.
Volta의 설치, 참조여기..
사용 환경

OS: Windows 10 Home

Volta: v1.0.5

Node: v16.13.0

npm: v8.1.4

Yarn: v1.22.17

Step.1 프로젝트 작성

yarn에서vite 프로젝트를 만들고,
루트 디렉터리를 그 항목으로 변경합니다.
그리고 yarn install에 yarn을 설치합니다.
총괄적으로 말하면

yarn create @vitejs/app [プロジェクト名]

(질문 응답vue→vue-ts

cd [プロジェクト名]

yarn install

,

yarn create @vitejs/app vite-vue-router-tailwind-test

(질문 응답vue→vue-ts

cd vite-vue-router-tailwind-test

.
프로젝트 이름이 길어서 앞으로

yarn install

!
여기,
Vite 프로젝트의 성공 여부를 확인하려면

[プロジェクト名] = vite-vue-router-tailwind-test

을 입력합니다.
(확인 후 명령줄에서 localhost:3000 + Ctrl

Step.2 필요한 패키지 설치

입력

yarn dev

yarn add vue-router@4 vuex axios

설치 패키지.
(vuex와axios에 관해서는 이번에 필요한지 모르겠습니다.)

Step.3 디렉토리 구조

C 디렉토리

src

router.ts 카탈로그

파일을 추가합니다.
그리고 views 디렉토리에서

views

About.vue

파일을 추가합니다.
이렇게 되면 다음과 같은 디렉터리 구조가 될 것 같습니다.

yarn add -D sass scss scss-loader

Step.4 가져오기 로터

Home.vue 카탈로그의

src

src/main.ts

src/App.vue

src/router.ts

src/views/Home.vue

의 5개 문건이 각각 다음과 같이 변경됐다.

src/views/About.vue

root
|   .gitignore
|   index.html
|   package.json
|   README.md
|   tsconfig.json
|   vite.config.ts
|   yarn.lock
|
+---node_modules
|       # 略
|
+---public
|       favicon.ico
|
\---src
    |   App.vue
    |   env.d.ts
    |   main.ts
    |   router.ts       # 追加
    |
    +---assets
    |       logo.png
    |
    +---components
    |       HelloWorld.vue
    |
    \---views           # 追加
            About.vue   # 追加
            Home.vue    # 追加

즉

import { createApp } from 'vue'
+ import router from './router'
import App from './App.vue'

- createApp(App).mount('#app')
+ createApp(App).use(router).mount('#app')

./src/main.ts

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'

createApp(App).use(router).mount('#app')

즉

- <script setup lang="ts">
- // This starter template is using Vue 3 <script setup> SFCs
- // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
- import HelloWorld from './components/HelloWorld.vue'
- </script>

<template>
-   <img alt="Vue logo" src="./assets/logo.png" />
-   <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
+ <div id="nav">
+   <router-link to="/">Home</router-link> |
+   <router-link to="/about">About</router-link>
+ </div>
+ <router-view/>
</template>


<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

+  #nav {
+    padding: 30px;
+  }
+
+  #nav a {
+    font-weight: bold;
+    color: #2c3e50;
+  }
+
+  #nav a.router-link-exact-active {
+    color: #42b983;
+  }

</style>

./src/App.vue

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

./src/router.ts

import Vue from 'vue';
import * as VueRouter from 'vue-router';
import { createRouter, createWebHistory } from 'vue-router'
// HomeビューとAboutビューのインポート
import Home from './views/Home.vue';
import About from './views/About.vue';

const routes = [
  {
    path: '/',
    component: Home  // Homeビュールーティング
  },
  {
    path: '/about',
    component: About  // Aboutビュールーティング
  },
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
});

export default router;

./src/views/Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
  </div>
</template>

<script lang="ts">
// @ is an alias to /src
import HelloWorld from "../components/HelloWorld.vue";

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
};
</script>

여기로 변경하면 로터를 추가할 수 있을 것 같습니다.

Step.4.5 GiitHub Pages에 공개

여기서 GiitHub Pages 로 투고해 보겠습니다.
먼저 ./src/views/About.vue를 (으)로 변경합니다.

./vite.config.ts

<template>
  <div class="about">
    <h1>This is About page</h1>
  </div>
</template>

즉

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  // 本番時はgithubリポジトリをルートパスにする
+ base: (process.env.NODE_ENV === 'poduction')
+    ? '/[プロジェクト名]/' : './',
+ build: {
+   outDir: 'docs'
+ },
  plugins: [vue()]
})

.
그런 다음 명령줄에서 다음 작업을 수행합니다.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  // 本番時はgithubリポジトリをルートパスにする
  base: (process.env.NODE_ENV === 'production')
    ? '/[プロジェクト名]/' : './',
  build: {
    outDir: 'docs'
  },
  plugins: [vue()]
})

이렇게 하면 ./vite.config.ts 폴더가 완성되고 docs 등도 완성됩니다.
다음으로 GiitHub을 설정합니다.
GiitHub에 Push가 없는 사람은 이 타이밍을 이용하세요.
GiitHub Pages를 활성화하려면 다음 절차를 따르십시오.

GiitHub의 사본 페이지로 이동index.html

왼쪽 탭에서 선택Setting

아래 사진(첫 번째 사진)의 Pages을 None로 변경하고, 그 다음에 나온 master를 📁/(root)(두 번째 사진)로 저장한다.docs로 저장

아래 Save가 선택되지 않으면 확인하십시오.☑한다.

조금만 더 기다리면 지정된 URL로 이 페이지를 볼 수 있다.

Step.5 TailWind 가져오기

TailWind를 가져옵니다.
먼저 다음 두 명령을 입력합니다.
tailwind가 아니라 tailwindcss를 주의하세요!

yarn build

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

할 수 있다Enforce HTTPS와postcss.config.js.tailwind.config.js 다음과 같이 변경되었습니다.

tailwind.config.js

yarn -s run tailwindcss init -p

즉

module.exports = {
- purge: [],
+ purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

다음에 ./tailwind.config.js 디렉터리에 src를 만듭니다. 아래와 같습니다.

index.scss

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

또한 이 문서를 효력을 발생시키기 위해 ./src/index.scss는 다음과 같다.

src/main.ts

@tailwind base;
@tailwind components;
@tailwind utilities;

즉
나는 이렇게 하면 Tailwind가 유효하다고 생각한다.
하지만 미리보기를 보니 아까와는 판면이 달라졌다.
마지막으로, TailWind 명령을 사용하여 페이지 전체를 정리합니다.

Step.6 TailWind를 통해 페이지 조정

완전한 원상복구는 TailWind의 표준 설정에서 어렵기 때문에 가능한 한 가까운 내용을 쓴다.
우선./src/main.ts을 다음과 같이 조정한다.

src/index.scss

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'
+ import './index.scss'

createApp(App).use(router).mount('#app')

즉

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'
import './index.scss'

createApp(App).use(router).mount('#app')

다음에 ./src/index.scss의src/views/Home.vue에 클래스를 추가합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

+ h1 {
+   @apply text-3xl;
+   @apply font-bold;
+   @apply my-6;
+ }
+
+ p {
+   @apply leading-4;
+   @apply my-4;
+ }
+
+ button {
+   @apply bg-gray-100;
+   @apply hover:bg-gray-200;
+   @apply border-gray-500;
+   @apply border;
+   @apply px-2;
+   @apply py-0.5;
+   @apply rounded;
+ }

즉

@tailwind base;
@tailwind components;
@tailwind utilities;

h1 {
  @apply text-3xl;
  @apply font-bold;
  @apply my-6;
}

p {
  @apply leading-4;
  @apply my-4;
}

button {
  @apply bg-gray-100;
  @apply hover:bg-gray-200;
  @apply border-gray-500;
  @apply border;
  @apply px-2;
  @apply py-0.5;
  @apply rounded;
}

이렇게 기본적으로 원상태로 돌아왔어요!
완전히 복구하고 싶은 사람은 검증 도구 복원을 보십시오.

Step.7 GiitHub 페이지 만들기

마지막 일.

img

종료되지 않은 사람은 설정Step.4.5 GitHub Pages で公開する과 GiitHub로 돌아가십시오.
끝난 사람,
실행하십시오

<template>
  <div class="home">
-   <img alt="Vue logo" src="../assets/logo.png" />
+   <img alt="Vue logo" class="mx-auto" src="../assets/logo.png" />
    <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
  </div>
</template>

<script lang="ts">
// @ is an alias to /src
import HelloWorld from "../components/HelloWorld.vue";

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
};
</script>

.
그리고 GiitHub을 누르면 완성됩니다!
수고하셨습니다!

끝말

처음에는 Vue + Router에서 Tailw Wind를 가져오려고 했지만, 수첩에 Vite라는 것을 사용해서 헷갈렸다.
시간이 많이 걸렸지만 할 수 있어서 다행이다.
읽어주셔서 감사합니다.

참고 문장

Vue 3 계열+TS+Vite를 사용하여 0부터 시작된 SPA 개발[서장]환경구축편]

vite+vue3+typescript로github 페이지에 사이트 공개

[WEB 개발] Vue.js+TailWind CSS 가져오기

Install Tailwind CSS with Vue 3 and Vite