Vue+Vite項目初建(axios+Unocss+iconify)的實現(xiàn)

更新時間：2024年02月19日 09:55:46 作者：@@鵬~~~

一個好的項目開始搭建總是需要配置許多初始化配置,本文就來介紹一下Vue+Vite項目初建(axios+Unocss+iconify)的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下

一. 創(chuàng)建項目

npx --package @vue/cli vue

項目成功啟動后，進入http://localhost:3200，即可進入創(chuàng)建好的頁面(假設啟動端口為3200)

二. 測試網(wǎng)絡通訊模塊

假設有本地服務器地址localhost:8000提供接口服務，接口為localhost:8000/token，修改代碼

<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  rel="external nofollow"  target="_blank"
    >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Install
    <a  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>

執(zhí)行代碼，如果后端服務器執(zhí)行正常，就會有相應的返回值

三. 集成、測試UnoCSS

1. 安裝

npm install -D unocss

2. 集成

修改 vite.config.js

import UnoCSS from 'unocss/vite'

新建 uno.config.js

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'),
            },
        })
    ],
})

以上代碼用于配置unocss到系統(tǒng)中，注意“collections”中的配置是自定義圖標的路徑

3. 顯示

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

顯示出以上效果說明unocss配置成功。

4. 圖標()

  <div m2 f-c hover="op80">
    <a i-carbon-logo-github text-3xl text-black  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>