Vue3项目结构分析

• node_modules:

  • 是项目npm install下载的node依赖库。

• public：

  • favicon.ico:
    • 网页图标logo图片。
  • index.html:
    • 入口html。是一个基础的html页面，其中进行网页最基础的设置，并且设置了id为app的div盒子。该页面即为Vue单页面应用的基础页面。后续中new出来的vm实例也是会通过id选择器绑定该页面上唯一的dom元素root盒子。

• src：项目主要资源文件。

  • asserts：

    • 为项目静态文件，存放项目中使用到的图片、logo、背景音频材料等静态资源。

  • components:

    • 存放总组件App下辖的各个分组件。

  • App.vue：

    • 为所有组件的老大，一人之下（vm），万人之上（其余下辖组件）。

  • main.js:

    • 项目js入口文件，引入createApp工厂函数，调用工厂函数并传入App组件，并mount(挂载)到主网页index.html的根div盒子root上，从而实现将App总组件挂载到页面上。后序通过三种插槽，通过路由等操作，从而实现了单页面应用丰富的功能。

• .gitignore：

  • 在这个文件中写明不需要git管理的文件。

• .babel.config.js：

  • ES6语法编译配置。

• jsconfig.json：

  • 定义项目上下文(context)的jsconfig.json文件。

        上下文切换（context switch）定义：根据某种条件，暂停当前进程或线程的执行，保护当前进程或线程的现场，恢复另一个进程或线程的现场，转而执行该进程或线程的过程。

---《计算机科学技术名词 》 (第三版)

• package-lock.json：

  • 项目依赖版本锁定文件。

• package.json：

  • 基础配置，告诉我们项目的信息（版本号、项目姓名、依赖）。

• README.md：

  • 项目介绍说明文件。

• vue.config.js：

  • 用于自定义 Vue CLI 的默认配置。可以在其中关闭语法检查、修改输出目录、配置代理服务器、添加自定义插件等。

Vue3的项目结构示意图