Spring Boot + Vue先後端分離（二）前端Vue啓動流程

時間 2021-08-14

標籤 css html 前端 vue node webpack web spring vue-router 後端欄目 Spring 简体版

原文原文鏈接

本文是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樣式對應。

該文件中最主要的是代碼 <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後端框架作先後端分離了，敬請期待下篇。。。