@nitra/cursor 1.0.9 → 1.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/mdc/vue.mdc +130 -0
- package/package.json +1 -1
package/mdc/vue.mdc
ADDED
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
---
|
|
2
|
+
description: Vue
|
|
3
|
+
alwaysApply: true
|
|
4
|
+
version: '1.0'
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Vue 3 (Composition API)
|
|
8
|
+
|
|
9
|
+
# Vue 3 Composition API — правила для .cursorrules
|
|
10
|
+
|
|
11
|
+
## Найкращі практики Vue 3 Composition API
|
|
12
|
+
|
|
13
|
+
```javascript
|
|
14
|
+
const vue3CompositionApiBestPractices = [
|
|
15
|
+
'Використовуй функцію setup() для логіки компонента',
|
|
16
|
+
'Реалізуй computed properties через computed()',
|
|
17
|
+
'Використовуй watch і watchEffect для side effects',
|
|
18
|
+
'Підключай lifecycle hooks: onMounted, onUpdated тощо',
|
|
19
|
+
'Використовуй provide/inject для dependency injection'
|
|
20
|
+
]
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Структура папок
|
|
24
|
+
|
|
25
|
+
```javascript
|
|
26
|
+
const folderStructure = `
|
|
27
|
+
src/
|
|
28
|
+
components/
|
|
29
|
+
composables/
|
|
30
|
+
views/
|
|
31
|
+
router/
|
|
32
|
+
store/
|
|
33
|
+
assets/
|
|
34
|
+
App.vue
|
|
35
|
+
main.js
|
|
36
|
+
`
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Додаткові вказівки
|
|
40
|
+
|
|
41
|
+
```javascript
|
|
42
|
+
const additionalInstructions = `
|
|
43
|
+
1. Використовуй JavaScript
|
|
44
|
+
2. Коректно оголошуй props і emits
|
|
45
|
+
3. За потреби використовуй компонент Teleport у Vue 3
|
|
46
|
+
4. Застосовуй Suspense для async components
|
|
47
|
+
5. Реалізуй належний error handling
|
|
48
|
+
6. Дотримуйся Vue 3 style guide і naming conventions
|
|
49
|
+
7. Використовуй Vite для швидкої розробки та збірки
|
|
50
|
+
`
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Детальні вказівки
|
|
54
|
+
|
|
55
|
+
1. **Vue router**: Завжди використовуй Vue router для маршрутизації в проекті версії 5 та його file-based routing.
|
|
56
|
+
2. **Компонент Teleport**: Використовуй Teleport у Vue 3, коли потрібно рендерити поза поточною ієрархією DOM.
|
|
57
|
+
3. **Suspense для async components**: Застосовуй Suspense для асинхронних компонентів і кращого UX.
|
|
58
|
+
4. **Error handling**: Реалізуй глобальний error handling механізмами Vue 3, щоб коректно перехоплювати та обробляти помилки.
|
|
59
|
+
5. **Style guide і naming**: Дотримуйся офіційного Vue 3 style guide і naming conventions для узгодженості кодової бази.
|
|
60
|
+
6. **Vue macros**: Використовуй Vue macros для більш ефективного розробки компонентів.
|
|
61
|
+
7. **Vue Reactivity Transform**: Використовуй Vue Reactivity Transform для змінних в компонентах.
|
|
62
|
+
|
|
63
|
+
### Приклад
|
|
64
|
+
|
|
65
|
+
```javascript
|
|
66
|
+
// Приклад Vue 3 компонента з Composition API
|
|
67
|
+
import { computed, onMounted } from 'vue'
|
|
68
|
+
|
|
69
|
+
export default {
|
|
70
|
+
setup() {
|
|
71
|
+
const count = $ref(0)
|
|
72
|
+
const doubleCount = computed(() => count * 2)
|
|
73
|
+
|
|
74
|
+
onMounted(() => {
|
|
75
|
+
console.log('Компонент змонтовано')
|
|
76
|
+
})
|
|
77
|
+
|
|
78
|
+
return {
|
|
79
|
+
count,
|
|
80
|
+
doubleCount
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
в файлі .vscode/extensions.json є налаштування для Vue:
|
|
87
|
+
|
|
88
|
+
```json title=".vscode/extensions.json"
|
|
89
|
+
{
|
|
90
|
+
"recommendations": ["Vue.volar"]
|
|
91
|
+
}
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
мінімальний повний `package.json` для Vite + Vue + `vue-macros` (версії підлаштуй під проєкт):
|
|
95
|
+
|
|
96
|
+
```json title="package.json"
|
|
97
|
+
{
|
|
98
|
+
"name": "my-vue-app",
|
|
99
|
+
"private": true,
|
|
100
|
+
"type": "module",
|
|
101
|
+
"dependencies": {
|
|
102
|
+
"vue": "^3.5.0"
|
|
103
|
+
},
|
|
104
|
+
"devDependencies": {
|
|
105
|
+
"vite": "^8.0.0",
|
|
106
|
+
"@vitejs/plugin-vue": "^6.0.0",
|
|
107
|
+
"vue-macros": "^3.1.2"
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
```javascript title="vite.config.js"
|
|
113
|
+
import Vue from '@vitejs/plugin-vue'
|
|
114
|
+
import VueMacros from 'vue-macros/vite'
|
|
115
|
+
import { defineConfig } from 'vite'
|
|
116
|
+
|
|
117
|
+
export default defineConfig({
|
|
118
|
+
plugins: [
|
|
119
|
+
VueMacros({
|
|
120
|
+
plugins: {
|
|
121
|
+
vue: Vue()
|
|
122
|
+
}
|
|
123
|
+
})
|
|
124
|
+
]
|
|
125
|
+
})
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
### Висновок
|
|
129
|
+
|
|
130
|
+
Дотримуючись цих практик і правил, можна будувати масштабовані, підтримувані та ефективні застосунки на Vue 3 з Composition API. Завжди звіряйся з офіційною документацією Vue 3 щодо оновлень і нових можливостей.
|