Vue3入口文件main.js解析

python 复制代码
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";

const app = createApp(App);

// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}

app.use(store);
app.use(router);
app.use(ElementPlus, {
  locale: zhCn,
});

app.mount("#app");

这是一个 Vue 3 应用的主入口文件,我来详细分析每个部分:

1. 导入依赖模块

javascript 复制代码
import { createApp } from "vue";
  • 从 Vue 3 导入 createApp 函数,这是 Vue 3 创建应用实例的新方式
  • 相比 Vue 2 的 new Vue(),Vue 3 使用函数式创建方式
javascript 复制代码
import App from "./App.vue";
import router from "./router";
import store from "./store";
  • App.vue:根组件,整个应用的入口组件
  • router:Vue Router 路由配置,用于单页面应用的路由管理
  • store:Vuex 或 Pinia 状态管理器,用于全局状态管理
javascript 复制代码
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
  • ElementPlus:饿了么团队开发的 Vue 3 UI 组件库
  • CSS 样式文件:ElementPlus 的样式表
  • 图标库:ElementPlus 配套的图标组件集合
  • 中文语言包:将 ElementPlus 界面设置为中文

2. 创建应用实例

javascript 复制代码
const app = createApp(App);
  • 使用 createApp() 创建 Vue 应用实例
  • 传入根组件 App 作为参数

3. 批量注册图标组件

javascript 复制代码
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
  • 遍历 ElementPlus 图标库中的所有图标
  • 将每个图标作为全局组件注册到应用中
  • 注册后可以在任何组件中直接使用这些图标,如 <Edit />, <Delete />

4. 注册插件和中间件

javascript 复制代码
app.use(store);
app.use(router);
app.use(ElementPlus, {
  locale: zhCn,
});
  • app.use(store):注册状态管理器
  • app.use(router):注册路由系统
  • app.use(ElementPlus, { locale: zhCn }):注册 ElementPlus UI 库并配置为中文语言

5. 挂载应用

javascript 复制代码
app.mount("#app");
  • 将 Vue 应用挂载到 HTML 中 id 为 "app" 的 DOM 元素上
  • 通常对应 index.html 中的 <div id="app"></div>
  1. 组件化开发 :使用 .vue 单文件组件
  2. 路由管理:集成 Vue Router 进行页面导航
  3. 状态管理:使用 Vuex/Pinia 管理全局状态
  4. UI 框架:采用 ElementPlus 提供丰富的 UI 组件
  5. 国际化:配置中文语言包
  6. 图标系统:全局注册图标组件库
相关推荐
JarvanMo43 分钟前
Flutter. FractionallySizedBox
前端
EndingCoder2 小时前
调试技巧:Chrome DevTools 与 Node.js Inspector
javascript·网络·electron·node.js·vim·chrome devtools
知识分享小能手2 小时前
React学习教程,从入门到精通, React 入门指南:React JSX 语法知识点详解及案例代码(8)
前端·javascript·vue.js·学习·react.js·前端框架·anti-design-vue
卓码软件测评2 小时前
第三方web测评机构:【WEB安全测试中HTTP方法(GET/POST/PUT)的安全风险检测】
前端·网络协议·安全·web安全·http·xss
学习3人组2 小时前
React 组件基础与事件处理
前端·javascript·react.js
qczg_wxg6 小时前
React Native的动画系统
javascript·react native·react.js
漂流瓶jz7 小时前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
周小码8 小时前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
大怪v8 小时前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
ERP老兵-冷溪虎山8 小时前
Python/JS/Go/Java同步学习(第三篇)四语言“切片“对照表: 财务“小南“纸切片术切凭证到崩溃(附源码/截图/参数表/避坑指南/老板沉默术)
java·javascript·python·golang·中医编程·四语言同步学习·职场生存指南