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

一. 创建项目

npx --package @vue/cli vue

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

二. 测试网络通讯模块

假设有本地服务器地址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 href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite starter</p><p>Install<a href="https://github.com/vuejs/language-tools" 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>

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

三. 集成、测试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. 显示

  <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 href="https://github.com/chris-zhu" 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>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/689200.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IDEA2023.3.4开启SpringBoot项目的热部署【简单明了4步操作】

添加devtools依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><optional>true</optional> </dependency>IDEA开启自动编译 …

移动端App自动化之触屏操作自动化

工作中我们经常需要对应用的页面进行手势操作&#xff0c;比如滑动、长按、拖动等&#xff0c;AppiumDriver 为我们提供一个模拟手势操作的辅助类 TouchAction&#xff0c;可以通过它对手机屏幕进行手势操作。 具体用法参见链接&#xff1a;chromedriver下载地址与webview自动…

用连续自然数之和来表达整数

文章目录 题目描述&#xff1a;用连续自然数之和来表达整数输入描述输出描述用例1说明用例2代码运行举例注意&#xff1a;1、sprintf 和 strcat区别2、qsort 题目描述&#xff1a;用连续自然数之和来表达整数 一个整数可以由连续的自然数之和来表示。 给定一个整数&#xff0c…

docker ubuntu tomcat 换源 安装软件

第一种办法参考docker中ubuntu容器更换apt源_ubuntu更改apt源 with dockerfile-CSDN博客 sed -i s/archive.ubuntu.com//mirrors.aliyun.com/g /etc/apt/sources.list sed -i s/security.ubuntu.com//mirrors.aliyun.com/g /etc/apt/sources.list apt update apt install vim…

2024前端面试准备之CSS篇(一)

全文链接 1. CSS选择器的优先级是怎样的 CSS选择器的优先级是:内联 > ID选择器 > 类选择器 > 标签选择器 计算示例:优先级由 A 、B、C、D 的值来决定的,其中它们的值计算规则如下: A 的值等于 1 的前提是存在内联样式, 否则 A = 0B 的值等于 ID选择器 出现的次…

金融股票AIGC工具,一句话画出精美股价市值对比图

财经自媒体工具&#xff0c;一句话画出对应公司市场大盘指数、股价、市值、PE对比图&#xff0c;网站地址&#xff0c;支持多种类型图表&#xff1a; DeepNLP AIGC Chart: Generate Professional Charts and Tables powered by Large AI models 1. 全球股票市场最新指数画表 …

选择性焊接与波峰焊哪种更适合PCBA加工?

以上两者皆是PCBA贴片加工常用的焊接方法&#xff0c;但两种方式都有自己的优缺点&#xff0c;以下是SMT贴片加工中如何选择这两种焊接方式的讲解。 选择性焊接&#xff1a; 选择性焊接是波峰焊的一种&#xff0c;用于焊接与通孔元件组装在一起的smt加工设备。随着双面PCB的逐…

uniapp 读取本地文件

uniapp 读取本地文件 介绍 开发中需要将一些固定配置保存到一个配置文件中&#xff0c;在static 下面创建了一个data.json文件 uniapp 有时候可能需要读取本地的json配置文件或者其他一些文件&#xff0c;晚上找了几个教程不管用&#xff0c;最后还是在官网找到了介绍 实现…

Qt 使用QScintilla 编辑lua 脚本

需求&#xff1a; 利用QScintilla 编辑lua 脚本 步骤&#xff1a; 1&#xff0c;下载 QScintilla Riverbank Computing | Download 2, 打开 src/qscintilla.pro 文件 编译出 dll库 3&#xff0c;工程中引入这个库 注意debug 模式 必须加载debug 版本编译的库&#xff0…

多维时序 | Matlab实现基于VMD-DBO-LSTM、VMD-LSTM、LSTM的多变量时间序列预测

多维时序 | Matlab实现基于VMD-DBO-LSTM、VMD-LSTM、LSTM的多变量时间序列预测 目录 多维时序 | Matlab实现基于VMD-DBO-LSTM、VMD-LSTM、LSTM的多变量时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 Matlab实现基于VMD-DBO-LSTM、VMD-LSTM、LSTM的多变量时间…

