Vite-Boot

Mocking up web app with Vite-Boot ^(speed)

English | 简体中文

Features

• ⚡ Vue 3, Vite 2, pnpm - born with fastness
• 💪 Typescript - of course! necessary
• 🔥 Use the new <script setup> syntax
• 🤙🏻 Reactivity Transform enabled
• 📦 Components auto importing
• 📥 APIs auto importing - use Composition API and others directly
• 💡 Vue Router v4 - The official router for Vue.js
• 🎨 Tailwind CSS v3 - Rapidly build modern websites without ever leaving your HTML.
• 🎉 NProgress - Page loading progress feedback
• 🍍 State Management via Pinia - The Vue Store that you will enjoy using
• 🌼 Daisy - The free and open-source Tailwind CSS component library
• 📜 Chinese font preset
• 🌍 I18n ready
• ☁️ Deploy on Netlify, zero-config

First-party plugins needed for Tailwind UI:

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

Coding Style

• @kirklin/eslint-config

Recommended IDE Setup

• VSCode
• Volar

Performance

directory

# 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 configuration
├── public
│   └── favicon.ico
├── src
│   ├── App.vue
│   ├── api                  # api interface
│   ├── assets               # static resource
│   │   └── logo.png
│   ├── components           # global component
│   │   └── Navbar.vue       # Navbar component
│   ├── env.d.ts
│   ├── main.ts
│   ├── router               # Vue router
│   │   └── index.ts
│   ├── settings.ts          # global configuration
│   ├── store                # Pinia store
│   │   ├── counter.ts
│   │   └── index.ts
│   ├── styles               # global style
│   │   ├── main.scss
│   │   ├── nprogress.scss   # nprogress style
│   │   ├── tailwind.css
│   │   └── variables.scss
│   ├── utils                # global public method
│   │   └── darkMode.ts
│   └── views                # all pages
│       └── Index.vue
├── tailwind.config.js       # tailwind configuration
├── tsconfig.json            # TS compilation configuration
└── vite.config.ts           # Vite configuration

Try it now!

GitHub Template

Create a repo from this template on GitHub.

Clone to local

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

Usage

Development

Just run and visit http://localhost:8888

pnpm run dev

Build

To build the App, run

pnpm run build

And you will see the generated file in dist that ready to be served.

Deploy on Netlify

Go to Netlify and select your clone, OK along the way, and your App will be live in a minute.

Docker Production Build

First, build the vite-boot image by opening the terminal in the project's root directory.

docker buildx build . -t viteboot:latest

Run the image and specify port mapping with the -p flag.

docker run --rm -it -p 8080:80 viteboot:latest