目錄

1. Vue簡介

2. Element Plus簡介

3. Axios簡介

4. 創建Vue項目

4.1 Node.js安裝

4.2 創建Vue項目

4.3 Vue項目的結構

4.4 安裝Element-Plus

4.5 安裝Axios

4.6 解決跨域問題

5. 應用實例

5.1 創建Vue組件

5.2 配置路由

5.3 配置根組件?

5.4 啟動前端應用服務器

1. Vue簡介

? ? ? ?Vue.js通常簡稱為Vue，是一個用于構建用戶界面的漸進式JavaScript框架。它旨在提高前端開發的效率，讓代碼組織更加模塊化和可維護。Vue.js由尤雨溪在2014年創建，并且在開源社區中擁有廣泛的支持和使用。

? ? ? Vue的主要特性如下：

• 漸進式架構：Vue可以僅作為一個簡單的視圖層庫使用，也可以通過生態系統中的其他庫和工具擴展為一個功能完備的框架，比如Vue Router（路由管理）、Vuex（狀態管理）等。
• 組件化：Vue將界面分解成獨立的組件，每個組件對應一個特定的功能或視圖部分。組件之間可以嵌套和重用，提升了開發效率和代碼的可維護性。
• 數據驅動：Vue使用聲明式渲染，開發者只需專注于數據的狀態，而不必手動更新DOM。當數據發生變化時，Vue會自動高效地更新視圖。
• 雙向數據綁定：通過v-model指令，Vue支持表單元素與應用狀態之間的雙向綁定，這使得開發表單和處理用戶輸入變得更加簡單和直觀。
• 單文件組件：Vue推崇將HTML、JavaScript和CSS整合在一個.vue文件中，使得開發者可以在一個文件里編寫模板、邏輯和樣式。單文件組件可以被打包工具（比如Webpack，Vite）處理，以實現高度的可維護性和模塊化開發。
• 虛擬DOM：Vue采用虛擬DOM技術，通過對數據的重新渲染只更新必要的部分，從而增強性能。

2. Element Plus簡介

? ? ? ? Element Plus是一款基于Vue.js 3.0的UI組件庫，是對Element UI的重寫和升級版本。它提供了一套現代化、易用的UI組件，用于快速構建Web應用程序。Element Plus擁有豐富的組件庫，覆蓋了常見的UI組件和功能，包括表單、表格、對話框、按鈕等，能夠幫助開發者快速搭建界面，提升開發效率。

? ? ? Element Plus 的主要特性如下：

• 基于 Vue 3：完全基于Vue 3開發，與 Vue 3 生態完全兼容，性能優異。
• 豐富的組件庫：包含了從基礎表單控件到高級數據展示組件等多種組件，滿足各類業務場景需求。
• 主題定制：支持自定義主題，開發者可以根據需求對樣式進行個性化配置。
• 國際化支持：內置國際化支持，可以輕松應用到多語言項目中。
• 高性能：基于 Vue 3的Composition API和其它新特性，擁有優秀的性能表現。
• TypeScript 支持：默認支持TypeScript，有助于提高代碼的可靠性和可維護性。
• 開發文檔完善：Element Plus由Element UI團隊維護和支持，開發者可以通過官方文檔、GitHub 倉庫等途徑獲取技術支持和更新。
• 活躍社區支持：Element Plus擁有活躍的社區，開發者可以在社區中提問、分享經驗和獲取幫助。

3. Axios簡介

? ? ? ?Axios 是一個基于Promise的HTTP客戶端，主要用于瀏覽器和Node.js中發送HTTP請求。它提供了簡單、方便且強大的 API，使得與服務器進行通信變得非常容易。通過Axios，可以發送 GET、POST、PUT、DELETE 等各種類型的HTTP請求，處理響應數據，以及進行錯誤處理。

? ? ? Axios的主要特性如下：

• 基于 Promise：Axios 是基于原生的 JavaScript Promise API，支持鏈式調用，便于處理異步操作。
• 支持瀏覽器和 Node.js：不僅可以在瀏覽器中使用，也適用于Node.js環境。
• 攔截請求和響應：?Axios 提供了請求和響應的攔截器功能，可以在發送請求或收到響應時進行處理,如添加認證信息、統一錯誤處理等。
• 支持請求和響應數據轉換：Axios 會自動將請求數據轉換為JSON 格式，同時也會將響應數據從 JSON 轉換為JavaScript 對象。
• 支持取消請求：通過創建一個取消令牌，可以取消正在進行的請求。
• 跨站點請求：支持保護跨站點請求偽造 (CSRF)。
• 客戶端支持防御 XSRF：客戶端可以通過設置一個 xsrfCookieName 值，來作為 xsrfToken 使用,并附帶在請求中。

