🚀 Vite 前端项目 - CSS变量智能提示
一个基于 Vite 的现代化前端项目，集成CSS变量智能提示功能
📋 项目概述
这是一个基于 Vite 的现代化前端项目，专注于提供优秀的开发体验。项目集成了完整的 CSS变量智能提示 功能，支持多主题切换，让您在编写样式时能够快速选择和使用全局CSS变量。
✨ 功能特性
🎨 CSS变量智能提示
- 🔍 智能补全 ：输入
var(--即可显示所有可用CSS变量 - 📝 详细描述：每个变量都有清晰的用途说明
- 🎯 快速选择：支持键盘导航和Enter确认
- 🌈 颜色预览：直观显示颜色变量的实际效果
🛠️ 开发体验优化
- ⚡ 零配置：开箱即用的智能提示功能
- 🔧 VSCode集成：完美配合VSCode编辑器
- 📦 插件推荐：自动推荐必需的VSCode插件
- 🎨 主题支持：支持亮色/暗色主题切换
🚀 快速开始
环境要求
- Node.js >= 16.0.0
- VSCode 编辑器（推荐）
安装步骤
- 克隆项目
bash
git clone <repository-url>
cd vite-study- 安装依赖
bash
npm install-
安装VSCode插件
📌 必需插件 ：
CSS Var Complete安装方式：
- 在VSCode扩展商店搜索 "CSS Var Complete"
- 或点击 VSCode插件链接
-
启动开发服务器
bash
npm run dev🎯 使用指南
CSS变量智能提示使用
步骤1：创建CSS变量定义文件
创建 src/styles/variables.css 文件，定义所有全局CSS变量：
css
/* 全局CSS变量定义 - 用于智能提示 */
:root {
/* 主要颜色 */
--primary-color: #3498db;
--secondary-color: #2ecc71;
/* 背景和文本 */
--background-color: #f5f7fa;
--text-color: #333;
/* 卡片和边框 */
--card-bg: #ffffff;
--border-color: #e0e0e0;
/* 阴影 */
--shadow-color: rgba(0, 0, 0, 0.1);
/* 自定义变量 */
--guojie: ;
}
/* 深色主题 */
[data-theme="dark"] {
--primary-color: #2980b9;
--secondary-color: #27ae60;
--background-color: #1a1a2e;
--text-color: #f0f0f0;
--card-bg: #16213e;
--border-color: #34495e;
--shadow-color: rgba(0, 0, 0, 0.3);
}步骤2：配置VSCode智能提示
创建 .vscode/settings.json 文件，配置VSCode智能提示：
json
{
"css.validate": true,
"files.associations": {
"*.css": "css",
"*.less": "less",
"*.scss": "scss"
},
"cssvar.files": [
"src/styles/variables.css"
],
"cssvar.exclude": [
"**/node_modules/**"
]
}步骤3：在样式文件中引入变量
在需要使用CSS变量的样式文件顶部引入变量定义：
css
/* 引入全局CSS变量以获得智能提示 */
@import '../styles/variables.css';
.my-component {
/* 输入 var(-- 时会显示所有可用的CSS变量 */
color: var(--text-color);
background: var(--background-color);
border: 1px solid var(--border-color);
box-shadow: 0 2px 8px var(--shadow-color);
}使用方法
- 🔄 重启VSCode - 确保配置生效
- ⌨️ 在CSS文件中输入
var(--- 会显示所有可用的CSS变量列表 - 🎯 选择变量 - 使用键盘上下键选择，按Enter确认
- 👁️ 查看描述 - 每个变量都有详细的描述和颜色值说明
📊 可用的CSS变量
| 变量名 | 描述 | 默认值 | 预览 |
|---|---|---|---|
--primary-color |
主题主色调 | #3498db | 🎨 |
--secondary-color |
主题次要颜色 | #2ecc71 | 🎨 |
--background-color |
页面背景颜色 | #f5f7fa | 🎨 |
--text-color |
文本颜色 | #333 | 🎨 |
--card-bg |
卡片背景颜色 | #ffffff | 🎨 |
--border-color |
边框颜色 | #e0e0e0 | 🎨 |
--shadow-color |
阴影颜色 | rgba(0, 0, 0, 0.1) | 🎨 |
--guojie |
自定义变量 | - | 📝 |
⚙️ 配置说明
VSCode 推荐配置
为了获得最佳开发体验，建议在 .vscode/settings.json 中添加以下配置：
json
{
"css.validate": true,
"css.lint.unknownProperties": "warning",
"files.associations": {
"*.css": "css",
"*.less": "less",
"*.scss": "scss"
},
"cssvar.files": [
"src/styles/variables.css"
],
"cssvar.exclude": [
"**/node_modules/**",
"**/dist/**"
],
"emmet.includeLanguages": {
"css": "css"
},
"editor.quickSuggestions": {
"strings": true
}
}推荐VSCode插件列表
创建 .vscode/extensions.json 文件，自动推荐必需插件：
json
{
"recommendations": [
]
}📚 参考资源
🤝 贡献
欢迎提交 Issue 和 Pull Request 来改进这个项目！
⭐ 如果这个项目对你有帮助，请给它一个星标！
Made with ❤️ by guojie