项目结构总览

如图，为脚手架创建的项目的结构图

项目结构介绍

node_modules目录

存放项目的各种依赖，如第三方插件模块等等，是npm安装包的位置。

public目录

存放静态资源,可以将静态图标资源等等存放在该目录，以及存放项目的模板文件，作用是生成项目的入口文件

src目录(重要)

存放各种Vue文件的地方，是非常重要的目录。

assets子目录

存放各种静态文件，比如图片、字体等样式文件。

一些css样式,公共js文件,图片资源可以存放在这里

components子目录

文件名以.vue结尾。

存放公共组件库，可以将组件直接放在该目录下，然后其他页面都可以调用组件，提高代码复用性，减少重复开发。

一个组件可以将html代码抽离出来放入template标签中，同时可以抽离css文件，js文件。

创建一个组件

首先创建一个.vue结尾的文件。

接着输入vue，选择模板，可以快速创建模板结构代码：

router子目录

负责页面跳转，类似于小程序的底部导航栏跳转文件。

views子目录

存放页面的目录，用户访问的页面都是存放在该目录下。

App.vue文件

默认的App.vue文件内容:

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

App.vue是项目的根组件，最顶层的组件，所有的页面都是在App.vue下切换。

App.vue结构分析

由三个部分组合而成

• template

  • 其中模板只能包含一个父节点，<router-view/>是子路由视图，后面的路由页面都显示在此处。

• script

  • script使用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等。

• style

  • 样式通过style标签<style></style>包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在style标签上加scoped。

main.js

是项目的js的入口文件，主要作用是初始化vue实例，引用css样式，js模块，都在main.js中进行引入。

.eslintrc.js

检测配置，对代码进行校验，规范验证

babel.config.js

工具链，将ES6的代码转换向后兼容

package.json

模块的基本信息，项目开发所需要的模块目录

package-lock.json

记录当前状态下实际安装的各个npm package的具体来源和版本号

vue加载时文件的执行顺序

• 执行index.html文件

  • 项目启动时默认显示index.html文件？

    • 答：webpack中有相应的配置

• 执行main.js文件

  • 默认加载main.js文件？

    • 答：webpack中有相应的配置
• main.js挂载了app.vue文件，用app.vue的templete替换index.html中的
• main.js中注入了路由文件，将对应的组件渲染到router-view中
• router-view中加载Layout文件

• Layout 加载Navbar, Sidebar, AppMain
  

  参考链接

  介绍vue项目文件执行顺序，页面渲染流程:
  https://my.oschina.net/u/4804015/blog/4749050