構建一個vue項目

一.XX餐飲系統
訂單模塊、會員管理、支付模塊、菜品管理、人事管理、財務管理、倉儲管理。。。
技術架構:Spring Boot+Vue、Spring Security、Redis、MySQL

二.前後端分離介紹
前後端分離之後,後端將不再提供頁面,只是單純的提供接口,前端做數據渲染,頁面跳轉等等。移動互聯火的時候,開發一個應用程序,很難做到只有 PC 端。

1.前後端分離的優勢

  1. 一套後端對應多個前端
  2. 分工協作

2.前後端分離技術方案
後端1. SSM 2.Spring Boot 3.微服務 4.SSM+Dubbo
前端 1.Vue 2.EasyUI

三.SPA 單頁面介紹
1.是什麼
項目開發完成後,編譯打包上線的時候,只有一個 html 頁面。而且這個html頁面沒有內容,只有一堆 js、css引用,項目本身可能有很多頁面,但是編譯打包後只有一個頁面。這種叫做 SPA(single page web application) 單頁面應用。適合做企業級應用,不適合做互聯網應用。

第一次進入頁面時會請求一個html文件,刷新清除一下,切換到其他組件,此時路徑也相應變化,但是並沒有新的html文件請求,頁面內容卻變化了。

原理: js會感知到url的變化,通過這一點可以用js動態地將當前頁面的內容清除,然後將下一個頁面的內容掛載到當前頁面上。這個時候的路由不再是後端來做了,而是前端來做,判斷頁面顯示相應的組件,清除不需要的。

2.怎麼用
https://blog.csdn.net/jiang7701037/article/details/93243545

3.優缺點
優點: 頁面切換快 頁面每次切換跳轉時,並不需要處理html文件的請求,這樣就節約了很多HTTP發送時延,所以我們在切換頁面的時候速度很快。

缺點: 首屏時間稍慢,SEO差
單頁應用的首屏時間慢,首屏時需要請求一次html,同時還要發送一次js請求,兩次請求回來了,首屏纔會展示出來。相對於多頁面應用,首屏時間慢

SEO效果差,因爲搜索引擎只認識html裏的內容,不認識js渲染生成的內容,SPA應用不易被搜索引擎收錄,也就不會給一個好排名,會導致單頁應用做出來的網頁在搜索引擎上的排名差。

4.解決缺點
Vue官方提供了一些其他的技術來解決這些缺點,比如服務端渲染技術(SSR server side render),通過這些技術可以完美解決這些缺點,這樣一來單頁面應用對於前端來說就是非常完美的頁面開發解決方案了。

四.vue簡單使用
官網 https://uniapp.dcloud.io/
html頁面<head引用這句快速上手

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

搭建vue項目

另一種搭建項目
1.下載安裝node.js傻瓜式安裝 https://nodejs.org/en/

2.檢查是否安裝成功:如果輸出版本號,說明我們安裝node環境成功
在這裏插入圖片描述
3.安裝 Vue-cli 3.0 腳手架工具https://cli.vuejs.org/

# 安裝 Vue-cli 3.0 腳手架工具
npm install -g @vue/cli
# 輸出版本號安裝cli環境成功
vue --version

在這裏插入圖片描述
4.創建項目vue2官網
在這裏插入圖片描述
進去手動設置
在這裏插入圖片描述
在這裏插入圖片描述
enter確認進去 選擇yes…

cd到vue2目錄裏面輸入npm run serve 啓動項目,訪問http://localhost:8080/看到vue頁面

WS工具使用
在這裏插入圖片描述

發佈了66 篇原創文章 · 獲贊 68 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章