Spring Boot + Vue先后端分离（二）前端Vue启动流程
本文是Spring Boot + Vue先后端分离 系列的第二篇，了解前面的文章有助于更好的理解本文：css
1.Spring Boot + Vue先后端分离（一）前端Vue环境搭建html
前言前端
(一).Vue项目结构vue
(二). 启动流程node
上一篇你们都学习到了vue的环境搭建和项目建立，相信对于小伙伴来讲都是很easy的，固然建立方式有多种，我比较喜欢使用命令函，还可使用Idea建立，在idea工具中使用命令行也行，这个在这里就很少说了，有须要的能够自行百度，也很简单，咱们今天主要说一下vue前端的项目结构和启动流程，让咱们知道咱们在跑起来一个项目后他是怎么运行的。webpack
(一).Vue项目结构web
上面是一个我建立的vue项目，并成功运行，让咱们看看他都有哪些部分组成。spring
咱们能够经过思惟导图看一下主要的几个点。
vue-router
上面的图片中的组成部分我都再也不多说了，看图的说明就能明白。后端
下面说一下三个主要的文件： index.html，App.vue，main.js
# index.html 首页入口文件
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>cxzc-vue2</title></head><body><div id="app"></div><!-- built files will be auto injected --></body></html>
解释：
该文件是一个普通的 html 文件，可是里面有这样的一行 <div id="app"></div> ，下面有一行注释，这样 构建的文件将会被自动注入，也就是说咱们编写的其它的内容都将在这个 div 中展现。
index.html文件 在 整个项目只有这一个 html 文件，因此是 单页面应用，当咱们打开这个应用，表面上能够有不少页面，实际上它们都只不过在一个 div 中。
# App.vue 根组件文件
<template><div id="app"><img src="./assets/logo.png"><router-view/></div></template>
<script>export default {name: 'App'}</script>
<style>#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}</style>
改文件有三部分组成 template，script，style。
这里也有一个标签 <div id="app">，但跟 入口文件 index.html 里的那个是没有关系的。这个 id=app 只是跟下面的 css样式 对应。
<script>标签里的内容即该组件的脚本，也就是 js 代码，export default 是 ES6 的语法，意思是将这个组件总体导出，以后就可使用 import 导入组件了。大括号里的内容是这个组件的相关属性。
该文件中最主要的是代码 <router-view/>，是一个容器，路由视图，意思是当前路由（ URL）指向的内容将显示在这个容器中。也就是说，其它的组件即便拥有本身的路由（URL，须要在 router 文件夹的 index.js 文件里定义），表面上是一个单独的页面，实际上只是在根组件 App.vue 中。
# main.js 路由配置文件
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */new Vue({el: '#app',router,components: { App },template: '<App/>'})
解释：
改文件中上面 import 了几个模块，其中 vue 模块在 node_modules 中，App 即 App.vue 里定义的组件，router 即 router 文件夹里定义的路由。
Vue.config.productionTip = false ,做用是阻止vue 在启动时生成生产提示。
在这个 js 文件中，咱们建立了一个 Vue 对象（实例），el 属性提供一个在页面上已存在的 DOM 元素做为 Vue 对象的挂载目标，router 表明该对象包含 Vue Router，并使用项目中定义的路由。components 表示该对象包含的 Vue 组件，template 是用一个字符串模板做为 Vue 实例的标识使用。
(二). 启动流程
当咱们建立好一个项目后 在浏览器中打开项目。
进入页面首先加载index.html和main.js文件。、
main.js文件中给id=“app”的div建立一个Vue的实例，该实例中有一个名叫“APP”的组件，该组件经过vue-router将Hello.vue中的模板注入到App.vue的模板中。
index.html文件
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>cxzc-vue2</title></head><body><div id="app"></div><!-- built files will be auto injected --></body></html>
main.js文件
App.vue 文件
最终到 helloworld.vue中，这里实现功能界面效果。
好的，vue项目的启动原理到这里就ok了，后面就能够和springboot后端框架作先后端分离了，敬请期待下篇。。。