VUE+VITE+Windicss,安装详细流程

189 阅读1分钟

 # 如果已经安装好VUE环境,请直接跳到第6步 

# 1. 从计划安装的位置地址栏输入CMD 

# 2. 创建名称为 qq 的 Vite + Vu3项目框架,

yarn create vite qq

# 3. 按上下键选择Vue环境、TS语言等回车 

# 4. 依次进入项目,并初始化 

cd qq 
yarn
yarn dev

# 5. vue安装完成 

# 6. 开始安装Windicss

yarn add vite-plugin-windicss windicss --dev

# 7. 配置vite.config.ts 

import WindiCSS from "vite-plugin-windicss"
return { plugins: [Vue, WindiCSS()], ...

# 8. 全局引入main.ts

import "virtual:windi.css

# 9. 运行项目

yarn dev

# 10. 完成