基于Vite初始化前端项目

# 安装
npm install -g vite@latest

# 查看vite版本
vite -v
1
2
3
4
5

在这里插入图片描述

npm init vite

# 自定义配置
1
2
3

在这里插入图片描述

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p
1
2

在这里插入图片描述

按官网步骤来即可

在这里插入图片描述
引入

这里使用到了scss，需安装

npm i -D sass
1

@tailwind base;
@tailwind components;
@tailwind utilities;
1
2
3

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

创建.prettierrc

下面注释记得删掉

{
  // 代码结尾不加分号
  "semi": false,
  // 优先单引号
  "singleQuote": true,
  // 不添加尾随逗号
  "trailingComma": "none",
}
1
2
3
4
5
6
7
8

选择默认的格式化程序

分别进入App.vue和main.ts
右键选择使用…格式化文档
在这里插入图片描述

在这里插入图片描述
再次点击

变成default则表示配置成功了

配置ctrl+s自动格式化
在这里插入图片描述

勾上就行

在这里插入图片描述
保存后

已自动格式化

相关阅读:
Oracle 11g安装使用、备份恢复并与SpringBoot集成
YOLOv9来咧！
嵌入式学习——硬件（ARM体系架构）——day51
动手吧，vue数字动画
一站式洞察行业热点，飞瓜数据B站新功能「流量大盘」上线！
面试官视角总结的测开面试题（付答案）
QT：布局管理器&消息盒子&对话框
Spring在业务中常见的使用方式
DVWA靶场环境搭建_SQL注入模拟靶机
PATA 1010 Radix（进制转换）

原文地址：https://blog.csdn.net/m0_47333020/article/details/126892771