Mocking up web app with Vite-Boot (speed)
English | 简体中文
- ⚡️ 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
- Eslint
- Prettier
- prettier-plugin-tailwindcss - Automatic Class Sorting with Prettier
# 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
Create a repo from this template on GitHub.
npx degit kirklin/vite-boot my-vite-app
cd my-vite-app
pnpm iJust run and visit http://localhost:8888
pnpm run devTo build the App, run
pnpm run buildAnd you will see the generated file in dist that ready to be served.