xqsapper / vue3_template

Live Demo

English | 简体中文

Features

• ⚡️ Vue 3, Vite 2 - fast !
• 💪 Typescript - of course! necessary
• 🎉 Element Plus ready - UI Library based on Vue.js 3
• 🔥 Axios - Http Library based on Promise
• 💡 Vue Router 4 - The official router for Vue.js
• 📦 Components auto importing - Automatically register components on demand without import
• 📥 Auto import APIs - Automatically import APIs
• 🍍 State Management via Pinia - The Vue Store that you will enjoy using
• 🎨 Windi CSS - next generation utility-first CSS framework
• 😃 icones - Powerful Icon Library, Use icons from any icon sets
• 🌍 I18n ready - Want to translate? Yes, you can!
• 👩‍🎨 NProgress - Page loading progress feedback
• 😃 SVG Support - Support the use of SVG images as components
• 📑 Markdown Support - Markdown as components / components in Markdown
• 🔑 Complete code style specification and code submission specification
• ☁️ Deploy on Netlify, zero-config

Pre-packed

UI Frameworks

• Windi CSS (On-demand TailwindCSS) - lighter and faster, with a bunch of additional features
  • Windi CSS Typography
• Element Plus - A powerful Vue.js 3 UI Library

Icons

• 🔍Icônes - use icons from any icon sets
  • unplugin-icons - Automatically introduce the icons you need on demand

Plugins

• Vue Router 4 - The official router for Vue.js
• Pinia - The Vue Store that you will enjoy using
• Axios - Http Library based on Promise
• unplugin-vue-components - components auto import
• unplugin-auto-import - Automatically import APIs
• vite-plugin-style-import - A plug-in that imports component library styles on demand
• vite-plugin-windicss - Windi CSS Integration
• vite-plugin-md - Markdown as components / components in Markdown
  • markdown-it-prism - Prism for syntax highlighting
  • prism-theme-vars - customizable Prism.js theme using CSS variables
  • markdown-it-link-attributes - Uniformly set the hyperlink jump mode in markdown
• Vue I18n - Internationalization
  • vite-plugin-vue-i18n - Vite plugin for Vue I18n
• vite-plugin-checker - Support to throw eslint and TS errors in the browser at runtime
• vite-plugin-fonts - Vite's font loader
• VueUse - Collection of useful composition APIs
• vite-svg-loader - Support the use of SVG images as components

Coding Style

• ESLint with Airbnb Style

Dev tools

• TypeScript
• Netlify - zero-config deployment
• VS Code Extensions
  • Volar -Vue 3 IDE support
  • Iconify IntelliSense - Icon inline display and autocomplete
  • i18n Ally - All in one i18n support
  • Windi CSS Intellisense - IDE support for Windi CSS
  • ESLint - Code quality and rule checking
  • Prettier - Code formatter - Focus on code formatting and beautifying code
  • EditorConfig for VS Code - Coding style check

Try it now!

GitHub Template

Create a repo from this template on GitHub.

Clone to local

git clone https://github.com/nekobc1998923/vitecamp.git my-vitecamp-app
cd my-vitecamp-app
npm i

Checklist

When you use this template, try follow the checklist to update your info properly

• Change the author name in LICENSE
• Change the author name in package.json
• Change the title in .env
• Change the favicon in public
• Clean up the README and remove routes

And then , you can enjoy coding fun :)

Usage

Development

Just run and visit http://localhost:8080

npm run dev

Build

To build the App, run

npm run build

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