Шаг за шагом построить фронтенд архитектуру на основе vue3 из 16 направлений

внешний интерфейс Vue.js
Шаг за шагом построить фронтенд архитектуру на основе vue3 из 16 направлений

предисловие

из-заvue3.2выпуск версии,<script setup>Флаг эксперимента был удален, что означает, что это предложение грамматики было официально использовано, и мне лично это решение очень нравится, другимвозобновитьПожалуйста, узнайте сами. На данный момент я думаю, что vue3 полностью готов к производству. Здесь я подытожу свой опыт разработки и поделюсь им с вами.

Я думаю, что основной задачей архитектуры интерфейса является настройка набора решений, подходящих для текущих потребностей бизнеса, тем самым снижая сложность технической реализации, вызванную увеличением спроса. Далее я постепенно поведу вас к созданию собственного набора строительных лесов из 16 направлений, сформулирую набор разумных решений, заложу хороший фундамент для проекта и сформирую подходящие привычки развития вместе с вашими коллегами.

Из-за проблемы с пространством основная идея состоит в том, чтобы объяснить идеи реализации.Я надеюсь, что все смогут говорить любезно и вместе добиваться прогресса!

содержание

1. Построить строительные леса

использоватьvue-cliилиvite, с помощью ряда конфигураций инициализируйте шаблон разработки без создания среды разработки с нуля, что может эффективно повысить эффективность разработки и считается способом, которым большинство разработчиков берут на себя новый проект. Хотя строительные леса, предоставленные официальным лицом, достаточно хороши, они могут не соответствовать привычкам использования нашей собственной команды, поэтому разработка собственных лесов на основе официального может еще больше повысить эффективность разработки.

1.1 Какие функции должны выполнять фасадные леса?

  • Сократите повторяющуюся работу по инициализации, не нужно копировать другие подобные проекты для удаления лишнего кода или создавать проект с нуля.
  • В соответствии с потребностями команды соответствующая структура каталогов и файлы могут быть созданы с помощью простых интерактивных операций.
  • Унифицируйте привычки разработчиков и стиль кода команды, чтобы обеспечить согласованность результатов построения.
  • Полная документация по использованию снижает затраты на запуск, разработку и последующее обслуживание для новичков.

1.2 Как разработать собственные леса?

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

1.3 Как генерировать файлы на основе опций?

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

В плане взаимодействия учащиеся, соорудившие строительные леса, должны знатьinquirer, эта библиотека может легко получить некоторые пользовательские параметры конфигурации по нашему выбору с помощью интерактивных операций. Так вот вопрос, как создать соответствующие файлы через эти конфигурации?

Здесь я рекомендую использоватьEJS + PrettierСгенерировать код,fs-extraЗапишите окончательный файл.

  • EJS

EJSЭто механизм шаблонов JavaScript. Мы можем генерировать соответствующие строки кода, передавая параметры, такие как созданиеpackage.ejsиспользуется для созданияpackage.json, если мы решим использоватьscssкак препроцессор CSS, затемsassа такжеstylelint-scssКак зависимость установки проекта:

<% if (precss === 'scss') { -%>
  "sass": "1.26.5",
  "stylelint-scss": "^3.20.1",
<% } -%>

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

  • Prettier

PrettierЭто инструмент форматирования кода, я думаю, что все знакомы с ним. Целью использования EJS для генерации является чтение и редактирование разработчиками, поэтому сгенерированный код должен соответствовать окончательным требованиям к формату, потому что мы добавим такие инструменты, как ESLint и StyleLint в скаффолдинг, а в конце есть куча красных линий. проект только что создан, но он очень недружественный оф.

import prettier = require("prettier");
prettier.format(code, { parser: 'json' }))

parserЭто более красивый синтаксический анализатор, и можно форматировать обычные машинописные, css, less, json и другие файлы.

2. Создание базового шаблона на основе vite

Когда я впервые построил скаффолдинг vue3, я решил использовать vue/cli для его сборки.Из-за ненадежной экологии некоторые функции на основе веб-пакета нельзя было использовать, но теперь экология vite относительно завершена, поэтому скаффолдинг был рефакторинг, от webpack до vite, этот шаг значительно улучшил процесс разработки.

2.1 Создание базового шаблона проекта

npm init vite@latest
yarn create vite
pnpm create vite

