为什么 引入 element-ui 组件库，要放在引入路由 vue-router ./router 前面

Element UI 是一个基于 Vue.js 的开源 UI 组件库，用于构建 Web 应用程序的用户界面。它提供了一套丰富的可复用的组件，包括按钮、表单、对话框、导航菜单、表格等，帮助开发者快速构建美观、易用的界面。

今天试了下，element-ui 的引入顺序居然也有坑。。

import Vue from 'vue';
import router from './router';
import store from './store';
import App from './App.vue';
import { Button } from 'element-ui';

Vue.use(Button);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

error element-ui import should occur before import of ./router import/order

需要把 element-ui 引入放在 ./router 之前，移上去还真不报错了。

什么原因了？

网上找很久也没有找到答案，只能总是 chat-gpt 机器人了。

答案：

引入 Element UI 库时需要将其放在引入 ./router 前面，是因为 Element UI 的某些组件可能依赖于 Vue Router。当你在使用 Element UI 的组件时，这些组件可能会尝试访问当前路由的信息或执行路由相关的操作。

如果你在导入 ./router 之前导入 Element UI，那么在 Element UI 组件初始化时，Vue Router 可能还没有完成初始化。这可能导致 Element UI 组件无法正确访问或使用 Vue Router 相关的功能，从而引发错误或不正确的行为。

通过将 Element UI 的导入放在 ./router 导入之前，确保 Vue Router 在 Element UI 组件初始化之前已经完成了初始化。这样，Element UI 组件就能够正确地访问和使用 Vue Router 相关的功能，避免出现错误。

请注意，这种导入顺序的要求可能是特定于 Element UI 的，其他类似的 UI 库可能具有不同的导入顺序要求。因此，在使用不同的 UI 库时，你可能需要查阅其文档或示例代码，以确定正确的导入顺序。

总结起来，将 Element UI 的导入放在 ./router 导入之前是为了确保 Vue Router 在 Element UI 组件初始化之前已经完成了初始化，以避免可能的错误和不正确的行为。