VUE项目初始化 UnoCss Element Plus Axios

配置 UnoCss

1. 安装 unocss 和配套 CSS 图标的图集

   npm install -D unocss @iconify/json

2. 根目录下：uno.config.ts:

   import { defineConfig } from 'unocss'
   import presetWind3 from '@unocss/preset-wind3'
   import presetIcons from '@unocss/preset-icons'
   
   export default defineConfig({
      rules: [ // ...
      ],
      presets: [
          // 这里处理了unocss的 CSS变量导入
          // tailwind CSS
          presetWind3(),
          // 这里处理了unocss的 CSS图标导入
          presetIcons(),
      ],
   })

3. VUE项目文件增加：vite.config.js：

   import UnoCSS from 'unocss/vite'
   
   export default defineConfig({
    plugins: [
      UnoCSS(),
    ],
   })

main.js:

import 'virtual:uno.css'

配置 Element Plus UI库

1. 安装 UI 库

   npm install element-plus --save

2. 安装自动导入插件

   npm install -D unplugin-vue-components unplugin-auto-import

3. VUE项目文件增加：vite.config.js:

   import AutoImport from 'unplugin-auto-import/vite'
   import Components from 'unplugin-vue-components/vite'
   import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
   
   export default defineConfig({
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
   })

main.js:

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css' // 黑暗模式

app.use(ElementPlus)

配置 AXIOS

1. 安装 axios

   npm install axios

2. 配置 axios 封装（src/api/axios.js）:

   import axios from "axios";
   
   // 创建api实例
   const api = axios.create({
      baseURL: "https://example.com",
      timeout: 1000,  // 超时时间（毫秒）
      headers: { "Content-Type": "application/json" },
   });
   
   // 请求拦截器
   api.interceptors.request.use(
      (config) => {
          // 发送请求前的操作
          console.log("发送请求，请求拦截函数触发");
          return config;
      },
      (error) => {
          // 请求错误
          return Promise.reject(error);
      }
   );
   
   // 响应拦截器
   api.interceptors.response.use(
      (response) => {
          console.log("响应请求，响应拦截函数触发");
          return response.data;
      },
      (error) => {
          // 响应错误
          return Promise.reject(error);
      }
   );
   
   export default api;

3. 使用需要在具体组件里面导入（app.vue）:

   import api from './api/axios'
   import { onMounted } from 'vue';
   
   onMounted(async () => {
      api.get('/api/v1/users').then(res => {
          console.log(res)
      })
   })

开发用间距工具 Spacingjs

网站：Spacing.js

添加在根目录文件：

if (import.meta.env.DEV) {
    // 开发用间距工具，部署时需要移除
    console.log("当前处于开发模式")
    import('./assets/js/spacingjs').then(() => {
        console.log('已加载间距工具')
    }).catch(err => {
        console.error(err)
    })
}

HTML 基本样式设置

* {
      font-family: 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
      margin: 0;
      padding: 0;
    }