Vue实战4.基础知识_webpack项目结构

Posted 2021-04-29 你吖才码农

写在前面的话：

有一个朋友说：【Vue实战】系列的文章带点顽皮和风骚，表现程序猿风骚的态度。

我还是拒绝了。。。

因为我更想把这一系列的文章定位成实战教程，写得简单直接，容易上手。而不像某些介绍Vue的文章或者书，故意写得很复杂。

开始，3张图搞懂Vue的webpack工程模板结构：

1、各目录的含义

大实话：实战的时候，项目组每个人必须掌握的是proxyTable的配置

2、路由配置文件

大实话：实战的时候，项目组每个人必须掌握的是下图右侧红框的配置

3、页面入口

1号红框：App.vue+main.js，main.js描述了当首页加载时，会调用App.vue这个组件

2号红框：App.vue这个组件分为上下两个部分，2号红框表达的就是上面部分菜单导航，<router-link>标签的to属性描述了用户点击菜单后要跳转到哪个组件

3号红框：<router-view>表达了下面部分承载的是具体的跳转组件

over