Vue3 + Vite + Ant design vue + Windi CSS

 1、新建项目

npm init vue@latest

在本地搭建 Vue 单页应用。创建的项目将使用基于Vite的构建设置,并允许我们使用 Vue 的单文件组件(SFC)。

Vite 官网:https://vitejs.cn
Vite 是一个 web 开发构建工具,由于其原生 ES 模块导入方法,它允许快速提供代码。

这一指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示:

2、使用 Windi CSS

Windi CSS 的设计灵感来源于 Tailwindcss,而 Windi CSS 比 Tailwindcss 有更快的加载体验。

Windi CSS 是一款提供功能类的 CSS 框架,最直观的特点就是,你的 CSS 不用离开 HTML 就能够使样式生效,即在 Vue 文件里面,你将不再需要写 style 标签来装载你的 CSS,而是通过 class 工具类,或者「自定义前缀 + 属性模式」来控制 CSS 样式的效果,这些 class 工具类或者属性模式都是 Windi CSS 内部现成的,或者是通过 Windi CSS 配置文件配置的。

npm i vite-plugin-windicss -D

3、配置

vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
impo
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值