Затем следуйте инструкциям.Vite предоставляет несколько вариантов, только vue или vue + ts, в отличие от vue/cli, который предоставляет так много методов настройки, поэтому остальные необходимо настроить вручную.

Конечно, vite также предоставляет множество шаблонов, но мне кажется, что сложение сделать проще, чем вычитание, и найти среди множества шаблонов подходящий для нас сложно.

2.2 Рекомендуемые часто используемые плагины

Вот краткое введение в несколько полезных плагинов vite:

  • unplugin-vue-components: Автоматический импорт компонентов по требованию.
  • vite-plugin-svg-icons: Используется для создания изображений спрайтов svg.
  • vite-plugin-compression: используйте gzip или brotli для сжатия ресурсов.

Почему рекомендуется так много плагинов? потому чтоviteслишком многоwebpackнеобходимо установитьloaderилиpluginВсе они имеют естественную поддержку, такую ​​как less, sass, typescript, и их использование будет объяснено в соответствующих главах позже.

3. Используйте машинопись

Версия vue2.x с поддержкой TypeScript имеет недостаткиВ то время как способность TypeScript защищать большие проекты общепризнана. Это была очень дружелюбная поддержка в выпуске vue3.x.

Представлено Vite Natural Support.tsдокумент.

Вот некоторые изменения в tsconfig.json:

{
  "compilerOptions": {
    "types": ["vite/client"],
    "baseUrl": "src",
    "paths": {
      "@/*": ["./*"]
    }
  },
  "exclude": ["node_modules"]
}

При использовании typeScript в первые дни многие люди хотели использовать тип any и писать typeScript как anyScript.Хотя он очень удобен в использовании, он теряет смысл проверки типов машинописного текста.Конечно, привычка писать типы должна быть Медленно культивируется, не торопясь некоторое время.

4. Настройте переменные среды

vite предоставляет два режима: разработка с сервером разработки и производство.

Здесь мы можем создать 4.envфайлы, общая конфигурация и три окружения: dev, test, production.

4.1 Режим конфигурации

NODE_ENV=development # 开发模式
NODE_ENV=production # 生产模式
  • .env Общая конфигурация, лично мне нравится использовать его в качестве файла конфигурации проекта, например, название проекта, этот файл не соответствует ни одному режиму.
  • .env.development Среда разработки, используйте режим разработки.
  • .env.staging, используйте рабочий режим, если вы хотите выполнить развертывание на тестовом сервере, или используйте команду serve для локального предварительного просмотра.
  • .env.production Рабочая среда, поскольку вы хотите выполнить развертывание на тестовом сервере или использовать команду serve для локального предварительного просмотра, поэтому используйте рабочий режим.

Сценарий в package.json должен добавить промежуточную команду

"script": {
  "build": "vue-tsc --noEmit && vite build",
  "staging": "vue-tsc --noEmit && vite build --mode staging",
  "serve": "vite preview --host"
}

4.2 Часто используемые переменные среды

Рекомендуются следующие три общие переменные:

  • VITE_APP_BASE_URL

Адрес запроса интерфейса.

Обычно серверная часть различает три среды и развертывает их по разным адресам.

  • VITE_APP_STATIC_URL

Статический адрес ресурса.

Я не рекомендую размещать статические ресурсы непосредственно в проекте, что приведет к тому, что репозиторий проекта станет огромным.

Для локальной среды разработки и тестирования я предпочту использовать сервер статических ресурсов, созданный локально.Вы можете попросить одноклассников по эксплуатации и обслуживанию помочь вам создать его, или вы можете использовать http-сервер для локального запуска сервера. Рекомендуется загрузить производственную среду в OSS.

  • VITE_PUBLIC_PATH

Создавайте общедоступные пути к ресурсам.

Это то же самое, что и publicPath в vue/cli.Иногда проект, который вы создаете, не хранится по следующему пути, напримерhttp://ip:port/{项目名}.

4.3 Инкапсуляция файлов статических ресурсов

Если вы настраиваете переменную среды статического ресурса VITE_APP_STATIC_URL, вам необходимо инкапсулировать следующие две вещи:

  • Возвращает фактическую функцию адреса ресурса в соответствии со средой.
  • Простые в использовании компоненты статических ресурсов.

baseStaticUrl.ts

// 处理静态资源链接
export default function baseStaticUrl(src = '') {
  const { VITE_APP_STATIC_URL } = import.meta.env;
  if (src) {
    return `${VITE_APP_STATIC_URL}${src}`;
  }
  return VITE_APP_STATIC_URL as string;
}

