🚀 CNKI的Vue3 + Vite 技术栈项目模板

✨ 一个深耕于CNKI的现代化的 Vue3 前端开发脚手架，集成了最新技术栈和最佳实践 ✨

立刻开始

npx cnki-fast-cli init <project-name>

🌟 技术栈特性

• Vue3 + TailwindCSS - 现代化前端开发三件套 🎨
• Vite - 极速的开发体验 ⚡
• Vue Router - 路由管理 🗺️
• Element Plus + Element Plus Icons - UI组件库 🧩
• 上万小图标直接使用 https://yesicon.app/ 搜索即可 如
• Pinia - 状态管理 🏪
• 自动导入 - 解放双手 🤖
  • src/components 下组件自动导入
  • 常用 Composition API 自动导入 (ref, reactive, router等)
  • src/pages 路由导入自动生成
• Lodash-es - 实用的工具库 🧰

  import { chunk } from 'lodash-es'
  const a = chunk(['a', 'b', 'c', 'd'], 2)
  

• 指定pnpm作为安装包
• /commonPage 页面下，有一些常用的东西
  • 常用底部
  • 登录注册

🛠️ 功能特性

自动路由

• 基于文件的路由系统 📂
• 在 pages 目录下创建文件即可自动生成路由
• 支持自定义路由扩展
• 单文件组件命名解决方案 💡

代码质量

• ESLint + Prettier - 代码规范和格式化 ✍️
• Husky + lint-staged - Git提交时自动检查 🚦
  • 只检查修改的文件
  • 自动格式化代码

自动折叠

一些不常用的文件夹和文件会自动折叠，方便查看关键文件 📁

开发体验

• PNPM - 快速、节省磁盘空间的包管理 📦
• 现代化的开发工具链 🛠️

开发环境要求

• Node.js: 20.19.5 或更高版本

为什么用tailwind3，而不是tailwind4

tailwind4 不兼容谷歌100版本以下，而搜狗的上一版浏览器还是谷歌80内核，所以有兼容性问题。

🚦 快速开始

pnpm install
pnpm dev
pnpm build

我无法遵循eslint，所以提交不到git上，不想要eslint拦截了我的提交，怎么办？

对于自己的项目，不想使用eslint，但是又不想删除eslint，怎么办？ 去package.json 删掉26行 eslint —fix， 提交的时候，就不检查js的格式了 对于团队项目，还是建议使用。

📝 最佳实践建议

• 使用 setup 语法糖编写组件 🍬
• 充分利用自动导入功能 ⚡
• 遵循组件命名规范 (多单词/PascalCase) 🏷️

可选配置自行安装

• vueuse 库很好用 https://vueuse.nodejs.cn/guide/