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

news2024/11/26 13:55:32

目录

  • 使用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'

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

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

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

相关文章

【力扣经典面试题】14. 最长公共前缀

目录 一、题目描述 二、解题思路 三、解题步骤 四、代码实现(C版详细注释) 五、总结 欢迎点赞关注哦!创作不易,你的支持是我的不竭动力,更多精彩等你哦。 一、题目描述 编写一个函数来查找字符串数组中的最长公共前缀。…

Mysql80服务无法启动请输入Net helpMsg3534以获得更多的帮助

起因&情景: 朋友正在操作数据库,然后电脑突然死机,再重启电脑后启动数据库服务报: 然后朋友尝试各种操作都没有办法正常启动, 一、网上解决方案:(先别操作) 1 删掉&#xff1a…

Docker的安装跟基础使用一篇文章包会

目录 国内源安装新版本 1、清理环境 2、配置docker yum源 3、安装启动 4、启动Docker服务 5、修改docker数据存放位置 6、配置加速器 现在我们已经完成了docker的安装和初始配置。以下为基本测试使用 自带源安装的版本太低 docker官方源安装的话速度太慢了 所以本篇文…

RocketMQ—如何解决消息堆积问题

RocketMQ—如何保证消息不丢失 生产者发送到MQ的消息,会放到broker的硬盘内,这便是消息的持久化。消息会有两种持久化策略: 同步刷盘:消息过来就会进入磁盘,再向生产者发送写成功,这会很安全,…

【数据结构】顺序表+链表

目录 1.顺序表 1.1初始化顺序表 1.2销毁顺序表 1.3检查容量并扩容 1.4把某个元素插入到下标为pos的位置 1.5头插和尾插 1.6删除下标为pos的元素 1.7头删和尾删 2.顺序表的问题及思考 3.链表 3.1链表的访问 3.2链表的增删查改 1.顺序表 顺序表的本质其实就是一个数组…

Java | vscode如何使用命令行运行Java程序

1.在vscode中新建一个终端 2.在终端中输入命令 输入格式&#xff1a; javac <源文件>此命令执行后&#xff0c;在文件夹中会生成一个与原java程序同名的.class文件。然后输入如下命令&#xff1a; java <源文件名称>这样java程序就运行成功了。&#x1f607;

【LeetCode每日一题】【BFS模版与例题】【二维数组】1293. 网格中的最短路径

BFS基本模版与案例可以参考&#xff1a; 【LeetCode每日一题】【BFS模版与例题】863.二叉树中所有距离为 K 的结点 【LeetCode每日一题】【BFS模版与例题】【二维数组】130被围绕的区域 && 994 腐烂的橘子 思路&#xff1a; 特殊情况&#xff1a; 最短的路径是向下再向…

云计算科学与工程实践指南--章节引言收集

云计算科学与工程实践指南–章节引言收集 //本文收集 【云计算科学与工程实践指南】 书中每一章节的引言。 我已厌倦了在一本书中阅读云的定义。难道你不失望吗&#xff1f;你正在阅读一个很好的故事&#xff0c;突然间作者必须停下来介绍云。谁在乎云是什么&#xff1f; 通…

#QT(TCP网络编程-服务端)

1.IDE&#xff1a;QTCreator 2.实验&#xff1a;编写一个tcp服务端 QTcpsever QTcpsocket 3.记录&#xff1a; (1)先搭建界面 &#xff08;2&#xff09;服务端代码 a. pro QT core gui networkgreaterThan(QT_MAJOR_VERSION, 4): QT widgetsCONFIG c1…

html实体字符,已拿offer入职

面试知识点 主要内容包括html&#xff0c;css&#xff0c;前端基础&#xff0c;前端核心&#xff0c;前端进阶&#xff0c;移动端开发&#xff0c;计算机基础&#xff0c;算法与数据结构&#xff0c;设计模式&#xff0c;项目等等。 html 1.浏览器页面有哪三层构成&#xff0c…

video视频播放

1.列表页面 <template><div><ul><li class"item" v-for"(item,index) in list" :key"index" click"turnPlay(item.videoUrl)"><img :src"item.img" alt""><div class"btn…

Go 简单设计和实现可扩展、高性能的泛型本地缓存

相信大家对于缓存这个词都不陌生&#xff0c;但凡追求高性能的业务场景&#xff0c;一般都会使用缓存&#xff0c;它可以提高数据的检索速度&#xff0c;减少数据库的压力。缓存大体分为两类&#xff1a;本地缓存和分布式缓存&#xff08;如 Redis&#xff09;。本地缓存适用于…

论文目录3:大模型时代(2023+)

1 instruction tuning & in context learning 论文名称来源主要内容Finetuned Language Models Are Zero-Shot Learners2021 机器学习笔记&#xff1a;李宏毅ChatGPT Finetune VS Prompt_UQI-LIUWJ的博客-CSDN博客 早期做instruction tuning的work MetaICL: Learning to …

CSS文本样式值,web前端开发资料

正文 什么是行内元素&#xff1f; display属性为inline的元素为行内元素&#xff0c;英文&#xff1a;inline element&#xff0c;其中文叫法有多种&#xff0c;如&#xff1a;内联元素、内嵌元素、行内元素、直进式元素等。 特点&#xff1a; 和其他元素都在一行上&#x…

补点基础——几何尺寸和公差

几何尺寸与公差&#xff08;Geometric dimensioning and tolerancing&#xff09;代号&#xff1a;GD&T&#xff0c;主要是以下两个组织制定&#xff1a; 1.美国机械工程师学会&#xff08;ASME&#xff09; ASME Y14.5 是 GD & T 的完整定义&#xff0c;其中包含所有…

mac报错:zsh:command not found: brew

1、基本概述&#xff1f; 在使用brew安装程序的时候MAC提示&#xff1a; zsh:command not found: brew 本质就是brew没有安装&#xff0c;这个命令与linux系统中的yum命令类似。 使用的环境说明&#xff1a; 虚拟机版本&#xff1a;VMware Workstation 17 Pro mac os Ventu…

基于ERNIR3.0文本分类的开发实践

参考&#xff1a;基于ERNIR3.0文本分类&#xff1a;(KUAKE-QIC)意图识别多分类(单标签) - 飞桨AI Studio星河社区 (baidu.com) https://zhuanlan.zhihu.com/p/574666812?utm_id0 遇到的问题&#xff1a;如下 采用paddleNLP下文本分类实例进行分类训练后发现 生成的模型分类不…

组基轨迹建模 GBTM的介绍与实现(Stata 或 R)

基本介绍 组基轨迹建模&#xff08;Group-Based Trajectory Modeling&#xff0c;GBTM&#xff09;&#xff08;旧名称&#xff1a;Semiparametric mixture model&#xff09; 历史&#xff1a;由DANIELS.NAGIN提出&#xff0c;发表文献《Analyzing Developmental Trajectori…

【软件架构的常用分类及建模方法】

曾梦想执剑走天涯&#xff0c;我是程序猿【AK】 目录 简述概要知识图谱 简述概要 了解软件架构的常用分类及建模方法 知识图谱 1.1.2 软件架构的常用分类及建模方法 软件架构的常用分类 多年来&#xff0c;“架构”概念经过不断演化&#xff0c;目前已形成了满足不同用途的…

Meta AI最近推出的新模型,Searchformer

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…