详解Vue程序入口文件main.js

╰+攻爆jí腚メ 2024-03-22 14:56 86阅读 0赞

import { createApp } from 'vue'
    import App from './App.vue'
    import router from "@/router/index"
    import ElementUI from 'element-plus';
    import 'element-plus/theme-chalk/index.css';
    import * as ElIcons from '@element-plus/icons-vue'
    import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
    
    const app = createApp(App);
    app.use(router).use(ElementUI, {
        locale: zhCn,
    }).mount("#app");
    
    for(const iconName in  ElIcons){
        app.component(iconName,ElIcons[iconName]);
    }

import \{ createApp \} from 'vue'：

> 这是从Vue 3.x中引入createApp函数，用于创建Vue实例。如果你想用Vue 3.x开发应用，就必须引入这个函数。

import App from './App.vue'：

> 这里的App是指./App.vue文件中的default export，也就是一个Vue组件（在此添加路由视图）。如果你的项目中有一个名为App.vue的文件，那么这个写法就是引入这个组件。如果你的根组件名称不是App.vue，那么你需要改写这一行的代码，将App.vue改成你的根组件文件名称即可。

import router from "@/router/index"：

> 从@/router/index文件中引入Vue Router实例，用于处理页面路由。

import ElementUI from 'element-plus'：

> 从Element Plus库中引入主模块。

import 'element-plus/theme-chalk/index.css'：

> 引入Element Plus的默认样式。

import \* as ElIcons from '@element-plus/icons-vue'：

> 从Element Plus中引入所有图标组件，并将其存储在ElIcons变量中。

const app = createApp(App)：

> 这行代码是创建一个Vue实例，使用了createApp函数，并将App组件作为根组件。createApp函数是Vue 3.x中创建应用的入口函数，它接收一个根组件作为参数，并返回一个Vue实例。在这里，我们将App组件作为根组件，并将Vue实例存储在app变量中，以便后续使用。

app.use(router)：

> 将Vue Router实例作为插件使用。

app.use(ElementUI, \{locale: zhCn\})：

> 将ElementUI作为插件使用，同时指定其使用中文语言包。

for(const iconName in ElIcons)\{app.component(iconName,ElIcons\[iconName\]);\}：

> 循环遍历ElIcons对象中的所有图标组件，并将其注册到Vue实例中。

app.mount("\#app")：

> 这行代码是将Vue实例挂载到指定的HTML元素上，以启动Vue应用。mount方法是Vue 3.x中用于挂载Vue实例的方法，它的参数是一个CSS选择器字符串，用于指定要挂载的HTML元素。在这里，我们使用了\#app作为选择器字符串，表示将Vue实例挂载到id为app的HTML元素上。  
>