компоненты статических ресурсов

Есть три распространенные формы статических ресурсов: изображения, аудио и видео.

  • Запишите относительный путь через src и используйте приведенные выше функции для завершения полного пути, чтобы статические ресурсы с разными адресами можно было использовать в разных средах.
  • Передайте тип изображения, аудио и видео через тип.
  • Автовоспроизведение предназначено для решения проблемы, из-за которой видео не может воспроизводиться автоматически, когда видео используется в качестве фона.
<script lang="ts" setup>
import { computed, ref, Ref, withDefaults, onMounted, watch } from 'vue';
import { baseStaticUrl } from '@/libs/utils';
import useDevice from '@/hooks/useDevice';

interface Props {
  src?: string;
  type?: string;
  autoplay?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  src: '',
  type: 'img',
  autoplay: true,
});

const envSrc = computed(() => baseStaticUrl(props.src));
// 处理视频自动播放（解决 chrome 无法自动播放的问题）
const { deviceType } = useDevice();
const poster = computed(() =>
  deviceType.value === 'desktop' ? '' : baseStaticUrl(props.src),
);
const videoRef: Ref<HTMLVideoElement | null> = ref(null);

// 解决移动端视频无法自动播放的问题
function videoAutoPlay() {
  if (props.type === 'video' && videoRef.value !== null) {
    videoRef.value.src = baseStaticUrl(props.src);
  }
  if (props.autoplay && videoRef.value) {
    videoRef.value.oncanplay = () => {
      if (videoRef.value) videoRef.value.play();
    };
  }
}

// 自动播放视频
onMounted(() => { videoAutoPlay();});
// 监听视频 src，如果存在则自动播放

watch(envSrc, () => { if (videoRef.value) videoRef.value.play(); });
</script>

<script lang="ts">
export default { name: 'StaticFile' };
</script>

<template>
  <img v-if="type === 'img'" :src="envSrc" />
  <video ref="videoRef" v-else-if="type === 'video'" muted :poster="poster" />
  <audio v-else :src="envSrc" />
</template>

4.4 УпаковкаSVGкомпонент значка

Значок svg относительно мал и представляет собой читаемый текст xml, поэтому мы можем поместить его непосредственно в проект черезvite-plugin-svg-iconsПлагин для автоматического импорта значков svg.

Настройте vite.config.ts:

plugins: [
  viteSvgIcons({
    iconDirs: [resolve(process.cwd(), 'src/assets/icons')],
    symbolId: 'icon-[dir]-[name]',
  }),
]

Оберните компонент vue:

<script setup lang="ts">
import { computed, withDefaults } from 'vue';

interface Props {
  prefix?: string;
  name?: string;
  color?: string;
}

const props = withDefaults(defineProps<Props>(), {
  prefix: 'icon',
  name: '',
  color: '#000',
});

const symbolId = computed(() => `#${props.prefix}-${props.name}`);
</script>

<template>
  <svg aria-hidden="true">
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

Сначала поместите загруженный значок .svg в папку @/assets/icons.

<svg-icon name="" color="" />
  • name Имя файла, помещенного в папку @/assets/icons.
  • цвет заливки цветом, используйте это, чтобы переопределить цвет значка по умолчанию.

5. Автоматический импорт компонентов по запросу

unplugin-vue-componentsЭто очень мощный плагин (настоятельно рекомендуется), основная функция которого заключается в том, чтобы помочь вам автоматически вводить компоненты по запросу, встряхивать дерево и регистрировать только те компоненты, которые вы используете. Позвольте мне рассказать здесь о двух его основных методах использования и конфигурации.

Этот плагин поддерживает не только vue3, но и vue2, а также Vite, Webpack, Vue CLI, Rollup.

5.1 Установка и настройка

Установить:

npm i unplugin-vue-components -D

Конфигурация:

// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({ /* options */ }),
  ],
})

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

5.2 Изменение метода регистрации глобального компонента

Обычно мы инкапсулируем глобальные компоненты в@/src/components, затем черезapp.component()Зарегистрируйте глобальные компоненты. После использования этого плагина вам не нужно регистрироваться вручную, вы можете использовать компонент прямо в шаблоне:

Вот официальный пример:

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

Автоматически компилируется в:

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script>
import HelloWorld from './src/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

5.3 Автоматический импорт библиотеки компонентов

