学习前谈

大家都知道，Vue是一个比较火的前端框架，作为一个开发者，我们虽然没必要深究其底层原理，但是，它的 文件系统 执行脉络我们还是得梳理清楚的。

首先，Vue启动时会进入 main.js ，即 main.js 是入口文件

import Vue from 'vue'
import App from './App.vue'  //导入APP根组件
import router from './router' //导入路由
import './plugins/element.js' //导入插件 element-UI

Vue.config.productionTip = false

new Vue({
  router,  //挂载路由
  render: h => h(App) //挂载根组件
}).$mount('#app')

然后，对于界面呈现这一块，它就会先找到 APP.vue，里面有所谓的三要素：界面、样式、逻辑。我们后面所有的页面都是 由 这个根组件 生根发芽出来的

<template>
  <div id="app">
    App 根组件
  </div>
</template>

<script>

export default {
  name: 'app'
}
</script>

<style>
</style>

上面谈到 根组件 生根发芽，这就得用到 路由了，然而，我们是如何配置路由的呢？他为什么会生效？

配置这一块，我们专门新建了一个路由文件夹，在这个文件里面进行配置。老版本可能就是一个 router.js 文件，但新版本是 Router 文件夹 + index.js文件的形式。学过nodejs的同学应该能理解这种模块查找机制，在这里我就不过多介绍。

Vue学习之起步——浅谈文件系统_vue

为什么会生效这一块，那就是在 main.js 里进行配置的呢！

Vue学习之起步——浅谈文件系统_文件系统_02

好了，对于Vue文件间的联系，大家了解到这里就该差不多了。