4. 創建Vue項目

? ? ? ?創建Vue項目前確保你的機器上已經安裝了Node.js。Node.js 是一個基于 Chrome V8 JavaScript 引擎的開源、跨平臺的 JavaScript 運行時環境，它允許開發者使用 JavaScript 在服務器端編寫應用程序，擴展了 JavaScript 的應用范圍。

4.1 Node.js安裝

? ? ? Node.js的官方網址：https://node.js.org/en/download/?，如下圖所示，當前版本是20.12.2，點擊“Download Node.js v20.12.2”，下載Node.js。

下載完畢后，雙擊安裝包，開始安裝Node.js。

? ? ? 安裝完畢后，進入控制臺，輸入如下命令：

? ? ? ?node -v? ?

? ? ? 如果顯示Node.js版本，則說明Node.js安裝成功。

4.2 創建Vue項目

? ? ? ?進入創建Vue項目的目錄（這里以E:\vue為例），在命令行中運行如下命令：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?npm init vue@latest

? ? ? ?這一指令將會安裝并執行 create-vue，它是 Vue 官方的項目腳手架工具。你將會看到一些諸如 TypeScript 和測試支持之類的可選功能提示，如果不確定是否要開啟某個功能，可以直接按下回車鍵選擇 No，其過程如下。

此時，在目錄E:\vue\mysaasweb中創建了Vue項目，項目的名稱為“mysaasweb”。根據提示，在命令行中運行如下命令啟動Web服務器。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? npm run dev

輸出結果如下：

在瀏覽器中輸入http://localhost:5173，如果顯示如下界面，則說明創建Vue項目成功。

4.3 Vue項目的結構

? ? ? 目前，前端開發工具有很多，例如，Webstorm、HBuilder、Visual Studio Code（VScode）、Nodepad++等，在這里，我們使用VScode來開發Vue項目。利用VScode開發所創建的Vue項目的目錄E:\vue\mysaasweb，如下圖所示。

?

Vue項目的目錄和文件的含義如下：

4.4 安裝Element-Plus

? ? ? 進入Vue項目的安裝目錄（E:\vue\mysaasweb），在命令行中運行如下命令：

? ? ? ? ? ? ? ? ? ? ? ? npm install element-plus --save

如果安裝成功，在package.json文件的dependencies中出現element-plus及其版本號，如下圖所示，element-plus的當前版本號為2.7.4。

接下來，在Vue項目中引入element-plus。

打開main.js文件，如圖所示。

修改main.js，在項目中引入element-plus。

刪除樣式"main.css"，main.js的代碼如下：

import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'//引入element-plus
import ElementPlus from 'element-plus' 
import 'element-plus/dist/index.css'  const app = createApp(App)app.use(createPinia())
app.use(router)
app.use(ElementPlus) //使用element-plusapp.mount('#app')

4.5 安裝Axios

? ? ? ?進入Vue項目的安裝目錄（E:\vue\mysaasweb），在命令行中運行如下命令：

? ? ? ? ? ? ? ? ? ? ? ? npm install axios

如果axios安裝成功，在package.json文件的dependencies中出現axios及其版本號，如下圖所示，axios的當前版本號為1.7.2。

metho

Axios提供了一套靈活的API，可以傳遞相關的配置來創建請求，定義如下：

axios(config)

常用的配置選項如下：

• url：用于請求的服務器URL。
• method：創建請求時使用的方法。
• baseURL：請求的基地址，若URL配置的不是絕對地址，這個基地址將會附加到URL上。
• headers：自定義請求配置頭。
• params：與請求一起發送的URL參數。
• data：作為請求體被發送的數據，僅適用于PUT、POST、DELETE和PATCH請求方法。
• timeout：設置請求的超時時間，單位為毫秒。
• withCredentials：設置跨域請求時是否需要使用憑證。
• responseType：設置瀏覽器將要響應的數據類型。

4.6 解決跨域問題

? ? ? ?當一個請求url的協議、域名、端口三者之間任意一個與當前頁面url不同即為跨域。?同源策略會阻止一個域的Javascript腳本和另外一個域的內容進行交互。所謂同源（即指在同一個域）就是兩個頁面具有相同的協議（protocol），主機（host）和端口號（port）。

? ? ? 在Vue項目中，可以在vite.config.js文件中增加后端服務器的配置信息來解決跨越問題。

