Vue3、Vite项目模板

git clone https://github.com/gitboyzcf/vue3-template.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、 pnpm

• 📦 组件自动化引入

• 🍍 使用 Pinia 的状态管理

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

• 😃 各种图标集为你所用

• 🌍 I18n 国际化开箱即用

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

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

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

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

参考 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>