При использовании библиотеки компонентов мы также будем регистрировать обычные компоненты глобально. Если мы используем локальную регистрацию, это будет очень хлопотно, потому что на странице будет использоваться несколько компонентов, поэтому эта функция превосходна. Например, мы используем ant-design библиотека компонентов -vue.

Его можно использовать прямо в шаблоне без ручной регистрации или локальных ссылок:

<template>
  <a-button>按钮</a-button>
</template>

Конечно, вам также нужно импортировать его парсер в vite:

import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    Components({
      resolvers: [
        AntDesignVueResolver(),
      ]
    })
  ],
})

Поддерживаемые в настоящее время парсеры, выберите в соответствии с вашими предпочтениями:

6. Стиль

Лучше всего использовать общие стили в вашем проекте, вы можете создатьsrc/stylesХранение каталогов, вот некоторые рекомендуемые категории:

styles
  ├── antd # 组件库样式覆盖，命名自取，这里以 ant design 为例
  ├── color.less # 颜色
  ├── index.less # 入口
  ├── global.less # 公共类
  ├── transition.less # 动画相关
  └── variable.less # 变量

6.1 Предустановленные базовые стили

считаю использованнымnormalizeУ него немало учеников, он может сбрасывать стиль css, чтобы эффект от каждого браузера был одинаковым. В последующих главах будет упоминаться файл tailwind.css со встроенной функцией сброса предустановленных стилей, которая отличается от функции нормализации.Узнать о.

6.2 Препроцессор CSS

Хотя vite изначально поддерживает less/sass/scss/stylus, вам необходимо вручную установить их препроцессорные зависимости, например:

npm install -D less

Как выбрать предварительный процессор?

Рекомендуется использовать язык стилей библиотеки компонентов, которую вы используете, потому что после изучения одного из препроцессоров css почти нет затрат на изучение другого.

6.3 Включить область действия

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

<style scoped></style>

6.4 Селектор глубины

Иногда мы можем захотеть явно создать правило для подкомпонентов.

Если вы хотите, чтобы селектор в стиле с ограниченной областью пошел «глубже», например, воздействуя на дочерние компоненты, вы можете использовать оператор >>>. Некоторые препроцессоры, такие как Sass, не разбирают >>> правильно. В этом случае вместо этого вы можете использовать операторы /deep/ или ::v-deep — оба являются псевдонимами для >>> и будут работать одинаково хорошо.

7. Макет

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

В скаффолдинге все компоненты общего макета должны быть размещены в src/layouts.Этот тип инкапсуляции относительно прост, поэтому я не буду размещать код здесь.Каждый может играть в соответствии со своей реальной ситуацией, и только предлагать идеи упаковки. здесь.

7.1 Общий вид

BasicLayout

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

BlankLayout

Пустой макет.

7.2 Специальные схемы

RouteLayout

Если вашему проекту необходимо кэшировать некоторые вторичные страницы во время переключения маршрута, рекомендуется создать RouteLayout и routemetaконфигурация в , возвращаетrouter-viewили использоватьkeep-aliveзавернутыйrouter-view.

UserLayout

Он используется для извлечения таких страниц, как вход пользователя и регистрация.

PageLayout

Базовая компоновка, включая хлебные крошки и другую информацию, включая слоты.

8. Интегрируйте Tailwind.css

Tailwind.cssКогда я увидела его в первый раз, мне стало противно внутри, но на самом деле я почувствовала настоящий аромат после того, как прикоснулась к нему. Из проекта vue2 я представил попутный ветер, общий результат разработки заключается в том, что он редко используется снова.<style>Метка используется для определения некоторых классов и стилей, ведь имя связано со спецификацией, а другое связано с английским языком. Если вы выберете попутный ветер, препроцессор CSS будет мало полезен, так как вам больше не нужно определять различные переменные и примеси.

В целом стоимость обучения невелика, для начала требуется два часа, и помните, что не следует запоминать названия классов наизусть.

8.1 Повышение эффективности

Многие люди всегда говорят, что стили должны быть отделены от HTML.Почему вы продвигаете tailwind, инструмент, который тесно интегрирован с HTML? Это связано с тем, что такие фреймворки, как vue, теперь сильно компонентизированы, а разделение стилей предназначено для удобства повторного использования и обслуживания, но перед компонентизацией разделение стилей может только снизить эффективность разработки.

