Шаблон Vue, JS, реализация разделения CSS

Vue.js

Vue模板、JS、CSS分离实现

Файл Vue.js по умолчанию используетсяtemplate,style,scriptТри тега объединяют HTML, CSS и JS в один файл.

Этот режим имеет определенные преимущества, то есть, когда стиль, логика и шаблон одного файла VUE относительно просты, приведенная выше структура может значительно уменьшить логическую сложность, а функция страницы и общая структура также ясны с первого взгляда. Однако, когда содержимого функций страницы слишком много, логика взаимодействия сложна, а шаблон вложен в несколько слоев, появится следующее изображение. Сотни тысяч строк кода в одном файле, когда дело доходит до рефакторинга, техническое обслуживание превратится в смоляную яму. Например, следующая картинка (строка 733, все css/js/html смешаны в кучу, что не способствует сопровождению, и логика очень непонятна):
Эту ситуацию можно улучшить с помощью 3 ситуаций:

1. Логика извлекается и повторно вводится компонентами
2. CSS извлекается и повторно вводится через метод @import
3. Извлеките все css/js/html и сохраните только основной входной файл модуля и повторно введите его.

Предыдущие методы 1 и 2 не могут решить проблему разделения модулей и сплоченного разделения модулей и завоевания.В этой статье обсуждается третье решение, и окончательный эффект выглядит следующим образом:


2. Решения

В ответ на эту проблему некоторые люди предложили связанный ПРОБЛЕМА,

GitHub.com/v UE JS/v UE, если…

Итак, друг дал это:

Фактически необходимо трансформировать проект VUX и использоватьvue-builder-webpack-pluginплагин

GitHub.com/PK Сан Кара/В…


3. Установка плагина

npm install vue-builder-webpack-plugin --save-dev

В-четвертых, трансформация упаковки WEBPACK

Для использования этого эффекта требуется проект vuxbuildв каталогеwebpack.base.conf.jsСделайте макияж.
1. Представьте пакет плагинов

const VueBuilder = require('vue-builder-webpack-plugin');

2. найтиmodule.exports = vuxLoader.merge(webpackConfig, {..В разделе кода добавьте код для включения подключаемого модуля.

new VueBuilder({
   path: 'src'
}),

осторожность:srcИсходный каталог для текущего проекта


5. Используйте

Предположим, что имя компонента, который мы хотим создать,SplitComponent.vueа содержание такое:

Теперь цель состоит в том, чтобы разделить html/css/js, уменьшить сложность логики и улучшить ремонтопригодность.
1. Создайте запись:

2. Соберите css:

3. Создайте html:

4. Соберите js:

6. Принцип мелкозернистого разделяй и властвуй в соответствии с небольшими функциями

Основываясь на приведенных выше правилах, мы можем разделить относительно сложный модуль на мелкие функции, которые могут достичь эффекта, показанного на рисунке, а также поддерживать использование подфункциональных модулей, встроенных друг в друга.

7. Автоматически создавать функцию шаблона html/css/js

После приведенного выше преобразования мы обнаружили проблему. Когда имеется более гранулированный контент, то есть когда необходимо создать несколько небольших компонентов, его необходимо постоянно вставлять и копировать. Есть ли способ автоматически создавать скриптоподобная функция, введите имя модуля через команду, может быть создана автоматически? Ответ положительный.
1. Вnpm scriptРасширьте следующие команды:

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

2. Создайте новый generate.js в каталоге сборки.Основная логика заключается в автоматическом создании кода шаблона js/css/html в соответствии с путем и именем компонента, введенным пользователем.Код ключа выглядит следующим образом:

3. Используйте:

В это время он будет сгенерирован в каталоге src/components/vector:

VectorComponent.vue
VectorComponent.vue.css
VectorComponent.vue.js
VectorComponent.vue.html

4. Эффект от работы проекта:

Восемь, анализ принципа плагина

Путем наблюдения мы обнаружили, что все файлы должны иметь суффикс .vue Фактически, это содержимое работает:

В то же время также было обнаружено, что плагин также поддерживает предварительно скомпилированные языки, такие как машинописный текст, sass и другие:

Ключевой шаг, плагин устанавливается в крючок WebPack:

Выше приведен отрывок из краткой идеи реализации.Исходный код ссылки был размещен на github и может быть непосредственно использован в качестве примера крупномасштабного сложного приложения:

GitHub.com/1166544/vUE…

Категории