Skip to main content

Розробка VUE

Зміст

Стороні бібліотеки

Правила розробки VUE​

  • ізольованість, бажано 0 залежностей
  • тестування розробником і тестувальником
  • документація та playground з параметрами (для проектів /docs/vue)
  • автономний запуск під компоненти
  • vue в проектах
  • tag з гілки main
  • відсутність debugger, console, помилок
  • vendor
  • mr - перевірка і контроль
  • ui kit максимально протестований
  • орієнтуємось на готові рішення, термінологію, component API
  • статичні дані - для розробки або API документація
  • приклади на статичних даних
  • eslint AirBNB
  • naming - props, data, element
  • prefix - vst - tailwind , vst-form, vst-filter - 2 частина категорія
  • розбиття на під компоненти
  • tailwind
  • import динамічний
💡 "Правила розробки VUE - детальніше"

eslint - Ставимо і обов'язокво виправляємо все. В налаштуваннях можна auto fix

{
  "eslint.codeAction.showDocumentation": {"enable": true},
  "eslint.alwaysShowStatus": true,
  "git.autofetch": true,
  "eslint.format.enable": true,
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ],
  "git.enableSmartCommit": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "editor.wordWrap": "on",
}

Naming - Орієнтуємось на стандартизовані назви props а також на element. Термінологія, зрозумілі назви файлів та зміних

Готові рішення - Дивимось готові open source, google, chatgpt. беремо готове або орієнтуємось на component API

Мінімум залежностей - крім базових речей uikit, form, filter - інше має бути інкапсульовано в компоненті

Статичні дані - для розробки не обовязково мати API з даними. визначити структуру

документація - Обов'язково!!! Props, keyboards, slot, example, ... зміни також вносимо

Правила UI компонент​

  • notification - на дію API та помилку
  • cursor pointer, hover - на активні елементи
  • loading - при діях
  • console - при event-stream
  • робота без f5
  • управління клавіатурою
  • історія/historyAPI в компонентах - після f5 той самий state

Порядок розробки​

Вихідні дані

  • API документація
  • Пов'язані компоненти
  • ТВ

Процес

  1. Створюємо компонент в проекті, node
  2. Підключаємо через Helper _vue на сторінку або інтерфейс
  3. Задати структуру даних, якщо немає реальних - статичні дані
  4. Підібрати готові блоки tailwind - розвивати бібліотеку готових блоків
  5. Використовувати готові приклади та рішення, наприклад карти
  6. Документація та playground з параметрами
  7. Писати unit test
  8. Приклад з тестовими даними якщо треба

Вимоги до тестування​

  • Перевіряємо документацію - опис props
  • Роботу в playground і зміну налаштувань
  • Помилки в console

Місце розміщення компонент і підключення​

Компоненти створюються в форматі Single File Component версія Vue2

💡 "Приклад Single File Component"
<script>
export default {
  data() {
    return {  greeting: 'Hello World!' }
  }
}
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;  
}
</style>

1. В GIT Проекті​

В модулі проекту, папка vue згідно структури

{{{_vue "/vue/itree/vs-itree-map.vue" }}}

, де itree назва модуля, а сам шлях підключення - /vue/:module/:path

2. В проекті Node - ядро системи​

В проекті node в папці module/:module_node/vue/:path папка vue. Структура проекту

{{{_vue "/vue/web/logger/vs-logger.vue"}}}

, де web назва module_node, а шлях підключення - /vue/:module_node/:path

3. Проект VUE​

В проекті VUE. Структура проекту. Містить стандартні компоненти: form, map та ін.

{{{_vue "/vue/crm/components/content/header/vs-header-wrapper.vue" }}}

, де crm назва module_vue, а шлях підключення - /vue/:module_vue/:path

Версія VUE може бути

  • зафіксована - /vue/gis/misc/svg/polygon.svg?ver=1.0.59b - тоді шлях буде містити версію
  • ні тоді буде тянути з серверу source.softpro.ua або локального PK

В разі змін версію можна створити нову і змінити у користувача

Оновлення версії та інші API​

Helper VUE

  • /api-user/vuejs/:token.js - використовуєтья в helper {{_vue "/vue/:module/:path"}}. Генерується унікальний token і викликається скрипт підключення доступний по API

:::Tip "Підчас вставки генерується код підключення"

async function vs053c81a7a1782154d4b64d564cbc9e31(){
    if(!window.Vue){       
    await head.promise(['/vue/vendor/vue.bundle.js']);
    await head.promise(['/vue/core/store.js',"/vue/core/core-components.js"]);
    }
    
    if(!window.ELEMENT){
    await head.promise([ "/vue/vendor/element/element.ua.js","/vue/vendor/element/element_softpro.css"]);
    }
        Vue.component('vs053c81a7a1782154d4b64d564cbc9e31', () => import('/vue/SITE/calc/vs-calc-new.vue'));;
        const vvs053c81a7 = new Vue ({
            /*mixins: [meta],*/
            el: '#vs053c81a7a1782154d4b64d564cbc9e31',
            store: window.store,              
            data:()=>{return {data1 : '-', ...{} } }
        });    
}; vs053c81a7a1782154d4b64d564cbc9e31();

:::

Single File Component to JS

Оновлення

версія зберігається в папці проекту /vue

Створення версії

Налаштування проекта VUE локлаьно​

  1. d:\softpro - заходимо в папку
  2. git clone -b dev https://git.softpro.ua/softpro/vue.git - клонуємо репозиторій vue
  3. npm i - встановлюємо пакети
  4. Копіюємо файл d:\softpro\server\config_https.json -> d:\softpro\server\config.json
  5. 127.0.0.1 source.softpro.ua -> c:\Windows\System32\drivers\etc\hosts - прописуємо DNS VUE на locahost
  6. chrome://flags/ - Flag Block insecure private network requests -> disabled
  7. npm start - запуск

При помилці CORS виконайте комнду нижче в prompt з правами admin

# prompt as admin
REG ADD HKEY_CURRENT_USER\Software\Policies\Google\Chrome /v InsecurePrivateNetworkRequestsAllowed /t REG_DWORD /d 1 /f

Всі зміни доступні відразу hotrelaod

Корисні посилання​