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

Features

• Vue 3, Vite 2, pnpm - born with fastness
• Typescript - of course! necessary
• Use the new <script setup> syntax
• 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

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.