vue项目目录结构及运行的基本原理

1、Vue项目目录结构(通过vue create使用默认配置创建的Vue项目)

vue项目目录结构及运行的基本原理

2、项目运行基本原理

作为初学者我们不需要上来就完全明白整个项目的逻辑,可以先从宏观上理解大概,随着学习的深入慢慢便会明白。

vue项目目录结构及运行的基本原理

初始项目运行效果如上图所示,那首先我们看一下” App.vue”入口页面文件代码

vue项目目录结构及运行的基本原理

对于该文件,目前我们只需要知道该页面并没有多少页面效果代码,主要是引入并使用HelloWorld组件,核心内容由HelloWorld组件实现。

那接下来我们看一下,components文件下的HelloWorld.vue文件,如图所示,可以看出该页面完成了页面效果的实现。

vue项目目录结构及运行的基本原理