1.根目录下创建styles目录

这里可根据你项目中的样式文件类型创建，因为这里我只有一个css没有scss

2.css目录下创建如下文件

• global.css：全局所有的样式入口
• scrollbar.css：滚动条样式
• transition.css：动画样式

global.css

@import './transition.css';
@import './scrollbar.css';
html,
body,
#app {
    height: 100%;
}

scrollbar.css

html {
	scrollbar-width: thin;
	scrollbar-color: #e1e1e1 transparent;
}

/*---滚动条默认显示样式--*/
html::-webkit-scrollbar-thumb {
  background-color: #e1e1e1;
  border-radius: 8px;
}
/*---鼠标点击滚动条显示样式--*/
html::-webkit-scrollbar-thumb:hover {
  background-color: #e1e1e1;
  border-radius: 8px;
}
/*---滚动条大小--*/
html::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
/*---滚动框背景样式--*/
html::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0;
}


html.dark {
	scrollbar-width: thin;
	scrollbar-color: #555 transparent;
}

/*---滚动条默认显示样式--*/
html.dark::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 8px;
}
/*---鼠标点击滚动条显示样式--*/
html.dark::-webkit-scrollbar-thumb:hover {
  background-color: #555;
  border-radius: 8px;
}
/*---滚动条大小--*/
html.dark::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/*---滚动框背景样式--*/
html.dark::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 0;
}

transition.css

/* fade */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease-in-out;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* fade-slide */
.fade-slide-leave-active,
.fade-slide-enter-active {
  transition: all 0.3s;
}
.fade-slide-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}
.fade-slide-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* fade-bottom */
.fade-bottom-enter-active,
.fade-bottom-leave-active {
  transition: opacity 0.25s, transform 0.3s;
}
.fade-bottom-enter-from {
  opacity: 0;
  transform: translateY(-10%);
}
.fade-bottom-leave-to {
  opacity: 0;
  transform: translateY(10%);
}

/* fade-scale */
.fade-scale-leave-active,
.fade-scale-enter-active {
  transition: all 0.28s;
}
.fade-scale-enter-from {
  opacity: 0;
  transform: scale(1.2);
}
.fade-scale-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

/* zoom-fade */
.zoom-fade-enter-active,
.zoom-fade-leave-active {
  transition: transform 0.2s, opacity 0.3s ease-out;
}
.zoom-fade-enter-from {
  opacity: 0;
  transform: scale(0.92);
}
.zoom-fade-leave-to {
  opacity: 0;
  transform: scale(1.06);
}

/* zoom-out */
.zoom-out-enter-active,
.zoom-out-leave-active {
  transition: opacity 0.1s ease-in-out, transform 0.15s ease-out;
}
.zoom-out-enter-from,
.zoom-out-leave-to {
  opacity: 0;
  transform: scale(0);
}

3.统一静态资源入口

因为后续我们还需要引入css框架，因此在项目中创建目录存放外部样式导入

创建目录plugins

• assets：导入其他外部样式
• index：导入入口

assets.ts

这里将导入静态资源封装为一个方法，方便统一导入

import '../styles/css/global.css';

/** import static assets: css, js , font and so on. - [引入静态资源，css、js和字体文件等] */
export default function setupAssets() {}

index.ts

import setupAssets from './assets';

export { setupAssets };

4.改造main.ts

原生创建的显然无法进行自定义的修改，我们需要将其函数化，方便对各个插件进行个性化操作

我们需要将其改造为一个方法，统一由一个方法导入插件或者挂载节点

import { createApp } from 'vue'
import { setupAssets } from './plugins';
import App from './App.vue'


async function setupApp() {
    // import assets: js、css
    setupAssets();
  
    const app = createApp(App);

  
    // mount app
    app.mount('#app');
  }
  
  setupApp();
  

这样子改造main方法就会使得我们整个项目更加清晰

参考开源项目：GitHub - honghuangdc/soybean-admin: A fresh and elegant admin template, based on Vue3,Vite3,TypeScript,NaiveUI and UnoCSS [一个基于Vue3、Vite3、TypeScript、NaiveUI 和 UnoCSS的清新优雅的中后台模版]