微服务- 熔断、降级和限流

基本介绍 在微服务架构中&#xff0c;由于服务之间的相互依赖性&#xff0c;任何一个服务的故障或性能问题都可能导致整个系统的不稳定。因此&#xff0c;熔断、降级和限流是三种常见的技术手段&#xff0c;用于提高系统的可用性和稳定性。 熔断 (Circuit Breaker) 熔断机制…

MyBatis基础学习

一、MyBatis简介 二、MyBatis-HelloWorld 三、MyBatis-全局配置文件 四、MyBatis-映射文件 五、MyBatis-动态SQL 六、MyBatis-缓存机制 七、MyBatis-Spring整合 八、MyBatis-逆向工程 九、MyBatis-工作原理 十、MyBatis-插件开发

在ChatGPT时代,出国留学如何避免掉入学术不端重灾区?

近日&#xff0c;哈佛校长克洛迪娜盖伊在校园“反犹风波”中因立场问题被迫辞职。此外&#xff0c;哈佛大学相关调查委员会还发现盖伊在学术论文中存在错误引用资料来源等问题。对于种种学术不端行为&#xff0c;留学生如何防范&#xff1f;在ChatGPT时代&#xff0c;出国留学如…

SpringBoot助力!轻松实现微信模版消息推送

本篇文章的主题是 如何通过springboot来实现微信的模版消息推送 实现效果&#xff1a; 在当今的信息化时代&#xff0c;微信作为国人最为常用的通讯工具之一&#xff0c;已经不仅仅是一个简单的社交应用&#xff0c;更是连接人与服务、人与信息的桥梁。企业微信模板消息作为…

python毕设选题 - 大数据商城人流数据分析与可视化 - python 大数据分析

文章目录 0 前言课题背景分析方法与过程初步分析&#xff1a;总体流程&#xff1a;1.数据探索分析2.数据预处理3.构建模型 总结 最后 0 前言 &#x1f525; 这两年开始毕业设计和毕业答辩的要求和难度不断提升&#xff0c;传统的毕设题目缺少创新和亮点&#xff0c;往往达不到…

IT 行业哪些证书含金量高

IT行业的高含金量证书通常与当前市场需求、技术趋势以及特定领域的专业知识相关。以下是一些普遍认为含金量高的IT证书&#xff0c;这些证书覆盖了不同的专业领域&#xff0c;包括网络安全、云计算、系统管理、项目管理等&#xff1a; CISSP (Certified Information Systems Se…

CSS如何将图片变为圆形?

我们可以通过 border-radius 属性实现图片圆角。 我们上传图片后&#xff0c;将它属性值设置为图片尺寸的一半&#xff0c;即可将正方形图片设置为圆形。 <!DOCTYPE html> <html lang"en"> <head><meta charset"utf-8"><titl…

Arduino的PWM应用:舵机控制

目录 概述 1 认识舵机 1.1 舵机分类 1.2 舵机结构 1.3 舵机工作原理 1.4 舵机控制原理 1.5 舵机工作参数介绍 1.5.1 基本参数 1.5.2 舵机扭矩 2 系统硬件 2.1 硬件模块介绍 2.1.1 SG90 9G 360舵机 2.1.2 SG90 9G 180舵机 2.1.3 Arduino UNO 主板 2.2 整体结构…

2024免费版EasyRecovery软件有哪些功能限制?

EasyRecovery软件的主要功能包括&#xff1a; 数据恢复&#xff1a;这是EasyRecovery软件的核心功能。它可以恢复因各种原因丢失或删除的数据&#xff0c;无论是由于磁盘格式化、文件删除还是其他因素。EasyRecovery使用高级的数据恢复算法&#xff0c;能够快速扫描整个磁盘&a…

spring boot自动装配及自动装配条件判断

第一步需要在pom.xml文件指定需要导入的坐标 要是没有自动提示需要检查maven有没有 实现代码 /*springboot第三方自动配置实现方法 * 什么是自动配置 自动配置就是springboot启动自动加载的类不需要在手动的控制反转自动的加入bean中 * * *//*第一种方案包扫描 不推荐因为繁琐…