UnoCSS

官方链接

https://unocss.dev/

装包

yarn add unocss @unocss/preset-uno @unocss/preset-attributify @unocss/preset-icons

 

vue.config.ts:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'
import { visualizer } from 'rollup-plugin-visualizer'
import externalGlobals from 'rollup-plugin-external-globals'
import { createHtmlPlugin } from 'vite-plugin-html'
import Unocss from 'unocss/vite';
import { presetUno, presetAttributify, presetIcons } from 'unocss'

// https://vitejs.dev/config/
export default defineConfig({
  // base: 'doc',
  server: {
    port: 3007,
    proxy: {
      '/api': {
        target: 'http://localhost:85',
        changeOrigin: true,
        rewrite: (path) => {
          console.log(path)
          return path.replace(/^\/api/, '/api')
        },
      },
    },
  },
  plugins: [
    vue(),
    vueJsx(),
    vueDevTools(),
    visualizer(),
    Unocss({
      presets: [
        presetUno(),
        presetAttributify(),
        presetIcons()],
    }),
    {
      ...externalGlobals({
        vue: 'Vue',
        'vue-demi': 'VueDemi',
        'vue-router': 'VueRouter',
        'element-plus': 'ElementPlus',
      }),
      enforce: 'post',
      apply: 'build',
    },
    createHtmlPlugin({
      inject: {
        data: {
          cdnCss: ['element-plus_2.7.7_index.css'],
          cdnJs: [
            'vue_3.4.32.js',
            'vue-demi_0.14.8_index.iife.js',
            'vue-router_4.4.0.global.js',
            'element-plus_2.7.7_index.full.js',
          ],
        },
      },
    }),
  ],
  build: {
    sourcemap: true,
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

main.ts:

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
import { init } from './views/index/config'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'uno.css'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(ElementPlus)
init(app)

app.mount('#app')

me/Index.vue:

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const handleJump = (path: any) => {
  router.push(path)
}

onMounted(() => {})
</script>

<template>
  <div>
    me
    <button @click="() => handleJump('/home')">home</button>
    <button class="bg-blue w-80 h-10 ml-10 m-1">button</button>
  </div>
</template>

人工智能学习网站

https://chat.xutongbao.top