Вот посмотрите на функции повышения эффективности, которые предоставляет попутный ветер:

  • Предоставляет большое количество функциональных классов, что значительно улучшает ремонтопригодность.
  • Адаптивный дизайн, челнок под разные устройства.
  • Наведение, фокус и другие состояния.
  • темный режим.
  • Конфигурацию поддержки, такую ​​как цвет, трудно унифицировать с вашим дизайнером.
  • Не беспокойтесь об имени???

8.2 JIT-режим

Если ваша среда поддерживает postcss8 (проект vue2, созданный vue/cli, называется postcss7), тоJITРежим доставит вас прямо к взлету.

  • Сверхбыстрая скорость сборки.
  • Поддерживаются варианты, можно даже написатьsm:hover:active:disabled:opacity-75.
  • Поддерживаются произвольные стили, например.md:top-[-113px].
  • Результаты разработки и производственной среды согласованы (я столкнулся с проблемой противоречивых результатов сборки библиотеки компонентов в проекте vue2).

Если вы используете vscode, вы должны установитьTailwind CSS IntelliSenseПлагин, который может автоматически выполнять имена классов, значительно снижая расходы на обучение.

8.3 Об объеме упаковки

В конфигурации по умолчанию несжатый3739.4kB, сжатие Gzip — 293,9 КБ, сжатие Brotli — 73,2 КБ. Это может показаться большим делом, потому что tailwind предоставляет тысячи функциональных классов, большинство из которых вы не будете использовать.

При сборке для производства вы должны использовать опцию очистки, чтобыtree-shakeОптимизируйте неиспользуемые стили и оптимизируйте окончательный размер сборки.При использовании Tailwind для удаления неиспользуемых стилей трудно получить больше, чем10kbСжатый CSS.

Еще кое-что,Atom CSSЭто значительно повышает степень повторного использования стилей, тем самым напрямую уменьшая объем сборки.

9. альтернативная пиния vuex

из-заvuex 4Поддержка typescript была печальной, поэтому управление состоянием отказалось от vuex в пользуpinia.

Я забыл, где я это видел, Ю Да, кажется, говоритpiniaМожет заменить vuex, так что используйте его с уверенностью.

9.1 Зачем использовать Pinia?

  • PiniaДизайн API очень близокVuex 5изпредложение. (Автор является членом основной команды Vue)
  • нет необходимости, какVuex 4Настройте сложные типы для поддержки машинописного текста с идеальным выводом типов по своей природе.
  • Модульная конструкция, каждый магазин, который вы импортируете, может автоматически разделять их при упаковке.
  • Нет вложенной структуры, но вы можете перекрестно комбинировать между любым магазином.
  • Piniaа такжеVue devtoolsХуки не повлияют на опыт разработки Vue 3.

Далее кратко рассказывается, как использовать Pinia, и сравниваются различия и меры предосторожности vuex.официальная документация.

9.2 Создать магазин

Pinia уже встроена в скаффолдинг и привязана к vue, вы можете создать магазин где угодно:

import { defineStore } from 'pinia'

export const useUserStore = defineStore({
  id: 'user',
  state: () =>({}),
  getters: {},
  actions: {}
})

Это очень отличается от Vuex, который является стандартным экспортом модуля Javascript, таким образом, также делает более понятным для разработчика и вашей IDE, откуда берется хранилище.

Разница между Pinia и Vuex:

  • idнеобходимо подключить используемый магазин к devtools.
  • Как создать:new Vuex.Store(...)(vuex3),createStore(...)(Векс4).
  • В отличие от vuex3, состояние теперьфункция возвращает объект.
  • нетmutations, не волнуйтесь, изменения состояния все еще записываются в devtools.

9.3 State

После создания магазина вы можете создать некоторые свойства в состоянии:

state: () => ({ name: 'codexu', age: 18 })

Задайте для свойства состояния в хранилище функцию, которая возвращает объект, содержащий различные значения состояния, подобно тому, как мы определяем данные в наших компонентах.

Использовать магазин в шаблоне:

Теперь мы хотим получить состояние имени из хранилища, нам просто нужно использовать следующий метод:

<h1>{{userStore.name}}</h1>

const userStore = useUserStore()
return { userStore }

Обратите внимание, что нет необходимости вuserStore.state.name.

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

const { name, email } = useUserStore()

9.4 Getters

