Skip to content

Latest commit

 

History

History
99 lines (71 loc) · 3.21 KB

README.md

File metadata and controls

99 lines (71 loc) · 3.21 KB

Vue 3 Starter Template

en fa

Why Was This Project Created?

This starter kit was created to speed up the initialization of new Vue projects and maintain a consistent development standard across different teams and projects. By following this standard, the maintenance and compatibility of projects became easier.

Challenges with Using UI Frameworks

Using UI frameworks provides many components and speeds up development. However, they may introduce challenges such as slow components, limited customizability, and unnecessary features. This starter kit addresses these issues by providing lightweight and customizable components.

Key Features of the Starter Kit

  • Quick project setup with pre-configured store, services, and components
  • Easy customization of component styles
  • Improved project speed
  • Built-in project tools and services following a consistent development standard

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

Folder Structure

📂starter kit
├──📂 src
│ ├──📂 asset
│ ├──📂 components
│ ├──📂 composables
│ ├──📂 directives
│ ├──📂 enums
│ ├──📂 locales
│ ├──📂 router
│ ├──📂 services
│ ├──📂 stores
│ ├──📂 utils
│ ├──📂 views
│ ├──📄 app.vue
│ ├──📄 bootstrap.js
│ └──📄 main.js
├──📄 vite.config.js
├──📄 package.json
└──🌐 index.html

Included Components and Their Features

  • VForm: Provides validation for form fields.
  • VInput: Custom input component with validation and customizable slots.
  • VAutoComplete: Supports items and validation.
  • VRadioGroup: Groups radio inputs with validation support.
  • VRadio: Custom radio input with styling options.
  • VTextArea: Custom text area component with validation.
  • VTooltip: Tooltip component with customization options.
  • VModal: Highly customizable modal component.
  • VTable & VTableServer: Static and server-side table components.

Packages Used

  • Vite (v4.3)
  • Pinia for state management
  • Vue-router (v4)
  • Vue-i18n for multilingual support
  • Bootstrap (v5) for default styles
  • Axios for service requests
  • Rtlcss for managing right-to-left styles

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint