【2024】使用Vuetifi搭建vue3+Ts项目,并使用tailwind.css

目录

  • 使用Vuetifi搭建项目
  • 使用tailwind.css

只要跟着官方文档来就不会出错。

使用Vuetifi搭建项目

npm create vuetify

yarn create vuetify

pnpm create vuetify

bun create vuetify

在终端运行一个就行,之后就可以选配置了。

使用tailwind.css

先运行:

npm install -D tailwindcss postcss autoprefixer

再运行:

npx tailwindcss init -p

然后就会发现多了两个文件:
在这里插入图片描述
然后配置tailwind.config.js文件:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  corePlugins: {
    preflight: false
  },
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        bg_color: "var(--el-bg-color)",
        primary: "var(--el-color-primary)",
        primary_light_9: "var(--el-color-primary-light-9)",
        text_color_primary: "var(--el-text-color-primary)",
        text_color_regular: "var(--el-text-color-regular)",
        text_color_disabled: "var(--el-text-color-disabled)"
      }
    }
  }
};

在src目录下新建一个css文件,这里是index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

然后在main.ts里面引入这个文件:

import './index.css'

在这里插入图片描述
大功告成!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

最大的单入口空闲区域

最大的单入口空闲区域 问题描述输入输出代码实现 问题描述 找到最大的单入口空闲区域。 空闲区域是由连通的’O’组成的区域,位于边界的’O’可以是入口, 单入口空闲区域即有且只有一个位于边界的’O’作为入口的由连通的’O’组成的区域。 如果两个元素…

救命!RPA隐藏的高效办公秘密居然被我发现了

在这个快节奏的社会,办公效率的重要性日益凸显。如何提升工作效率,成为了许多公司和个人思考的问题。RPA,即机器人流程自动化技术,正以其独特的优势,成为提升办公效率的重要工具。 RPA的核心是模拟人类在计算机系统中进…

哈希表|434.四数相加II