修改后的文件vite.config.js內容如下：

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},server: {host: '127.0.0.1', //前端vue項目的IP地址port: '5173',  //前端vue項目的端口號open: true,  //表示在啟動開發服務器時，會自動打開瀏覽器并訪問指定的地址proxy: {'/mysaasapp': {target: 'http://127.0.0.1:8080',//后端springboot項目地址changeOrigin: true,   //是否跨域ws: true,   //是否代理websocketspathRewrite: {'^/mysaasapp': ''  //假如我們的地址是 /mysaasapp/login 會轉化為 /login}}}}
})

5. 應用實例

? ? ? ? 本節以一個簡單的登錄功能為例，介紹Vue組件的開發過程。在/src/components目錄下創建兩個Vue組件：Login.vue和Mainframe.vue，其中，Login.vue為登錄組件，Mainframe.vue為登錄成功后跳轉的首頁面。在這里，我們主要實現Login.vue，Mainframe.vue的具體實現省略，只顯示“這是主頁面！”。

5.1 創建Vue組件

? ? ? ? 在/src/components目錄下創建登錄組件：Login.vue，代碼如下：

<template><div class="login" clearfix><div class="login-wrap"><el-row type="flex" justify="center"><el-form ref="lognForm" :model="user" status-icon label-width="80px"><h3>登錄</h3><hr><el-form-item prop="username" label="用戶名"><el-input v-model="user.username" placeholder="請輸入用戶名" prefix-icon></el-input></el-form-item><el-form-item id="password" prop="password" label="密碼"><el-input v-model="user.password" show-password placeholder="請輸入密碼" prefix-icon></el-input></el-form-item><div class="routerlink"><router-link to="/">找回密碼</router-link></div><el-form-item><el-button type="primary" @click="doLogin()">登錄</el-button></el-form-item></el-form></el-row></div></div>
</template>
<script lang="ts">
import axios from 'axios';
export default {name: "login",data() {return {user: {username: "",password: ""}};},created() { },methods: {doLogin() {if (!this.user.username) {this.$message.error("請輸入用戶名！");return;} else if (!this.user.password) {this.$message.error("請輸入密碼！");return;} else {axios({method: "post",url: "/mysaasapp/login",data: this.user,headers: {'Cache-Control': 'no-cache'}}).then(response => {if (response.data.message == 1) {this.$router.replace({ path: '/mainframe' });} else {alert("用戶名或密碼輸入有誤！");}}).catch(resp => {alert("登錄失敗!");});}}}
}
</script>
<style scope>
.login {width: 100%;height: 740px;background: url("../assets/background.jpg") no-repeat;background-size: cover;overflow: hidden;
}.login-wrap {background: url("../assets/white.jpg") no-repeat;background-size: cover;width: 400px;height: 300px;margin: 215px auto;overflow: hidden;padding-top: 10px;line-height: 40px;
}#password {margin-bottom: 5px;
}h3 {color: #0babeab8;font-size: 24px;text-align: center;
}hr {background-color: #444;margin: 20px auto;
}a {text-decoration: none;color: #aaa;font-size: 15px;
}a:hover {color: coral;
}.routerlink {text-align: center;
}.el-button {width: 80%;justify-content: center;}
</style>

在/src/components目錄下創建主頁面組件：Mainframe.vue，代碼如下：

<template><div class="mainframe"><h1>這是主頁面！</h1></div></template><style>@media (min-width: 1024px) {.mainframe {min-height: 100vh;display: flex;align-items: center;}}</style>

5.2 配置路由

? ? ? ?進入src/router目錄，打開路由配置文件index.js，首先引入Login.vue和Mainframe.vue，代碼如下：

? ? ? 然后，在routes：[ ] 下面配置Login.vue和Mainframe.vue的路由，代碼如下：

import { createRouter, createWebHistory } from 'vue-router'
import Login from '../components/Login.vue'
import Mainframe from '../components/Mainframe.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/login',name: 'login',component:Login},{path: '/mainframe',name: 'mainframe',component:Mainframe}]
})
export default router

5.3 配置根組件?

? ? ? ?打開Vue項目的根組件App.vue，引入Login.vue和Mainframe.vue，刪除創建Vue項目時自動生成的信息，代碼如下：

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import Login from './components/Login.vue'
import Mainframe from './components/Mainframe.vue'
</script><template><router-view></router-view>
</template>

5.4 啟動前端應用服務器

?打開VScode的終端，在命令行中運行如下命令：

? ? ? ? ? ? ? ? ? ? ?npm run dev

?在瀏覽器地址欄中輸入http://localhost:5173/login，顯示如下登錄頁面：

目前還沒有后端的API服務，因此，當用戶的點擊“登錄”按鈕后，會顯示登錄失敗的信息。

關于基于Springboot的API服務開發，在后面的文章中講解。

登錄項目的兩個背景圖片如下：

background.jpg