vue cli入口文件解析

1.入口文件的概述。

在vue cli构建的项目中,main.js是项目的入口文件,定义了vue实例,并引入根组件app.vue,将其挂在到index.html中id为'app'的节点上。

如图,main.js,app.vue,index.html文件的结构如下图所示:

vue cli入口文件解析

vue cli入口文件解析

vue cli入口文件解析

各个文件的作用:

一.main.js,程序入口文件,初始化vue实例并使用需要的插件;

二.app.vue,主要组件。所有的页面都是在App.vue下进行切换的。也可以理解为所有路由是App.vue的子组件;

三.index.html,页面入口。

一个典型的webpack项目的文件目录结构如下图所示:

vue cli入口文件解析

index.html——文件入口;

src——存放组件与入口文件;

node_modules——依赖的模块;

config——配置了路径端口值等;

build——webpack的基本配置,开发环境配置,生产环境配置