📗 프로젝트 만들기

📄 vue-cli 설치

npm install -g @vue/cli
vue create [프로젝트 명]

명령어 입력 후 나는 vue3 프로젝트로 선택하여 생성하였다. 예전엔 vue2가 default 값이였는데 이젠 vue3인걸 보니 많이 안정화가 되었나보다.

프로젝트가 정상 생성되었다.

npm install
npm run serve

폴더로 이동 후 명령어를 입력하여 프로젝트를 실행해보자

정상적으로 프로젝트가 실행된 모습이다.

하지만 포트가 8080으로 뜨는데 나중에 백엔드도 작업해야하므로 3000으로 바꾸고 싶다. express랑 겹치긴 하지만 나는 express가 아닌 스프링이 backend 일거라서 3000으로 쓴다.

  "scripts": {
    "serve": "vue-cli-service serve --port 3000",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

package.json파일을 다음과 같이 포트 옵션을 추가해주면 포트번호로 서버가 실행된다.

그리고 router만 우선 설치해보자

📄 vue-router 설치

참고 vue-router 공식 문서

npm install vue-router@4

공식 문서에서 알려주는 명령어 그대로 입력했다.

/router/router.js 파일을 생성해서

import { createWebHistory, createRouter } from "vue-router";
import Home from '@/components/Home'

const router = createRouter({
    history: createWebHistory(),
    routes: [   // routing
        {path: '/', name: 'home', component: Home},
    ]
});

export default router;

다음과 같이 입력해주었다. /로 요청했을 때 component Home을 보여준다는 것이다.

main.js 파일은

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

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

위에서 만든 router 파일을 적용시켜주고

App.vue파일은

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
</script>

기존에 HelloWorl 컴포넌트를 사용하는 것 대신 router-view로 나오게 설정해주었다.

<template>
    <div>
        <h1>home page</h1>
    </div>
</template>

<script>
export default {
    
}
</script>

새로 생성한 home page의 경우 다음과 같이 간단하게 우선 작성했다.

여기서 lint 때문에 에러가 발생할 수 있다. 컴포넌트 이름이 너무 단순하기 때문인데 나는 단순하게 쓰고 싶다... vue-cli로 설치한 프로젝트의 경우

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false
})

vue.config.js파일을 다음과 같이 lintOnSave 옵션을 꺼주면 된다고 한다.

그러면 이제

페이지를 우리가 원하는 내용으로 확인해볼 수 있다.

📘 profile 나누기

vue는 .env파일을 사용할 수 있다.

.env.dev 와 .env.local 파일을 각각 만들어두었다

  "scripts": {
    "dev": "vue-cli-service serve --port 3000 --mode dev",
    "serve": "vue-cli-service serve --port 3000",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

local과 serve를 각각 만들어서 local 용과 prod 용을 따로 구분해두었다.

지금은 사용하지 않을 거지만 미리 만들어두자!

📘 Tailwind 적용하기

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

명령어를 입력해주자

그럼 프로젝트 내에 tailwind.config.js 파일이 생성되는데

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
        "./index.html",
        "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

파일 내용을 다음과 같이 수정해준다.

<h1 class="text-3xl font-bold underline">This is Home</h1>
<!-- This example requires Tailwind CSS v2.0+ -->
<div class="bg-gray-50">
  <div
    class="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-16 lg:px-8"
  >
    <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
      <span class="block">Ready to dive in?</span>
      <span class="block text-indigo-600">Start your free trial today.</span>
    </h2>
    <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
      <div class="inline-flex rounded-md shadow">
        <a
          href="#"
          class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white hover:bg-indigo-700"
          >Get started</a
        >
      </div>
      <div class="ml-3 inline-flex rounded-md shadow">
        <a
          href="#"
          class="inline-flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600 hover:bg-indigo-50"
          >Learn more</a
        >
      </div>
    </div>
  </div>
</div>

위에서 만들어둔 home이나 다른 컴포넌트를 만들어서 다음 html을 입력해준다.

그리고 App.vue 파일에

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
</script>

<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>

다음과 같이 style을 추가해주면

다음과 같이 css가 적용된 것을 확인할 수 있다!