1、创建项目

$ pnpm create vue@latest my-admin-vue3

2、集成UnoCSS

1、安装

pnpm add -D unocss

pnpm add -D @unocss/preset-wind3

2、vite.config.ts

import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UnoCSS(),
  ],
})

3、uno.config.ts

import { defineConfig } from 'unocss'
import presetWind3 from '@unocss/preset-wind3'

export default defineConfig({
  presets: [presetWind3()],
})

4、main.ts

import 'virtual:uno.css'

5、vscode 安装智能提示插件 搜索unocss

2、浏览器样式重置

pnpm add @unocss/reset

import '@unocss/reset/normalize.css'

或者
import '@unocss/reset/tailwind.css'

3、集成element-plus

1、安装

pnpm install element-plus

2、main.ts集成

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

3、安装icon

pnpm install @element-plus/icons-vue

4、main.ts注册图标

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue'

const app = createApp(App)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.use(ElementPlus)
app.mount('#app')