Vue3 + ant-design-vue легкий старт

Vue.js

Недавно я сделал перерыв в своем плотном графике и прочитал соответствующие документы vue3, подумывая написать что-нибудь для ознакомления с новой версией кода. Бывает, что в текущий момент времени вы можете посмотреть на структуру пользовательского интерфейса vue3, которую вы можете использовать на рынке, и только те, которые принадлежат Али.Бета-версия Ant Design Vue 2.0.0. Так получилось, что element-ui использовался в прошлом, поэтому он родился, чтобы использовать эту структуру для создания очень простой структуры страницы управления фоном.Основная цель - изучить, но практически невозможно использовать его в реальном производстве, в основном для записи процесса обучения. окончательный проект вздесь

Взаимодействие компонентов родитель-потомок

Давайте посмотрим на общий макет страницы.

<!-- App.vue -->
<a-config-provider :locale="locale">
	<a-spin :spinning="spinning" tip="Loading...">
	  <a-layout id="components-layout">
		<Sider :collapsed="collapsed" />

		<a-layout>
		  <Header :collapsed="collapsed" @toggle-collapsed="collapsed = !collapsed" />
		  <Breadcrumb />
		  <a-layout-content :style="{
		  margin: '24px 16px',
		  padding: '24px',
		  background: '#fff',
		  minHeight: '280px',
		}">
			<router-view></router-view>
		  </a-layout-content>
		</a-layout>
	  </a-layout>
	</a-spin>
</a-config-provider>

Здесь прямо скопируйте образец с официального сайта, а затем разберите его на составляющие по шапке, сайдбару и хлебным крошкам. Затем после разделения мне нужно нажать кнопку в голове, чтобы управлять сжатием и расширением боковой панели.Здесь я могу использовать компонент «родитель-потомок», чтобы передать значение через верхний App.vue в качестве моста, или передать значение через Vuex.Я использую первый способ.

Сначала добавьте метод в Header.vue

<!-- Header.vue -->
 <a-layout-header class="header">
    <menu-unfold-outlined v-if="collapsed" class="trigger" @click="toggleCollapsed" />
    <menu-fold-outlined v-else class="trigger" @click="toggleCollapsed" />
	...
</a-layout-header>

В версии vue2.x родителю нужно передатьthis.$emitПередача, но если код написан в настройке, не может использовать это, способ официальных документов - это метод, излучающий во второй настройке параметров в Vue3.x, пропуск стоимость реализации.

// Header.vue
setup(props, { emit }) {
    const toggleCollapsed = () => {
      emit("toggle-collapsed");
    };

    return {
      toggleCollapsed,
    };
  },

На самом деле мне не нужно передавать здесь значение, мне просто нужно коснуться события клика, а затем переключить true/false непосредственно в родительском компоненте.

// App.vue
<Header :collapsed="collapsed" @toggle-collapsed="collapsed = !collapsed" />

Затем сверните изменения в компоненте боковой панели.

<Sider :collapsed="collapsed" />

После этого получение данных, приносимых родительским слоем в компонент боковой панели, аналогично способу vue2.x, вы можете получить их напрямую и использовать.Если вам нужно получить это в настройке, не забудьте добавить параметр props для метода установки.

Мониторинг маршрута

Если маршрут изменяется на боковой панели, я хочу выделить текущую навигацию, и я хочу, чтобы хлебные крошки также отображали соответствующий маршрут.Здесь мне нужно использовать метод просмотра vue3.x.Кроме того, vue3.x также предоставляет A Метод watchEffect. В официальном документе говорится, что отличие заключается в том, что watchEffect может запускать мониторинг немедленно. Здесь я использую watch. Если вы напрямую используете код проекта, сгенерированный официальным скаффолдингом, то версия vue-router должна быть 4.0, что также является причиной использования vue3.x, в 2.x мы используемthis.route**а также**this.маршрут** и **этот.routerПолучить информацию о маршрутизации и управлять маршрутизацией.В версии маршрутизации 4.0 эти два метода размещеныuseRouteа такжеuseRouter, значит для отслеживания смены маршрута нужно следить за изменением useRoute, в качестве примера берем хлебные крошки

