Vue.js 应用初始化与配置：路由、状态管理、全局 Axios 和 Element Plus

Vue.js 应用初始化与配置：路由、状态管理、全局 Axios 和 Element Plus

本示例展示了如何使用 Vue.js 创建应用程序，并配置路由、状态管理（Vuex）、全局 Axios 和 Element Plus 组件库。此外，还探讨了路由守卫、页面标题设置和全局图标的使用。

import { createApp } from 'vue'
import '@/assets/css/reset.css'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import store from './store'
import { globalAxios } from './request'
import 'video.js/dist/video-js.css' // videojs样式


// 引入element-plus
// import { setupElementPlus } from '@/plugins/elementPlus'

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// 使用antd

// 创建实例
const setupAll = async () => {
    const app = createApp(App)

    // 使用全局axios
    app.use(globalAxios)

    // 使用vuex
    app.use(store)

    // 使用路由
    app.use(router)

    // setupElementPlus(app)

    for (const name in ElementPlusIconsVue) {
        app.component(name, (ElementPlusIconsVue as any)[name])
    }

    router.beforeEach((to) => {
        if (to.meta) {
            to.meta.notPrefix ? (document.title = to.meta.title) : (window.document.title = '隧道信息化平台' + (to.meta.title ? '-' + to.meta.title : ''))
        }
    })

    router.isReady().then(() => app.mount('#app'))
}

setupAll()

代码解读：

1. 导入必要模块：

   • createApp 用于创建 Vue 应用实例。
   • reset.css 用于重置样式。
   • element-plus/dist/index.css 用于引入 Element Plus 样式。
   • App.vue 是主组件。
   • router 是路由对象。
   • store 是 Vuex 状态管理对象。
   • globalAxios 是全局 Axios 实例。
   • video.js/dist/video-js.css 用于引入 video.js 样式。
   • ElementPlusIconsVue 包含 Element Plus 图标组件。

2. 创建应用实例：

   • 使用 createApp(App) 创建 Vue 应用实例。

3. 使用全局 Axios：

   • 使用 app.use(globalAxios) 将全局 Axios 实例应用到应用中。

4. 使用 Vuex：

   • 使用 app.use(store) 将 Vuex 状态管理应用到应用中。

5. 使用路由：

   • 使用 app.use(router) 将路由应用到应用中。

6. 注册 Element Plus 全局图标：

   • 使用 for...in 循环注册 Element Plus 全局图标组件。

7. 路由守卫：

   • 使用 router.beforeEach 创建路由守卫，在路由切换前执行。
   • 设置页面标题：根据路由元数据设置页面标题。

8. 挂载应用：

   • 使用 router.isReady().then(() => app.mount('#app')) 确保路由准备就绪后再挂载应用，以避免出现路由相关错误。

总结：

本示例展示了如何使用 Vue.js 创建应用程序，并配置路由、状态管理、全局 Axios 和 Element Plus 组件库。它还包括路由守卫、页面标题设置和全局图标使用的示例。

注意：

• 请根据自己的需求修改代码和配置。
• 确保安装了所有必要的依赖项。
• 可以根据需要添加更多功能和组件。
• 请参考 Vue.js 文档和 Element Plus 文档以获取更多信息。

建议：

• 使用 TypeScript 编写代码，以提高代码可读性和可维护性。
• 使用 ESLint 和 Prettier 进行代码格式化和代码风格检查。
• 使用 Vue Devtools 进行调试和性能分析。
• 考虑使用一些常用的 Vue.js 库和插件，例如 Vue Router、Vuex、Axios、Vuetify 等。

希望本文能帮助您了解如何使用 Vue.js 创建应用程序。