Геттер в Pinia имеет ту же функцию, что и геттер в Vuex, и вычисляемое свойство в компоненте.Традиционное объявление функции использует это вместо метода передачи параметра состояния, но стрелочная функция по-прежнему должна использовать первый параметр функции для получить состояние, потому что стрелочные функции обрабатывают область этого:

getters: {
  nameLength() {
    return this.name.length
  },
  nameLength: state => state.name.length,
  nameLength: ()=> this.name.length ❌ 
}

9.5 Actions

Это очень отличается от Vuex, Pinia только предоставляет способ определить правила изменения состояния,Откажитесь от мутаций и полагайтесь только на Действия, что является серьезным изменением.

Pinia делает действия более гибкими:

  • в состоянии пройтикомпонентыили другиеactionпередача
  • Доступна сдругой магазинвызывается в действии
  • Вызывается непосредственно в экземпляре магазина
  • служба поддержкиСинхронизироватьилиасинхронный
  • иметь любое количество параметров
  • Может содержать логику о том, как изменить состояние (это то, что делают мутации vuex)
  • Могу$patchметод прямого изменения свойства состояния
actions: {
  async insertPost(data){
    await doAjaxRequest(data);
    this.name = '...';
  }
}

9.6 Devtools

В Scaffolding встроен следующий код, который добавит поддержку devtools:

import { createPinia, PiniaPlugin } from 'pinia'

Vue.use(PiniaPlugin)
const pinia = createPinia()

Функция путешествия во времени вроде бы готова к использованию, и я обращу на это внимание позже.

10. Обработка связи событий между компонентами на основе mitt

Если вы когда-либо были разработчиком Vue2.x, прочитайте приведенную ниже цитату.официальная документацияПрохождение:

Мы полностью удалили из экземпляра$on,$offа также$onceметод.$emitВсе еще включен в существующий API, поскольку он используется для запуска обработчиков событий, которые декларативно добавляются родительским компонентом.

В Vue 3 больше нельзя использовать эти API для прослушивания событий, создаваемых самим компонентом изнутри компонента, и для этого варианта использования нет метода миграции. Но шаблон eventHub можно заменить внешней библиотекой, которая реализует интерфейс триггера события, например.mittилиtiny-emitter.

10.1 Почему стоит выбрать рукавицу?

  • Достаточно маленький, всего 200 байт.
  • Поддерживает мониторинг и пакетное удаление всех событий.
  • Никаких зависимостей, независимо от того, какой фреймворк можно использовать напрямую.

10.2 СЕРЬЕЗНОЕ ПРЕДУПРЕЖДЕНИЕ

Нам не удалось использовать в проектеeventBus, рекомендуется толькоОсобый случайИспользуйте рукавицу ниже,Это не норма для развития, вы должны убедиться, что знаете, что делаете? В противном случае ваш проект будет сложно поддерживать! ! !

10.3 Как использовать рукавицу?

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

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

import emitter from '@/libs/emitter';

Конечно, вы также можете импортировать уже установленную рукавицу:

import mitt from 'mitt'

const emitter = mitt()

mitt предоставляет очень простой API, следующий код является официальной демонстрацией:

// listen to an event
emitter.on('foo', e => console.log('foo', e) )

// listen to all events
emitter.on('*', (type, e) => console.log(type, e) )

// fire an event
emitter.emit('foo', { a: 'b' })

// clearing all events
emitter.all.clear()

// working with handler references:
function onFoo() {}
emitter.on('foo', onFoo)   // listen
emitter.off('foo', onFoo)  // unlisten

11. Асинхронные запросы

Большинство проектов не должны иметь возможности избежать стыковки интерфейсов.Если в вашем проекте большое количество интерфейсов, я рекомендую следующее:

  • Инкапсулируйте запрос.
  • Управление единым интерфейсом API.
  • Функция фиктивных данных (используйте на свое усмотрение).

Основная цель вышеизложенного — помочь нам упростить код и облегчить последующее обновление и обслуживание.

11.1 Упаковка на основе аксиом

