|
1 |
| -# vue3-starter-template |
| 1 | +# Vue 3 Starter Template |
2 | 2 |
|
3 | 3 | [](https://github.com/eghamat24/vue3-starter-template/blob/main/README.md)
|
4 | 4 | [](https://github.com/eghamat24/vue3-starter-template/blob/main/README.fa.md)
|
5 | 5 |
|
| 6 | +## **Why Was This Project Created?** |
| 7 | + |
| 8 | +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. |
| 9 | + |
| 10 | +## **Challenges with Using UI Frameworks** |
| 11 | + |
| 12 | +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. |
| 13 | + |
| 14 | +## **Key Features of the Starter Kit** |
| 15 | + |
| 16 | +- Quick project setup with pre-configured store, services, and components |
| 17 | +- Easy customization of component styles |
| 18 | +- Improved project speed |
| 19 | +- Built-in project tools and services following a consistent development standard |
| 20 | + |
6 | 21 | This template should help get you started developing with Vue 3 in Vite.
|
7 | 22 |
|
| 23 | +## **Folder Structure** |
| 24 | + |
| 25 | +`📂starter kit` |
| 26 | +`├──📂 src` |
| 27 | +`│ ├──📂 asset` |
| 28 | +`│ ├──📂 components` |
| 29 | +`│ ├──📂 composables` |
| 30 | +`│ ├──📂 directives` |
| 31 | +`│ ├──📂 enums` |
| 32 | +`│ ├──📂 locales` |
| 33 | +`│ ├──📂 router` |
| 34 | +`│ ├──📂 services` |
| 35 | +`│ ├──📂 stores` |
| 36 | +`│ ├──📂 utils` |
| 37 | +`│ ├──📂 views` |
| 38 | +`│ ├──📄 app.vue` |
| 39 | +`│ ├──📄 bootstrap.js` |
| 40 | +`│ └──📄 main.js` |
| 41 | +`├──📄 vite.config.js` |
| 42 | +`├──📄 package.json` |
| 43 | +`└──🌐 index.html` |
| 44 | + |
| 45 | + |
| 46 | + |
| 47 | +## **Included Components and Their Features** |
| 48 | + |
| 49 | +- **VForm:** Provides validation for form fields. |
| 50 | +- **VInput:** Custom input component with validation and customizable slots. |
| 51 | +- **VAutoComplete:** Supports items and validation. |
| 52 | +- **VRadioGroup:** Groups radio inputs with validation support. |
| 53 | +- **VRadio:** Custom radio input with styling options. |
| 54 | +- **VTextArea:** Custom text area component with validation. |
| 55 | +- **VTooltip:** Tooltip component with customization options. |
| 56 | +- **VModal:** Highly customizable modal component. |
| 57 | +- **VTable & VTableServer:** Static and server-side table components. |
| 58 | + |
| 59 | +## **Packages Used** |
| 60 | + |
| 61 | +- Vite (v4.3) |
| 62 | +- Pinia for state management |
| 63 | +- Vue-router (v4) |
| 64 | +- Vue-i18n for multilingual support |
| 65 | +- Bootstrap (v5) for default styles |
| 66 | +- Axios for service requests |
| 67 | +- Rtlcss for managing right-to-left styles |
| 68 | + |
8 | 69 | ## Recommended IDE Setup
|
9 | 70 |
|
10 | 71 | [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
|
0 commit comments