vue项目工程主文件之间的联系(项目组成逻辑)

一、项目工程文件总体概览

二、项目各文件功能介绍 

 index.html文件：项目的运行入口。在body体中有一个div标签，其id为app。在文件可修改项目网页名称和页面眉头icon图标。

 App.vue文件：单文件组件。针对整个项目称作根组件。主体为<router-view/>，<router-view>标签将会把路由相关内容渲染在这个文件中。

 main.ts文件：程序主入口文件。创建APP实例(App.vue文件)挂载到id = app节点(index.html文件)上。main.ts文件可以导入Vue函数和插件，创建Vue应用实例，导入并注册全局组件、指令或插件，使用路由（如Vue Router），挂载应用到DOM元素中。

import App from './App.vue';
import router from './router/index';
import ElementPlus from 'element-plus';
import fromModle from "@/components/fromModle.vue";

//将组件注册到vue对象中
createApp(App).component('fromModle', fromModle).use(router).mount('#app');

createApp(App)：以App作为参数生成一个应用实例对象，可以理解为创建一个Vue应用的意思。createApp()方法会返回一个Vue实例对象。

mount(‘#app’)：挂载函数。挂载到id为app节点上。而id为app节点在index.html中体现。

use(router)：注册Vue-Router。

component('fromModle', fromModle)：创建全局组件。

其他文件：

package.json文件：npm包管理器核心文件

package-lock.json文件：详细包管理文件

node_modules文件夹：项目工程安装的依赖都在该文件夹内 (npm i 语句生成)

dist文件夹：用于分发、发布生产的文件夹（npm run build 语句生成）

.git文件夹：用于项目版本管理

.gitignore文件：提交版本时忽略不必要的文件，例如node_modules、dist等

README.md文件：项目说明

npm：包管理器。管理框架、第三方库(依赖)等文件。

.gitignore文件内容：

tsconfig.json文件内容(paths路径替换)：