当前位置：首页 > news >正文

Vue.js 应用的入口文件main.js

news 来源：原创 2025/5/13 4:42:40

这段代码是一个典型的 Vue.js 应用的入口文件，它完成了 Vue 应用的初始化、插件引入、全局配置以及挂载到 DOM 的过程。下面我们逐行详细解析这段代码的作用：

1. 导入依赖

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import './assets/global.css';
import axios from "axios";
import VueRouter from "vue-router";
import router from "./router";
import store from "./store";

import Vue from 'vue'
导入 Vue 库，这是 Vue.js 的核心库，用于创建 Vue 实例。
import App from './App.vue'
导入根组件 App.vue，它是整个 Vue 应用的入口组件，所有其他组件都会嵌套在它里面。
import ElementUI from 'element-ui';
导入 ElementUI 库，这是一个基于 Vue 的 UI 组件库，提供了丰富的 UI 组件（如按钮、表格、表单等）。
import 'element-ui/lib/theme-chalk/index.css';
导入 ElementUI 的默认样式文件，确保 ElementUI 的组件能够正常显示。
import './assets/global.css';
导入自定义的全局样式文件，用于设置整个应用的全局样式。
import axios from "axios";
导入 Axios 库，这是一个用于发送 HTTP 请求的工具，通常用于与后端 API 进行数据交互。
import VueRouter from "vue-router";
导入 Vue Router 库，这是 Vue.js 的官方路由管理器，用于实现单页面应用（SPA）的路由功能。
import router from "./router";
导入自定义的路由配置，通常是一个已经配置好的 router 实例，定义了应用的各个路由规则。
import store from "./store";
导入 Vuex 的 store 实例，Vuex 是 Vue.js 的状态管理工具，用于集中管理应用的状态（数据）。

2. 全局配置

Vue.prototype.$axios = axios;
Vue.prototype.$httpUrl = 'http://localhost:8090';
Vue.config.productionTip = false;

Vue.prototype.$axios = axios;
将 Axios 挂载到 Vue 的原型上，这样在所有 Vue 组件中都可以通过 this.$axios 来访问 Axios，方便发送 HTTP 请求。
Vue.prototype.$httpUrl = 'http://localhost:8090';
将后端 API 的基础地址挂载到 Vue 的原型上，这样在所有组件中都可以通过 this.$httpUrl 来访问这个地址，避免重复书写。
Vue.config.productionTip = false;
关闭 Vue 的生产环境提示。如果设置为 true，在开发环境下 Vue 会输出一些警告信息，这里关闭它以减少不必要的提示。

3. 使用插件

// Vue.use(ElementUI);
Vue.use(VueRouter);
Vue.use(ElementUI, { size: 'small' });

Vue.use(VueRouter);
使用 Vue Router 插件，启用路由功能。
Vue.use(ElementUI, { size: 'small' });
使用 ElementUI 插件，并传入一个配置对象 { size: 'small' }，设置 ElementUI 组件的默认尺寸为 small。

4. 创建 Vue 实例

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

new Vue({ ... })
创建一个 Vue 实例，这是 Vue 应用的根实例。
router
将路由配置注入到 Vue 实例中，使整个应用支持路由功能。
store
将 Vuex 的 store 注入到 Vue 实例中，使整个应用支持状态管理。
render: h => h(App)
指定根组件的渲染函数，App.vue 是应用的根组件，h 是 Vue 的渲染函数，用于将 App 组件渲染到页面上。
$mount('#app')
将 Vue 实例挂载到 DOM 中，#app 是 HTML 文件中的一个元素（通常是 <div id="app"></div>），Vue 会将整个应用渲染到这个元素中。