Mocking up web app with Vite-Boot (speed)
English | 简体中文
- ⚡ Lightning fast: Built with Vue 3, Vite, and pnpm 🔥
- 💪 Strongly typed: Uses TypeScript 💻
- 🔥 Latest syntax: Uses the new <script setup> syntax 🆕
- 🤙🏻 Reactivity Transform enabled
- 📦 Components auto importing: Automatically imports components 🚚
- 📥 APIs auto importing: Uses unplugin-auto-import to directly import Composition API and others 📨
- 🎨 UnoCSS - The instant on-demand atomic CSS engine, providing a lightweight and fast way to style your app.
- 🌼 Daisy - The free and open-source Tailwind CSS component library
- 💡 Official router: Uses Vue Router v4 🛣️
- 🎉 Loading feedback: Uses NProgress to provide page loading progress feedback 🔄
- 🍍 State management: Uses Pinia for state management 🗃️
- 📜 Chinese font preset: Includes a preset for Chinese fonts 🇨🇳
- 🌍 I18n ready: Ready for internationalization with locales 🌎
- ☁️ Netlify ready: Zero-config deployment on Netlify ☁️
# 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
│ ├── main.ts
│ ├── router # Vue router
│ │ └── index.ts
│ ├── settings.ts # global configuration
│ ├── store # Pinia store
│ │ ├── counter.ts
│ │ └── index.ts
│ ├── styles # global style
│ │ ├── main.css
│ │ ├── nprogress.css # nprogress style
│ │ ├── tailwind.css
│ │ └── variables.css
│ ├── utils # global public method
│ │ └── darkMode.ts
│ └── views # all pages
│ └── Index.vue
├── tailwind.config.js # tailwind configuration
├── tsconfig.json # TS compilation configuration
├── Dockerfile # Docker 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 i
Just run and visit http://localhost:8888
pnpm run dev
To build the App, run
pnpm run build
And you will see the generated file in dist
that ready to be served.
Go to Netlify and select your clone, OK
along the way, and your App will be live in a minute.
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