Я считаю, что студенты, которые разрабатывали проекты vue2, уже хорошо знакомы с axios.Вот несколько идей для упаковки:

  • пройти черезimport.meta.env.VITE_APP_BASE_URLПолучить переменные окружения, настроитьbaseURL, если в интерфейсе несколько разных доменных имен, им можно управлять с помощью переменных js.
  • настраиватьtimeoutВремя ожидания запроса и обработка отключения от сети.
  • настраиватьзаголовок запроса,нестиtoken.
  • Обработка перехвата исключений, серверная часть проходит черезtokenОпределите, истек ли срок действия, если вернетесь401Возможно, вам придется перейти на страницу входа, и вам будет предложено снова войти в систему.
  • Перехват ответаОбычно возвращается внутренним кодом, данными, сообщением, если запрос нормальный, мы можем напрямую вернуть данные данных, если это ненормальный код, мы можем ввести здесь прямое сообщение об ошибке.
  • Бессмысленный токен обновления, если срок действия вашего токена истек, вы можете вызвать интерфейс обновления через refreshToken, возвращенный серверной частью, чтобы получить новый токен. Конечно, здесь задействовано много деталей, таких как терминальные запросы, запросы на повторную отправку и очереди повторных запросов.
  • запрос на прерывание, такие как переключение страниц, мы хотим прервать текущий запрос.

Соответствующий код (только для справки)

11.2 Добавление поддержки дженериков в axios

До сих пор тип, возвращаемый запросом axios, был any.В настоящее время, когда мы оперируем запрошенными данными, нам не нравятся подсказки типов, приносимые ts, что явно не соответствует нашим ожиданиям.

Все, что нам нужно сделать на этом этапе, — это повторно объявить модуль axios: создать новый файл shims.d.ts и добавить в вызов дженерики.

import { AxiosRequestConfig } from 'axios';

declare module 'axios' {
  export interface AxiosInstance {
    <T = any>(config: AxiosRequestConfig): Promise<T>;
    request<T = any>(config: AxiosRequestConfig): Promise<T>;
    get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
    delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
    head<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
    post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
    put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
    patch<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
  }
}

После этого вы должны объявить тип данных, запрашиваемых при создании интерфейса.

11.3 Инкапсуляция более удобного useRequest

Представьте, что при написании кода запроса мы обычно определяем несколько таких переменных:

  • data: сохранить данные запроса
  • loading: статус загрузки запроса

Особенно загружая, нам нужно установить его в true перед запросом и установить в false после запроса.

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

Например, это выглядит так:

Определите интерфейс с помощью useRequest:

export default getUserInfo(id) {
  return useRequest({
    method: 'get',
    url: '/api/user',
    params: { id }
  })
}

Используйте этот интерфейс:

const { data, loading } = getUserInfo();

Обратите внимание, что данные здесь являются адаптивными.

Это идея, которая пришла мне в голову, и я еще не сделал хороший пакет.Соответствующий код только для справки, вы также можете поучиться у некоторых зрелых решений, таких как vueuse вuseFetch, но он разработан на основе Fetch API, который не соответствует моим ожиданиям. Если есть лучшее решение, оставьте сообщение ниже.

11.4 Управление интерфейсом унифицированного API

Поскольку фронтенд и бэкэнд разделены, стыковка интерфейсов фронтенда и бэкенда стала нормой, а процесс стыковки интерфейса неотделим от документа интерфейса. лучше управлять стыковкой с бэкендом в интерфейсе фронтенд проекта?

Создайте каталог API в каталоге src, а внутренний каталог должен быть создан в соответствии с модулем, указанным бэкэндом.

Создайте несколько ts-файлов в каждом модуле, одному интерфейсу должен соответствовать один ts-файл, содержащий следующее содержимое:

  • проситьпараметробъявление типа.
  • откликданныеобъявление типа.

11.5 mock

vite-plugin-mock

  • createRouterHashHistory
  • permission.ts

vite-plugin-compressiongzipbrotli.gz

nprogress

import NProgress from 'nprogress';

router.beforeEach(async (to, from, next) => {
  NProgress.start();
});

router.afterEach((to) => {
  NProgress.done();
});

13.3 Title

useTitle

const { VITE_APP_TITLE } = import.meta.env;

postcss-viewport-height-correction

npm install -D postcss-viewport-height-correction


module.exports = {
  plugins: {
    'postcss-viewport-height-correction': {},
  },
}


const customViewportCorrectionVariable = 'vh';
function setViewportProperty(doc) {
  let prevClientHeight;
  const customVar = `--${customViewportCorrectionVariable || 'vh'}`;
  function handleResize() {
    const { clientHeight } = doc;
    if (clientHeight === prevClientHeight) return;
    requestAnimationFrame(function updateViewportHeight() {
      doc.style.setProperty(customVar, `${clientHeight * 0.01}px`);
      prevClientHeight = clientHeight;
    });
  }
  handleResize();
  return handleResize;
}
window.addEventListener('resize', setViewportProperty(document.documentElement));

  • vueuse
  • lodash, Используйте его и говорите хорошо, используйте его раньше и уходите с работы раньше.

