A fes.js + TypeScript starter template
- TypeScript 69.1%
- Vue 12.5%
- CSS 6.9%
- SCSS 4.1%
- Shell 3.6%
- Other 3.8%
| Filename | Latest commit message | Latest commit date |
|---|---|---|
| .github/workflows | ||
| .vscode | ||
| docker | ||
| k8s | ||
| locales | ||
| public | ||
| scripts | ||
| src | ||
| .commitlintrc.js | ||
| .editorconfig | ||
| .env.dev | ||
| .fes.js | ||
| .fes.prod.js | ||
| .gitignore | ||
| .lefthook.yml | ||
| .npmrc | ||
| .stylelintrc.js | ||
| eslint.config.js | ||
| index.html | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| tsconfig.json | ||
| unocss.config.ts | ||
fes-starter
A fes.js + Vite + TypeScript starter template.
This template added our team's specific project setup to the upstream 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