- ⚡️ Vite 4, pnpm, Vue 3 优先 - 就是快！
- 📲 组件自动加载
- 📥 API 自动加载 - 直接使用 Composition API 无需引入
- 🎨 UnoCSS - 高性能且极具灵活性的原子化 CSS 引擎
- 😃 各种图标集为你所用 - 120+ 图标集, 150000+ 图标为你所用, 从不妥协
- 🍍 使用 Pinia 的状态管理
- 🗂 基于文件的路由
- 📑 布局系统
- 🔥 使用 新的
<script setup>语法 - 🌍 I18n 国际化开箱即用, 使用插件自动加载
- 🖨 使用 Vite SSG 进行服务端生成 ( SSG )
- 🦔 使用 critters 的生成关键 CSS
- 🌙 深色模式
- 🦾 TypeScript 支持
- ☁️ 零配置部署 Netlify 和 Vercel
- Vue Router
- vite-plugin-pages - 以文件系统为基础的路由
- vite-plugin-vue-layouts - 页面布局系统
- Pinia - 直接的, 类型安全的, 使用 Composition API 的轻便灵活的 Vue 状态管理
- unplugin-vue-components - 自动加载组件
- unplugin-auto-import - 直接使用 Composition API 等，无需导入
- Vue I18n - 国际化
- vite-plugin-vue-i18n - Vue I18n 的 Vite 插件
- VueUse - 实用的 Composition API 工具合集
- vite-ssg-sitemap - 站点地图生成器
- @vueuse/head - 响应式地操作文档头信息
- 使用 Composition API 的 <script setup> SFC 语法
- ESLint 配置为 @moomfe/eslint-config, 单引号, 有分号
- TypeScript
- pnpm - 快, 节省磁盘空间的包管理器
- vite-ssg - 服务端生成
- critters - 关键 CSS 生成器
- VS Code- IDE
- VS Code 扩展
- Volar - Vue 3
<script setup>IDE 支持 - ESLint - 代码风格检查及修正
- UnoCSS - UnoCSS 样式提示及自动补全
- Iconify IntelliSense - 图标内联显示及自动补全
- i18n Ally - 多合一的 I18n 支持
- Volar - Vue 3
- ***.code-workspace: VsCode 工作区文件, 使用这个打开项目
- public: 打包后需要放到根目录的文件
- locales: 国际化文件
- dist: 打包后的代码
- src: 源码
- assets: 存放静态资源
- styles: 公共样式
- shared: 公用变量 or 函数
- lib: 外部依赖库 ( 不满足需求需要重构时或者外部依赖库有 BUG 时, 从 node_modules 移至这里 )
- utils: 工具函数
- modules: 项目依赖类库的配置
- workers: 存放独立的 Web Worker 应用
- stores: 状态存储
- composables: 组合式函数
- components: 公共组件 ( 相对独立的组件, 离开当前项目也能使用的组件 )
- components-private: 私有组件 ( 只能在当前项目中使用的组件, 比如说包含了业务代码的组件 )
- layouts: 布局组件
- pages: 页面
使用项目根目录的 ***.code-workspace 文件进入 VsCode 工作区
安装相应的 VsCode 扩展 ( 首次进入工作区时, 右下角会提示安装 ), 可以在扩展界面, 输入 @recommended 检查安装状态
执行以下命令就可以启动项目
pnpm dev # 如果你没装过 pnpm, 可以先运行: npm install -g pnpm- 配置文件地址: src/settings.ts
- 类型定义: src/types.ts
- 项目名称
- 默认值:
'Base - Naive UI'