fes-starter

A fes.js + Vite + TypeScript starter template.

Checkout the single-page branch for single page apps like dashboards (no Vue Router)

Technology stack

• ⚡️ Vue 3, fes.js, Vite 3 - born with fastness
• 📦 pnpm for efficient package management
• 🦾 TypeScript
• ⭐ JSX/TSX (optional, to replace Vue's template syntax)
• 🔥 Use the new <script setup> syntax
• 🤙🏻 Reactivity Transform enabled
• 📥 APIs auto importing - use Composition API and others directly
• 📦 Components auto importing
• 🔎 Jump to component code
• 🍍 Pinia - state management
• 🖌️ SASS with SCSS syntax for styling
• 🧰 Element Plus - component library
• 🎨 UnoCSS - the instant on-demand atomic CSS engine
• 😃 Pure CSS icons with UnoCSS - Use icons from any icon sets with classes
• 🛠️ VueUse - collection of useful composition APIs
• 💪 Lefthook for linting codes on commit
• ✔️ ESLint with @daotl/eslint-config-vue for linting
• ✔️ Prettier with @daotl/prettier-config for code formatting
• ✔️ Stylelint for linting CSS and SCSS

Project setup

npm install -g @fesjs/create-fes-app
pnpm install

Compiles and hot-reloads for development

npm run dev

Compiles and minifies for production

npm run prod

Lint & fix

npm run lint
npm run lint:fix

See Fes.js CLI docs and package.json for more.

Guides & References

Must-read

Read the following must-read to understand the technology stack of this template.

• Fes.js Docs
• <script setup> RFC
• What is Vue 3 Reactivity?
• Vue 3 Reactivity API
• Vue 3 Composition API
• Vue 3 TypeScript Support
• Using Vue 3 with JSX and TypeScript
• Vue Style Guide

Recommended

• Explaining The New script setup Type in Vue 3 – Major Takeaways from the RFC
• New script setup (without ref sugar)
• 探索 Vue 3 中的 JSX