// Breadcrumb.vue
import { watch, reactive, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";

export default {
  name: "Breadcrumb",
  setup() {
    const route = useRoute();
    const router = useRouter();

    const state = reactive({
      matched: route.matched,
    });

	// 监听路由变化
    watch(
      () => route,
      (route) => {
        state.matched = route.matched;
      },
      {
        immediate: true,
        deep: true,
      }
    );

    const jumped = (path) => {
      router.push({
        path: path,
      });
    };

    return { ...toRefs(state), jumped };
  },
};

Строю функцию в первом параметре watch чтобы получить useRoute(), а второй параметр это операция после мониторинга изменения Здесь я получаю совпавший массив маршрута и отображаю его на хлебных крошках

// Breadcrumb.vue
 <a-breadcrumb :style="{
      padding: '24px',
      paddingBottom: '0',
    }">
    <template v-if="matched.length > 0">
      <a-breadcrumb-item v-for="item in matched" :key="item.path"><a href="javascript:;" @click="jumped(item.path)">{{
          item.meta.title
        }}</a></a-breadcrumb-item>
    </template>
  </a-breadcrumb>

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

Глобальная настройка axios

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

// main.js
import $http from "./api/axios"

const app = createApp(App);
app.config.globalProperties.$http = $http;

Тогда он немного отличается от vue2.x в реальном использовании.Вам нужно сначала ввести компоненты, предоставляемые vue, в компоненты, которые должны использовать axios.getCurrentInstanceметод, который имеетctx, получить глобальные переменные, что эквивалентно этому в 2.x. Затем используйте мой пользовательский метод $http в ctx

import { ref, getCurrentInstance } from "vue";

export default {
  setup() {
  	...
    const { ctx } = getCurrentInstance();

    ctx.$http({ url: "/test", loading: true });

    return {
      ...
    };
  },
  created() {
    // this.$http({ url: "/test" });
  },

Кстати, если идти по старинке, вcreatedилиmountedиспользоватьthis.$httpЕго тоже можно назвать обычным.

В сочетании с муравьиным дизайном для добавления глобальной загрузки

Мой оригинальный метод $http в сочетании с element-ui для записи эффекта загрузки в перехвате перед запросом.Друзья, которые пользовались element-ui, должны знать, что можно добавить загрузку как услугу, что очень удобно

const loading = this.$loading({
  lock: true,
  text: 'Loading',
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(() => {
  loading.close();
}, 2000)

А вот в ant-design-vue такого метода нет.Чтобы добиться глобальной загрузки, необходимо добавить компонент spin на самый внешний слой.

// App.vue
<a-spin :spinning="spinning" tip="Loading...">
  <a-layout id="components-layout">
		...
  </a-layout>
</a-spin>

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

// strore/index.js
export default createStore({
  state: {
    // 全局loading
    spinning: false,
  },
  mutations: {
  	// 全局loading
    changeSpinning(state, load) {
      state.spinning = load
    },
  }
 }

Затем измените мой исходный код axios. Кроме того, я хочу получать подсказку после успеха или неудачи. Затем мне просто нужно заменить компонент сообщения element-ui на ant-design-vue.

...
import store from "@/store";
import { message } from "ant-design-vue";
...

function $http(options, success, failure) {
  if (!!options.loading && options.loading) {
    store.commit("changeSpinning", true);
  }
  ...
  
  return $axios({...})
  	.then(...)
	.catch(err => {
		...
		message.error({
			content: err.message,
			duration: 5
	  	});
	})
}

Я действительно хочу пожаловаться здесь. Окно подсказки element-ui имеет конфигурацию кнопки закрытия. Почему окно подсказки ant-design-vue не обеспечивает такую ​​конфигурацию? Я думаю, что это очень распространенное требование. Затем вызовите метод $http в компоненте и увидите сообщение об ошибке, указывающее, что добавление прошло успешно.

Небольшое сожаление о боковой панели

По поводу сайдбара, тут я, честно говоря, застрял. Для иконок в сайдбаре хочу использовать родные иконки ант-дизайна, но иконки ант-дизайна 2.0 все изменены на вызывающую форму введенную компонентами.Давно думал и не решился. Не знаю, как добавить значки компонентов в маршрут. Итак, следующая лучшая вещь, я использовал здесь font-awesome. Но если вы используете сторонние иконки напрямую, вы попадете в другую яму, то есть, когда вы сжимаете боковую панель, текст все еще там

На самом деле с этим проще справиться.Вам нужно только F12, чтобы увидеть эффект демо-версии официального веб-сайта, и вы обнаружите, что значок добавляется к сгенерированному html.anticonимя класса стиляСледовательно, вам нужно только добавить имя класса, подобное этому, к значку с потрясающим шрифтом, который вы добавляете, чтобы добиться эффекта «обманчивого муравьиного дизайна» / побега.

// sider/SubMenu.vue
<template v-slot:title>
  <span v-if="menuInfo.meta.icon" class="anticon"><i :class="menuInfo.meta.icon"></i></span>
  <span>{{ menuInfo.meta.title }}</span>
</template>

Если друг знает, как добавить сюда собственные значки ant-design-vue, пожалуйста, дайте мне знать, спасибо, спасибо.

Суммировать

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

Категории