Vue3、Vite5、Oxlint、Unocss 最新的Web项目大屏模板

🍭 安装使用

获取项目代码

git clone https://github.com/gitboyzcf/vue3-simple-screen.git

安装依赖

pnpm install

运行

pnpm dev

打包

pnpm build

🍩 浏览器支持

本地开发推荐使用Chrome 80+ 浏览器

支持现代浏览器, 不支持 IE

IE	Edge	Firefox	Chrome	Safari
not support	last 2 versions	last 2 versions	last 2 versions	last 2 versions

🍻特性

• ⚡️ Vue 3、 Vite 5、pnpm

• 📦 组件自动化引入

• 🍍 使用 Pinia 的状态管理

• 🌈 Primevue - Vue.js UI 套件，提高开发效率

• 🎨 UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎

• 😃 各种图标集为你所用

• 🔥 使用 新的 <script setup> 语法

• 📥 API 自动加载 - 直接使用 Composition API 无需引入

• 🌍 API 采用模块化自动导入方式 根据demo.js文件设置接口，以API_xxx_method的方式命名，在请求时无需导入 直接使用useRequest()函数返回参数以解构的方式获取，拿到即为写入的接口

• 💥 Oxlint（英）+ ESLint（英） - 双管齐下，享受高速度、强检查的代码格式化效果

• autofit.js - 大屏自适应工具，适配仅需一行代码

🍺 vscode 插件

• 🍭 editorconfig
• 🍬 dotenv
• 🍿 prettier-vscode
• 🍪 vscode-eslint
• 🍺 unocss
• 🍦 iconify
• 🍰 volar
• 🎂 errorlens
• 🍧 error-gutters
• 🍼 gitlens

🍣 Git 规范

参考 Vue 规范

• ✨ feat 增加新功能
• 🐛 fix 修复问题/BUG
• 🎉 init 初始化
• 📝 docs 文档变更
• 💄 style 代码格式(不影响代码运行的变动)
• ♻️ refactor 重构(既不是增加feature，也不是修复bug)
• ⚡️ perf 性能优化
• ✅ test 增加测试
• ⏪️ revert 回退
• 🚀‍ build 构建过程或辅助工具的变动
• 👷 ci CI 配置

图标使用方式

1. 前往图标库查找相关图标icon

2. 安装图标所在的图标库

   # 格式：pnpm add @iconify-json/[the-collection-you-want] -D
   
   # 例如
   pnpm add @iconify-json/ep -D

   安装完后可以使用当前库下的所有图标 https://icon-sets.iconify.design/ep/

3. 项目中使用 使用unocss的方式https://iconify.design/docs/usage/css/unocss/#icons-with-unocss

   <div class="i-ep-apple w-20px h-20px color-red"></div>