IceWhale Vue3 WebUI Template

Vite + Vue3 + TypeScript + PrimeVue + TailwindCSS + Wujie

This template should help get you started developing with Vue 3 and TypeScript in Vite.

PrimeVue and Tailwind CSS are also pre-built to accelerate UI development.

Uses the Wujie framework to allow WebApp to run independently or embedded in any WebUI project. Including CasaOS and ZimaOS.

Plugins for Tailwind CSS and Prettier have been configured to enhance the development experience.

The template uses Vue 3 <script setup> SFCs , check out the script setup docs to learn more.

Usage

`degit` Template

The recommended package manager is pnpm

pnpx degit IceWhaleTech/vue3-webui-template my-project

cd my-project
pnpm i

Recommended IDE Setup

VS Code
- Settings:
  - Use Workspace (vue3-webui.code-workspace)
  - Change Format Document to Prettier - Code formatter
- Extensions:
  - Disable
    - Unused extensions (workspace)
    - Vetur (workspace)
  - Install all recommended extensions from .vscode/extensions.json (workspace)

Features

Base Framework
- Vite
  - @vitejs/plugin-vue 📖
  - @vitejs/plugin-vue-jsx 📖
  - @intlify/unplugin-vue-i18n 📖
  - unplugin-icons (autoInstall enabled) 📖 🎭
  - unplugin-auto-import 📖
  - unplugin-vue-components 📖
  - unplugin-turbo-console 📖
- Vue3
  - @vueuse/core 📖
  - vue-i18n 📖
  - vue-router 📖
- TypeScript
UI Framework
- PrimeVue 📖
  - PrimeIcons 📖
- Tailwind CSS 📖
  - @tailwindcss/typography 📖
  - @tailwindcss/container-queries 📖
  - tailwindcss-animate 📖
  - tailwind-scrollbar 📖
Micro Frontend
- Wujie 📖
Developer Experience
- VSCode
  - settings.json
  - extensions.json
  - .code-workspace
- Prettier
  - prettier-plugin-organize-attributes 📖
  - @trivago/prettier-plugin-sort-imports 📖
  - prettier-plugin-tailwindcss 📖