Vite-Boot

使用Vite-Boot快速地创建 Web 应用

特性

• ⚡ Vue 3, Vite 2, pnpm - 为速度而生
• 💪 Typescript - 强大的类型检查
• 🔥 使用 新的 <script setup> 语法
• 🤙🏻 默认开启 响应性语法糖
• 📦 组件自动化加载
• 📥 API 自动加载 - 直接使用 Composition API 无需引入
• 💡 Vue Router v4 - Vue 路由系统
• 🎨 Tailwind CSS v3 - 快速建立现代网站，而不必离开 HTML。
• 🎉 NProgress - 页面加载进度反馈
• 🍍 使用 Pinia 的状态管理
• 🌼 Daisy - 开源的 Tailwind CSS 组件库

集成 Tailwind 插件:

• tailwindcss/forms
• tailwindcss/typography
• tailwindcss/line-clamp
• tailwindcss/aspect-ratio

编码风格

• @kirklin/eslint-config

推荐的 IDE 设置

• VSCode
• Volar

性能

项目结构

# vite-boot
├── LICENSE
├── README.assets
│   └── vite-vue-tailwind.png
├── README.md
├── README.zh-CN.md
├── index.html
├── node_modules
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js        # tailwind 相关配置
├── public
│   └── favicon.ico
├── src
│   ├── App.vue              # 入口页面
│   ├── api                  # api 接口
│   ├── assets               # 静态资源
│   │   └── logo.png
│   ├── components           # 全局组件
│   │   └── Navbar.vue       # 顶部导航栏组件
│   ├── env.d.ts
│   ├── main.ts              # 入口文件
│   ├── router               # Vue router
│   │   └── index.ts
│   ├── settings.ts          # global configuration
│   ├── store                # Pinia 状态管理
│   │   ├── counter.ts
│   │   └── index.ts
│   ├── styles               # 全局样式
│   │   ├── main.scss
│   │   ├── nprogress.scss   # nprogress 样式（顶部加载样式）
│   │   ├── tailwind.css     # tailwind 样式
│   │   └── variables.scss   # SCSS全局变量
│   ├── utils                # 项目公共方法
│   │   └── darkMode.ts
│   └── views                # 所有页面
│       └── Index.vue        # APP首页
├── tailwind.config.js       # tailwind 配置文件
├── tsconfig.json            # TS 编译配置
└── vite.config.ts           # Vite 配置文件

快来试试吧！！

GitHub 模板

使用这个模板创建仓库.

克隆到本地

npx degit kirklin/vite-boot my-vite-app
cd my-vite-app
pnpm i

使用

开发

只需要执行以下命令就可以在 http://localhost:8888 中看到

pnpm run dev

构建

构建该应用只需要执行以下命令

pnpm run build

然后你会看到用于发布的 dist 文件夹被生成。