14. Стиль кода и спецификация процесса

14.1 ESLint

Будь то совместная работа нескольких человек или личный проект, стандарты кода важны. Это не только в значительной степени позволяет избежать основных синтаксических ошибок, но и обеспечивает удобочитаемость кода.

Рекомендуется здесьairbnbТехнические характеристики.

Справочник по конфигурации

14.2 StyleLint

Хоть я и упоминал о попутном ветре ранее, он почти не позволяет вам писать css, но когда дело доходит до командной работы, это тоже должно быть строгим.

StyleLint — это мощный и современный инструмент обнаружения CSS. Подобно ESLint, он помогает нам избежать ошибок в таблице стилей, определяя ряд правил стиля кодирования. Благодаря автоматическому восстановлению редактора он может хорошо унифицировать CSS командного проекта. , стиль.

Справочник по конфигурации

14.3 Спецификации представления кода

В контексте совместной работы нескольких человек важна роль репозиториев git и рабочего процесса. Для информации, отправляемой коммитом, существуют определенные спецификации, которые теперь используютсяcommitlint + huskyУточнение описания в git commit -m "" . Все мы знаем, что при использовании git commit git предложит нам заполнить информацию об этом коммите. Но не стоит недооценивать эти коммиты.Команда стандартизировала коммиты, чтобы каждую запись отправки кода можно было просматривать более четко, а файлы журнала изменений можно было автоматически генерировать в соответствии с пользовательскими правилами.

Формат отправки (обратите внимание на пробел после двоеточия):

<type>[optional scope]: <description>
  • type : Используется для указания типа изменений, которые мы отправили на этот раз.
  • необязательная область: необязательная, используется для определения того, какой модуль в коде в основном задействован в этой фиксации.
  • описание: Опишите основное содержание этого представления в одном предложении и будьте краткими.

Тип

  • build: изменения, связанные с компиляцией, такие как выпуски, изменения в сборках проекта или зависимости.
  • рутинная работа: другие модификации, такие как изменение процесса сборки или добавление зависимых библиотек, инструментов и т. д.
  • ci: модификация непрерывной интеграции
  • docs: модификация документации
  • feat: новые возможности, новые функции
  • исправить: исправить ошибку
  • производительность: связанная с оптимизацией, например, повышение производительности и опыта
  • рефакторинг: рефакторинг кода
  • вернуться: вернуться к предыдущей версии
  • стиль: модификация формата кода, обратите внимание, что это не модификация css
  • тест: модификация тестового примера

Есть много статей о настройке commitlint + husky, которые похожи, пожалуйста, настройте в соответствии с вашей реальной ситуацией.

15. Напишите документацию по использованию

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

15.1 Используйте vitepress для создания документов

Здесь я рекомендую использовать vuepress или vitepress, если честно, вы только пишете документацию, vitepress сделает вас более удобным, потому что это быстро.

vitepressОн очень подходит для создания веб-сайтов блогов и технических документов, потому что его можно писать прямо в уценке. Любой, кто писал блоги, должен быть с ним знаком. Файл .md может генерировать страницу, что очень удобно.

Создать документ vitepress слишком просто, вы можете обратиться к официальному документу или обратиться к моемуДокументация.

15.2 Развертывание документа

Если ваша команда может помочь вам создать автоматическое развертывание CI/CD, было бы здорово.Если у вас нет этого условия, вы также можете выполнить автоматическое развертывание с помощью функции действий, предоставляемой github.

ссылка на код

16. Плагины

Если вы хотите более эффективно использовать вышеуказанные функции, рекомендуется установить следующие плагины.

16.1 Плагины VSCode

16.2 Плагины Chrome

  • Vue.js devtools, конечно, вы должны установить версию, которая поддерживает vue3, и эта версия также очень дружелюбна к поддержке pinia.

исходный код

Вышеупомянутый контент можно найти в моем проекте с открытым исходным кодом.X-BUILDНайдите соответствующий исходный код в , если он может вам помочь, пожалуйста, поставьте звездочку или лайк, чтобы побудить меня участвовать в большем количестве проектов или статей с открытым исходным кодом.

Ссылаться на

Категории