Vue+Vite项目初建(axios+Unocss+iconify)的实现

npx --package @vue/cli vue

<script setup>

import {ref} from 'vue'
import axios from 'axios'
import qs from 'qs'
import 'unocss'

defineProps({
  msg: String,
})

function clickTest() {
  console.log("按钮点击")

  // var axios = require('axios');
  var data = qs.stringify({
    'username': 'hahaha',
    'password': '123456'
  });
  var config = {
    method: 'post',
    url: 'http://localhost:8000/token',
    headers: {
      'Access-Control-Allow-Credentials': 'True',
      'Access-Control-Allow-Origin': '*/*'
    },
    data: data
  };

  axios(config)
      .then(function (response) {
        console.log(JSON.stringify(response.data));
      })
      .catch(function (error) {
        console.log(error);
      });
}

const count = ref(0)
</script>

<template>
  <h1>{{ msg }}</h1>
  <button v-on:click="clickTest">测试</button>
  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" rel="external nofollow"  target="_blank"
    >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Install
    <a href="https://github.com/vuejs/language-tools" rel="external nofollow"  target="_blank">Volar</a>
    in your IDE for a better DX
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

npm install -D unocss

import UnoCSS from 'unocss/vite'

import {defineConfig, presetUno, presetIcons, presetAttributify} from 'unocss'
import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'

export default defineConfig({
    presets: [
        presetUno(), // 添加 UnoCSS 的默认样式预设
        presetAttributify(),
        presetIcons({
            warn: true,
            prefix: ['i-'],
            extraProperties: {
                display: 'inline-block',
            },
            collections: {
                me: FileSystemIconLoader('./src/assets/isme'),
                fe: FileSystemIconLoader('./src/assets/feather'),
            },
        })
    ],
})

  <div class="text-center text-red-500">
    Hello World!
  </div>

  <div m2 f-c hover="op80">
    <a i-carbon-logo-github text-3xl text-black href="https://github.com/chris-zhu" rel="external nofollow"  target="_blank" />
    <div i-carbon:3d-cursor text-3xl text-blue />
    <button text-green text-3xl class="i-carbon-sun" />
    <i class="i-me:gitee mr-12 cursor-pointer"/> // 自定义图标
  </div>
  <div class="i-carbon:content-view w-1em h-1em"></div>
  <div class="i-carbon:humidity w-1em h-1em"></div>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <button v-on:click="clickTest">测试</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>