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

一. 创建项目

npx --package @vue/cli vue

项目成功启动后，进入http://localhost:3200，即可进入创建好的页面(假设启动端口为3200)

二. 测试网络通讯模块

假设有本地服务器地址localhost:8000提供接口服务，接口为localhost:8000/token，修改代码

执行代码，如果后端服务器执行正常，就会有相应的返回值

三. 集成、测试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到系统中，注意“collections”中的配置是自定义图标的路径

3. 显示

  

    Hello World!
  

显示出以上效果说明unocss配置成功。

4. 图标()

  

    
    

    
     // 自定义图标
  

  

  


  

    count is {{ count }}
    测试
    

      Edit
      components/HelloWorld.vue to test HMR
    
  

最终显示效果，基本完成前期开发配置需要