Исследование визуальной разработки vue3+T, фактической основы перетаскивания, динамической генерации компонентов, удаленной загрузки компонентов.

Vue.js
Исследование визуальной разработки vue3+T, фактической основы перетаскивания, динамической генерации компонентов, удаленной загрузки компонентов.

ерунда

Отказ от ответственности: этот проект очень простой, пожалуйста, не распыляйтесь. Проверьте это, если вы найдете это полезным. Просто посмотри на это.

Я поделюсь и задам несколько вопросов по самому проекту, а также задам несколько вопросов, надеюсь, кто-то сможет на них ответить.

Первоначальный замысел самого проекта — изучение визуального редактора,

Рекомендуемые проекты с открытым исходным кодом:

генератор форм:git ee.com/doom-environment/form-a…установить, иначе, если вы зайдете на yarn, вы перейдете на чужой адрес частного домена npm

Адрес проекта после личной копии:GitHub.com/contract-sauce/fo…

Vue3 в настоящее время находится в версии rc.Согласно моему текущему использованию, jsx не рекомендуется, по крайней мере, не в режиме ts, потому что официальное определение ts не идеально. а также. Слишком много ям, чтобы заполнить их ts+vue3+jsx.

На самом деле сам vue3 используется далеко не всеми.composition-apiОпыт разработки Vue2 на самом деле очень похож. Но лично для проектов уровня предприятия я не рекомендую обновлять vue2 до 3, слишком большие изменения. Обычно можно использовать 2 и 3. И есть апгрейд 2.7 за 2. Для некоторых старых проектов переход с cli2 на 3 сам по себе очень болезненный процесс. Если основная библиотека нуждается в замене, изменения слишком велики. Будущее определенно за vue3, но и 2 определенно существует.

Основная тема: Какую проблему мы хотим решить в отношении визуального развития?

Позвольте мне сначала взорвать его, мне все больше и больше нравится Мастер Зала Чжэн Цайюнь. Каждый раз, когда я рано утром разговариваю с Мастером Большого Зала, слова всегда такие простые, глубокие и понятные.

Тогда идея о том, почему существует визуальное развитие, заключается в том, что я раньше был сотрудником системы пространственно-временной медицины. Имеется комплект визуальной двухстворчатой ​​системы под пространственно-временной системой, что значительно снижает стоимость разработки. Кроме того, компания Time and Space Medicine расположена в провинции Цзянсу и достигла заполняемости рынка более чем на 90%. Его используют все оптовые фармацевтические компании.

После этого я перешел к переднему краю и увидел макет визуального торгового центра Zhengcaiyun в Nuggets. Недавно я видел исходный код вышеуказанного проекта. После неоднократных назиданий у меня сложилось определенное суждение о сути визуализации.

1. Компоненты можно перетаскивать, будь то перетаскивание HTML5 или перетаскивание пользовательской позиции.

2. Как вы решаете проблему динамического рендеринга компонентов в сегодняшнем интерфейсном фреймворке?

3. После запуска продукта вы не сможете получить базовую библиотеку. Итак, как решить проблему с загрузкой страниц

1. О перетаскивании

На самом деле тащить не сложно, но суть каждого в том, чтобы это делать. Это выглядит просто, но кто знает, как это сделать?

На самом деле существует два типа решений для перетаскивания.

1, html5 перетаскивание

2. Верхнее, левое и другие значения стиля пользовательского элемента

Я выбираю перетаскивание html5 здесь, в основном потому, что перетаскивание html решает несколько проблем.

1. Лучше перетаскивать

2. Может определить, какой элемент перетаскивается под

Код здесь очень простой, на самом деле каждый может сделать это, немного потренировавшись.

Ядра три:

draggable="true", найдите перетаскиваемый элемент

куда перетащить

ondragstart начать перетаскивание

HTML-раздел

<template v-for="(item, index) in list">
  <div
    :key="index"
    @dragover.prevent
    @drop.prevent="drop($event, index)"
    draggable="true"
    @dragstart="dragstart($event, index)"
    class="ceshi"
  >
    {{ item }}
  </div>
</template>

JS-часть

setup(props, ctx) {
    const list = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]).value
    const setArr = (): void => {
      list[0] = 1111
    }
    // 开始移动
    const dragstart = (ev: Event, index: number): void => {
      ev.dataTransfer.setData('text', index)
    }
    // 放到何处
    const drop = (ev: Event, index: number): void => {
      const startIndex: number = Number(ev.dataTransfer.getData('text'))
      const startLi: number = list[startIndex]
      const endLi: number = list[index]
      list.splice(index, 1, startLi) // 放过去
      list.splice(startIndex, 1, endLi) // 反过来
    }

    return {
      drop,
      dragstart,
      list,
      setArr,
    }

