Card de Produto - Limpando o Projeto Padrão

Sempre que iniciamos um novo projeto Vue 3 com Vite, ele vem com alguns arquivos e configurações padrão. Para manter o projeto limpo e organizado desde o início, é interessante fazer um reset — ou seja, remover estilos e componentes automáticos que não serão utilizados.

Esse reset só precisa ser feito uma única vez, e este guia pode ser usado como referência em projetos futuros.

Passo 1 — Limpando o App.vue

No arquivo:

src\App.vue

Apague completamente a tag:

<style>

E também a tag:

<header>

Após a limpeza, o arquivo ficará assim:

<script setup>
import { RouterView } from 'vue-router'
</script>

<template>
  <RouterView />
</template>

Passo 2 — Ajustando o HomeView.vue

No arquivo:

src\views\HomeView.vue

Apague a tag:

<TheWelcome />

O arquivo ficará reduzido a:

<script setup>
</script>

<template>
  <main>
  </main>
</template>

Passo 3 — Removendo o CSS padrão

No arquivo:

src\main.js

Exclua a linha:

import './assets/main.css'

Agora, na pasta:

src\assets

remova os arquivos:

• base.css
• main.css

Passo 4 — Limpando componentes desnecessários

Na pasta:

src\components

exclua todos os arquivos.

Passo 5 — Ajustando as rotas

No arquivo:

src\router\index.js

Remova toda a rota referente ao AboutView:

{
  path: '/about',
  name: 'about',
  // route level code-splitting
  // this generates a separate chunk (About.[hash].js) for this route
  // which is lazy-loaded when the route is visited.
  component: () => import('../views/AboutView.vue'),
},

O código final do arquivo ficará assim:

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
  ],
})

export default router

Reset Finalizado ✅

Pronto! Agora temos um projeto limpo, sem estilos e componentes automáticos do Vue. Esse reset serve como base para qualquer aplicação que você venha a construir, garantindo mais controle sobre o código desde o começo.