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

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


1. 导入依赖

javascript 复制代码
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. 全局配置

javascript 复制代码
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. 使用插件

javascript 复制代码
// 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 实例

javascript 复制代码
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 会将整个应用渲染到这个元素中。


5. 总结

这段代码的主要作用是:

  1. 导入所需的库和组件(Vue、ElementUI、Axios、Vue Router、Vuex 等)。
  2. 配置全局工具(Axios、后端地址等)。
  3. 使用插件(Vue Router、ElementUI)。
  4. 创建 Vue 实例,并将路由、状态管理和根组件注入到实例中。
  5. 将 Vue 实例挂载到 DOM 中,启动应用。

通过这段代码,一个完整的 Vue 应用就被初始化并运行起来了!

相关推荐
香蕉可乐荷包蛋13 分钟前
排序算法 (Sorting Algorithms)-JS示例
javascript·算法·排序算法
格调UI成品25 分钟前
元宇宙工厂前端新形态:Three.js与WebGL实现3D产线交互的轻量化之路
前端·javascript·webgl
gnip36 分钟前
微前端框架选型
前端·javascript
芒果1251 小时前
【转载文章】ECharts-GL 实现世界级、国家级、省市级 3D 地图
前端
一只小风华~1 小时前
JavaScript:数组常用操作方法的总结表格
前端·javascript·数据结构·vue.js·算法
前端老鹰1 小时前
JavaScript Array.prototype.some ():数组判断的 “快捷侦探”
前端·javascript
张元清1 小时前
揭秘JS事件循环:一道字节跳动面试题带你深入理解async/await、Promise与RAF
前端·react.js·面试
KenXu1 小时前
F2C-Chrome插件-Figma免费的DevMode来了!
前端
北海几经夏1 小时前
React组件中的this指向问题
前端·react.js
程序媛李李李李李蕾1 小时前
你不能直接用现成的吗?整个前端做笔记管理工具真是折腾人
javascript·vue.js·后端