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:

jsconfig.json:

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

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

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

package-lock.json:

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

package.json:

  • 基础配置,告诉我们项目的信息(版本号、项目姓名、依赖)。

README.md

  • 项目介绍说明文件。

vue.config.js:

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

Vue3的项目结构示意图

相关推荐
diang1 分钟前
Vue3 + Ant Design 实现 Excel 模板导入表格数据
前端·vue.js
doria小鱼1 分钟前
Vue3+Swiper实现PC端横向滑动拖拽
前端·vue.js
李梦晓2 分钟前
@vueuse/motion、motion-v、@motionone/vue三个动画库的区别和联系
前端·vue.js
kovli28 分钟前
红宝书第十一讲:超易懂版「ES6类与继承」零基础教程:用现实例子+图解实现
前端·javascript
eason_fan29 分钟前
解决nvm安装指定版本node失败的方法
前端·node.js
bst@微胖子30 分钟前
Flutter项目之设置页
android·javascript·flutter
作业逆流成河32 分钟前
🔥🔥🔥 enum-plus:前端福利!介绍一个天花板级的前端枚举库
前端
尘寰ya40 分钟前
如何实现一个“纯净”的空对象(无原型链属性)?
javascript·面试·原型模式
DXM052140 分钟前
牟乃夏《ArcGIS Engine地理信息系统开发教程》学习笔记2
开发语言·javascript·笔记·学习·arcgis·ae
D哈迪斯1 小时前
vue动态组件实现动态表单的方法
前端·javascript·vue.js