Spring Boot + Vue前后端分离(二)前端Vue启动流程

你好,【程序职场】专注于:Spring Boot ,微服务 和 前端APP开发,闲暇之余一起聊聊职场规划,个人成长,还能带你一起探索 副业赚钱渠道,在提升技术的同时我们一起交流 敏捷流程 提高工作效率,从技术到管理一步步提升自我!
 
标签:一个执着的职场程序员!

上篇文章为大家讲述了 Spring Boot + Vue前后端分离(一)前端Vue环境搭建;本篇文章接着上篇内容继续为大家介绍 前端Vue启动流程。

本文是Spring Boot + Vue前后端分离 系列的第二篇,了解前面的文章有助于更好的理解本文:


1.Spring Boot + Vue前后端分离(一)前端Vue环境搭建


前言

(一).Vue项目结构

(二). 启动流程

上一篇大家都学习到了vue的环境搭建和项目创建,相信对于小伙伴来说都是很easy的,当然创建方式有多种,我比较喜欢使用命令函,还可以使用Idea创建,在idea工具中使用命令行也行,这个在这里就不多说了,有需要的可以自行百度,也很简单,我们今天主要说一下vue前端的项目结构和启动流程,让我们知道我们在跑起来一个项目后他是怎么运行的。

(一).Vue项目结构

Spring Boot + Vue前后端分离(二)前端Vue启动流程_第1张图片

 

上面是一个我创建的vue项目,并成功运行,让我们看看他都有哪些部分组成。

我们可以通过思维导图看一下主要的几个点。

 

Spring Boot + Vue前后端分离(二)前端Vue启动流程_第2张图片

 

上面的图片中的组成部分我都不再多说了,看图的说明就能明白。

下面说一下三个主要的文件: index.html,App.vue,main.js

# index.html  首页入口文件

              cxzc-vue2        

解释:

该文件是一个普通的 html 文件,但是里面有这样的一行

,下面有一行注释,这样 构建的文件将会被自动注入,也就是说我们编写的其它的内容都将在这个 div 中展示。

index.html文件 在 整个项目只有这一个 html 文件,所以是 单页面应用,当我们打开这个应用,表面上可以有很多页面,实际上它们都只不过在一个 div 中。

# App.vue  根组件文件




改文件有三部分组成  template,script,style。

这里也有一个标签 

,但跟 入口文件 index.html 里的那个是没有关系的。这个 id=app 只是跟下面的 css样式 对应。

你可能感兴趣的:(Spring,Boot)