Код очень простой, не так много объяснений. Это фактически решает проблему перетаскивания. Ваши элементы уже могут менять местами изначально

1.1. Новички ТС наступают на яму во время процесса перетаскивания, спасибо группе WeChat: Mr. Mumu за решение головоломки

С базовым объявлением переменной ts проблем нет, но все задумывались над тем, как объявить тип нативного события js.После объявления объекта нельзя определить следующую операцию. Ну, т.с. официальный здесь на самом деле довольно жалкий, и нет явного заявления. На самом деле, ts имеет встроенный тип Event.

Но событие было недостаточно, когда я использовал, например, следующий код будет жаловаться

ev.dataTransfer.setData('text', index)

Тогда нам действительно нужно использовать определение gobal.d.ts в каталоге src.

переопределить следующим образом

declare interface Event {
  dataTransfer: {
    setData(...args): void
    getData(...args)
  }
}

1.2, vue3 framework ts наступает на яму

Мы все знаем, что в vue2 у всех нас есть этот объект, указывающий на экземпляр vue3, поэтому, если мы перейдем на vue3. первое использованиеcomposition-apiВы не можете использовать это. Затем вы можете использовать только предоставление, инъекцию для внедрения зависимостей. Это произведение рекомендуется просмотреть быстро.

Значит, мы действительно не можем использовать это?

Не совсем,composition-apiПросто выбор вашего режима развития. По сути, vue3 сохраняет оригинальный метод записи жизненного цикла. Вы все еще можете писать как старый код. Но this из vue3 создается vue и размещается глобально. Чтобы быть совместимым со старым кодом, мы должны использовать

app.config.globalProperties

вместо vue.prototype

Однако у vue3 есть проблема в режиме ts.Когда я определяю его в приведенном выше коде, проблем с определением нет. Но в конце концов, когда я его использовал, переменная this.была ts и сообщалось об ошибке. Решение

// 解决ts下全局变量定义问题
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    http: number
  }
}

Для получения подробной информации вы можете найти проблему в проекте vue-next и выполнить поиск globalProperties.

Кстати говоря, на самом деле все выяснили, что vue3 сохраняет оригинальный метод разработки API. Поэтому, пожалуйста, перестаньте говорить о разрушительных обновлениях для новичков.composition-apiНа самом деле это просто метод разработки, который был объединен с vue3.

Я просто новичок о TS, пожалуйста, не распыляйте, спасибо

2. О динамических компонентах

На самом деле, у Vue есть решение для этого очень рано, и команда Zhengcaiyun также опубликовала блог Nuggets. Решение

<component :is="DynamicComponents"></component>

Переданный формат должен быть именем переменной компонента, который вы импортировали.

Фактическая часть js

setup(props, ctx) {
  console.log({ ...ctx })
  // 动态组件测试
  const dom = ref(-1).value
  console.log(dom)

  const DynamicComponents = ref('DynamicComponents')
  const setDynamicComponents = (): void => {
    DynamicComponents.value = 'DhtTest'
    console.log(DynamicComponents.value)
  }

  return {
    setDynamicComponents,
    DynamicComponents,
  }

Таким образом, мы решили основную большую проблему, а остальное - конкретное определение и развитие.

3. Об удаленной загрузке компонентов

Это должно сначала поговорить о Vue по требованию.

Во-первых, загрузка по требованию vue3 использует разделение кода webpack, а затем фактически каждый раз, когда мы переходим на новую страницу, выполняется раздел.

Скрипт сам удаленно получает данные с сервера и загружает их. Так могут ли наши компоненты делать то же самое?

Это похоже на функцию webpack5? Как насчет микрофронтендов?

Здесь рекомендуется инструмент, но он еще не использовался в реальном бою. Но в принципе нет абсолютно никакой проблемы.

vue-модуль-загрузчик:GitHub.com/Mother River2007/vu…

Удаленная загрузка компонентов по запросу, давайте посмотрим

4. Резюме и кодовый адрес

Я могу быть слишком циничным и слишком сентиментальным. Но я все равно это сказал.

Тогда об этом коде проекта:GitHub.com/contract-sauce/vi…

Ну, в целом, код не очень технический. Больше технической идеи и мышления.

Категории