vue学习

1、npm run dev
下载一个vue开源项目，首先通过npm install下载相关依赖，再通过npm run dev运行环境。
2、看pakcage.json vue.config.js
npm run dev其实就是配置在pakcage.json中的npm脚本命令:

  "scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build"  }

vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。真实的命令就是node环境下 启动webpack。webpack调用vue.config.js读取配置。
所以：
2.1、一个vue开源项目先看pakcage.json查看实际执行的命令。
2.2、webpack因为是在node环境下启动的，可以使用node内置模块语法，比如：
vue.config.js 里通过const path = require(‘path’) path模块包含一系列处理和转换文件路径的工具集，node语法中通过 require(‘path’) 可用来访问这个模块。

2.3、在vue-cli更新到3.0版本（即@vue/cli）后,项目入口页面从根目录/index.html挪到public/index.html了。所以看完pakcage.json和vue.config.js后就该看public/index.html了。

3、看public/index.html

<div id="app"></div>
    <!-- built files will be auto injected -->

4、看main.js
项目加载的过程是index.html->main.js->app.vue->index.js->course.vue。
在index.html的body体中只有一个div标签，其id为app,这个id通过框架源码将会连接到src/main.js内容，接着我们看一下main.js中的主要的代码
在main.js中，new一个vue实例，并手动挂载在index.html中app里面。也就是说通过main.js我们关联到App.vue组件。

 import App from 'src/App.vue';
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

这里的h(App)中的App实际上就是src/App.vue文件。
main.js成功关联到src/App.vue文件。render: h => h(App)这段就是根据src/App.vue文件生成dom元素。
index.html里有id="app"的代码，src目录下的App.vue中也有id="app"的代码。
index.html中的#app指定绑定目标，而src目录下的App.vue里的#app提供填充内容，两者在运行时指的是同一个DOM元素。
所以接下来看src目录下的App.vue，看div id="app"里面是什么。
5、看src/App.vue文件
App.vue中的内容是一个标准的vue模板的形式，包含了三部分：

<template></template>、<script></script>、<style></style>

script中直接处理好业务，template中直接渲染 ，通过v-model双向绑定，
标签下，除了标签外，还有标签，标签将会把路由相关内容渲染在这个地方，接下来，我们看一下路由的内容有哪些，在哪里出现的。其实，这个文件位于src/router/index.js中，我们看一下index.js中的代码
6、看src/router/index.js
在index.js的代码中，建立了路由相关的内容，也就会渲染到App.vue下面的router-view中。
本项目在index.js下面配置了路由守卫，路由守卫一般应用于权限控制。
路由守卫具体作用可以理解为：前端每次跳转路由，就判断 localStroage中有无token，没有就跳转到登录页面，有则跳转到对应路由页面。
7、vue路由的学习：
https://router.vuejs.org/zh/guide/essentials/redirect-and-alias.html#%E5%88%AB%E5%90%8D
别名alias在path为’/'中，是不起作用的。
8、根据路由，/ 被重定向到@/views/dashboard/index，使用的布局vue是src/layout/index.vue。