Spring Boot + Vue前后端分离（二）前端Vue启动流程

你好，欢迎来到【程序职场】，这里有你需要的技术提升，职场规划，个人成长，副业发展等文章。和更多小伙伴一起学习，一起进步。上篇文章为大家讲述了Spring Boot + Vue前后端分离（一）前端Vue环境搭建；本篇文章接着上篇内容继续为大家介绍前端Vue启动流程。本文是Spring Boot + Vue前后端分离系列的第二篇，了解前面的文章有助于更好的理解本文：1...

沉默的闪客

5140人浏览 · 2020-02-01 21:29:16

沉默的闪客 · 2020-02-01 21:29:16 发布

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

标签：一个执着的职场程序员！

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

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

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

前言

(一).Vue项目结构

(二). 启动流程

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

(一).Vue项目结构

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

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

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

下面说一下三个主要的文件： 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样式对应。

该文件中最主要的是代码 <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后端框架做前后端分离了，敬请期待下篇。。。

。

作者：小小蒲公英

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^