基于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自动格式化
在这里插入图片描述

勾上就行

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

已自动格式化

相关阅读:
csp201604
Linux： Swap与swappiness
深度学习笔记_1、定义神经网络
调用第三方API超时如何区分是连接超时还是响应超时
网络安全：保护你的系统
c++图片取出每一个像素的值
fastposter v2.9.0 程序员必备海报生成器
kafka rebalance你真的了解吗
斐波那契数列和斐波那契数
面试官：说说你了解的分布式 ID 生成方案

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