manofcode95/vue3-vite-template

Vue 3, Vite, Pinia, Tailwind

Setup

• Required Node 16 or higher
• Visual Studio Code is recommended
• Make sure to install the suggested extensions, then:

# install required packages, register git hooks and generate auto-import types
pnpm install

Commands

# serve with hot reload at localhost:5173
pnpm dev

# build for production env
pnpm build

# build for dev env
pnpm build:dev

# build for staging env
pnpm build:sta

# launch preview server at localhost:4173
pnpm preview

# view visualized bundle outputs
pnpm vis:bundle

# view visualized Tailwind CSS configuration
pnpm vis:tailwind

# code lint and format check
pnpm check:code

# code lint and format fix (modified files)
pnpm fix:code

What included

• Vue 3 + Vite 3 + Pinia + ESBuild
• VueUse + Lodash
• File based routing
• File based layout
• Typed route names
• i18n ready
• Tailwind 3 + Config visualizer
• SASS support + Global helpers
• Auto import modules
• Auto import components
• Cacheable Axios requests
• SVG sprite
• Image optimization
• Base components
• Bundle visualizer
• Enhanced modular import
• Module imports sort
• Validate env variables at dev or build time
• Auto remove all console.log in production build
• Eslint + Stylelint + Prettier
• Git hooks: Lint branch name + commit message

How-tos

• How to make API requests
• How to set ENV files