力扣题目链接 struct hashTable {int key;int val;UT_hash_handle hh; };int fourSumCount(int* A, int ASize, int* B, int BSize, int* C, int CSize, int* D, int DSize) {struct hashTable* hashtable NULL;for (int i 0; i < ASize; i) {for (int j 0; j < BSiz…

jdk1.8安装步骤及环境配置

jdk1.8安装步骤及环境配置 1.1&#xff1a;安装步骤 在Oracle官网下载jdk1.8&#xff0c;下载链接 &#xff0c;如果之前没有注册过还需要注册。下载好之后会得到如下的图标&#xff0c; 双击下载好的exe文件&#xff0c;选择更改安装路径&#xff1a;D:\Java\jdk1.8&#xf…

Facebook商城号为什么被封?如何防封?

由于Facebook商城的高利润空间&#xff0c;越来越多的跨境电商商家注意到它的存在。Facebook作为全球最大、用户量最大的社媒平台&#xff0c;同时也孕育了一个巨大的商业生态&#xff0c;包括广告投放、商城交易等。依托背后的大流量&#xff0c;Facebook商城起号较快&#xf…

MyBatis3源码深度解析(九)MyBatis常用工具类(二)ScriptRunnerSqlRunner

文章目录 3.2 使用ScriptRunner执行脚本3.2.1 ScriptRunner工具类简介3.2.2 ScriptRunner工具类示例3.2.3 ScriptRunner工具类源码 3.3 使用SqlRunner操作数据库3.3.1 SqlRunner工具类简介3.3.2 SqlRunner工具类示例3.3.3 SqlRunner工具类源码解读 3.2 使用ScriptRunner执行脚本…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的火焰检测系统(Python+PySide6界面+训练代码)

摘要&#xff1a;本研究详述了一种采用深度学习技术的火焰检测系统&#xff0c;该系统集成了最新的YOLOv8算法&#xff0c;并与YOLOv7、YOLOv6、YOLOv5等早期算法进行了性能评估对比。该系统能够在各种媒介——包括图像、视频文件、实时视频流及批量文件中——准确地识别火焰目…

RESTful API学习

RESTful API REST&#xff08;英文&#xff1a;Representational State Transfer&#xff0c;简称REST&#xff0c;直译过来表现层状态转换&#xff09;是一种软件架构风格、设计风格&#xff0c;而不是标准&#xff0c;只是提供了一组设计原则和约束条件。它主要用于客户端和…

大数据开发-Hive介绍以及安装配置

文章目录 数据库和数据仓库的区别Hive安装配置Hive使用方式Hive日志配置 数据库和数据仓库的区别 数据库&#xff1a;传统的关系型数据库主要应用在基本的事务处理&#xff0c;比如交易&#xff0c;支持增删改查数据仓库&#xff1a;主要做一些复杂的分析操作&#xff0c;侧重…

3.8_理解代码(3)

fliplr函数 其中fliplr函数为flip array left to right&#xff0c;此处fliplr(i)的输出结果为[4 3 2 1] 我的代码实验 area1 fill(i,u_up(i),cyan,FaceAlpha,0.3);把我都弄得无语了&#xff0c;就实现fill怎么这么难 真是不知道向量长度哪里不同&#xff0c;知道了哈哈 终于…

【并查集】一种简单而强大高效的数据结构

目录 一、并查集原理 二、并查集实现 三、并查集应用 1. LeetCode并查集相关OJ题 2. 并查集的其他应用及总结 一、并查集原理 并查集&#xff08;Disjoint Set&#xff09;是一种用来管理元素分组和查找元素所属组别的数据结构。它主要支持两种操作&#xff1a;查找&…

IntelliJ IDEA配置Tomcat

一、简介 概念&#xff1a;Tomcat是Apache 软件基金会一个核心项目&#xff0c;是一个开源免费的轻量级Wcb服分%&#xff0c;支持Servlet/JSP少量avaEE风范。 JavaEE: Java Enterprise Edition, Java企业版。指Java企业级开发的技术规范总和。包食13m技术规论&#xff1a;JDB…

22.1 分布式_线程池

线程池 1. 学习内容2. 简介2.1 池概念2.2 不使用线程池创建线程2.3 线程池的好处2.4 线程池应用场景****************************************************************************************************************1. 学习内容 2. 简介 2.1 池概念 <

JS-01-javaScript的介绍

一、javaScript简介 JavaScript是世界上最流行的脚本语言&#xff0c;因为你在电脑、手机、平板上浏览的所有的网页&#xff0c;以及无数基于HTML5的手机App&#xff0c;交互逻辑都是由JavaScript驱动的。 htmlcss&#xff1a;静态页面 js&#xff1a;给页面添加交互和功能 J…

delphi7中出现“无法更改以命令对象为源的记录集对象..“的错误解决

我在delphi7环境下写一个数据库应用程序&#xff0c;每次关闭界面时总出现“无法更改以命令对象为源的记录集对象.."的错误。如图所示。 经查阅资料&#xff0c;我得到一些思路&#xff1a;最 这个错误信息通常表示在关闭窗体时&#xff0c;有一个或多个数据库组件&…

【Qt】—— 信号与槽

目录 &#xff08;一&#xff09;信号和槽概述 1.1 信号的本质 1.2 槽的本质 &#xff08;二&#xff09;信号和槽的使用 2.1 信号和槽的连接 2.2 查看内置信号和槽 2.3 通过Qt Creator⽣成信号槽代码 &#xff08;三&#xff09;自定义信号和槽 3.1 基本语法 3.2 带参…

单例模式及线程安全的实践

&#x1f31f; 欢迎来到 我的博客&#xff01; &#x1f308; &#x1f4a1; 探索未知, 分享知识 !&#x1f4ab; 本文目录 引言基本的单例模式长啥样&#xff1f;怎样才能线程安全&#xff1f;**懒汉模式** ( 双 重 检 查 ) &#x1f389;总结&#x1f389; 引言 单例模式是个…

动态代理详解(原理+代码+代码解析)

动态代理 1.什么是动态代理&#xff1f; 动态代理是一种在运行的时候动态的生成代理对象的技术。它在不改变原始类的情况下&#xff0c;对原始类的方法进行拦截或者增强。 2.动态代理可以实现的功能&#xff1f; 使用动态代理可以实现如下常用功能&#xff1a; 1.AOP&#x…

为什么要使用数字档案管理系统

机关企事业单位使用数字档案管理系统&#xff0c;主要有以下几个原因&#xff1a; 1. 档案管理效率提升&#xff1a;玖拓智能数字档案管理系统可以帮助综合档案馆实现对档案的全面管理和翔实记录&#xff0c;包括档案的入库、整理、检索、借阅等工作。系统化的管理使得档案管理…

调整分区失败,硬盘难启:原因分析与数据恢复之道

在数字化时代&#xff0c;硬盘作为存储数据的重要工具&#xff0c;其稳定性和安全性至关重要。然而&#xff0c;有时在调整分区的过程中&#xff0c;我们可能会遭遇失败&#xff0c;导致硬盘无法打开&#xff0c;数据无法访问。这种情况不仅令人沮丧&#xff0c;更可能带来不可…