Vue3+Elementplus+Axios 入門教程詳解

這篇具有很好參考價值的文章主要介紹了Vue3+Elementplus+Axios 入門教程詳解。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

Vue3+Elementplus+Axios 入門教程詳解

vue3項目創(chuàng)建
安裝第三方框架
vue整合第三方框架
創(chuàng)建登錄組件
vue整合axios

1. vue3項目創(chuàng)建

1.1 創(chuàng)建vue3項目，如：vuepro01

?備注：vue項目不會創(chuàng)建，請參考CSDNhttps://mp.csdn.net/mp_blog/creation/editor/134034891

使用element-plus幫助構(gòu)建視圖,使用axios完成前后端的數(shù)據(jù)傳輸,Vue,Elementplus,Axios,vue.js,elementui

1.2. 測試項目是否正常啟動：

1.2.1 進(jìn)入項目根目錄

? ?cd vuepro01

使用element-plus幫助構(gòu)建視圖,使用axios完成前后端的數(shù)據(jù)傳輸,Vue,Elementplus,Axios,vue.js,elementui

1.2.2 執(zhí)行 npm run serve

使用element-plus幫助構(gòu)建視圖,使用axios完成前后端的數(shù)據(jù)傳輸,Vue,Elementplus,Axios,vue.js,elementui

1.2.3 訪問路徑即可

使用element-plus幫助構(gòu)建視圖,使用axios完成前后端的數(shù)據(jù)傳輸,Vue,Elementplus,Axios,vue.js,elementui

2. 安裝第三方框架

2.1 第三方框架

? ? 2.1.1 element-plus ?解決界面UI問題（基于vue3的UI框架）

? ? 2.1.2 bootstrap ? 引用基礎(chǔ)樣式

? ? 2.1.3 axios ?異步ajax進(jìn)行數(shù)據(jù)交互(用于向后臺發(fā)送請求)

? ? 2.1.4 vue-router ?路由框架 ?（可以幫助我們管理應(yīng)用程序中的路由，從而使用戶能夠訪問應(yīng)用程序的各個部分）

?2.2 在vuepro01 項目中安裝

?2.2.1 進(jìn)入 vuepro01 根目錄，執(zhí)行如下命令

?npm install ?element-plus??

?npm install ?bootstrap

? npm install ?axios ?

??npm install ? vue-router

? ?2.2.1 執(zhí)行如下：

使用element-plus幫助構(gòu)建視圖,使用axios完成前后端的數(shù)據(jù)傳輸,Vue,Elementplus,Axios,vue.js,elementui

2.2.3 檢查是否安裝成功，執(zhí)行：npm ls?

使用element-plus幫助構(gòu)建視圖,使用axios完成前后端的數(shù)據(jù)傳輸,Vue,Elementplus,Axios,vue.js,elementui

3. vue整合第三方框架

3.1 VSCode 打開 vue項目

3.2 創(chuàng)建router路由的設(shè)置文件

3.2.1 在src下創(chuàng)建router目錄，在router目錄下創(chuàng)建index.js文件

3.2.2 index.js 的基本內(nèi)容

import {createRouter, createWebHistory} from 'vue-router'
//-異步加載組件
import { defineAsyncComponent } from 'vue'

//-路由規(guī)則
const myRoutes = [

]
//-創(chuàng)建路由對象
const router = createRouter({
    history: createWebHistory(),
    routes: myRoutes
})

//-將路由暴露出去，其他文件才能訪問
export default router

3.3 在 main.js 中導(dǎo)入框架

import { createApp } from 'vue'
import App from './App.vue'
//導(dǎo)入axios框架
import Axios from 'axios'
//導(dǎo)入bootstrap樣式
import 'bootstrap/dist/css/bootstrap.min.css'
//導(dǎo)入ElementPlus框架
import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'
//導(dǎo)入 router框架
import Router from './router/index.js'

const app = createApp(App)
app.use(ElementPlus)
app.use(Router)
app.mount('#app')

3.4 檢測ElementPlus是否加載成功

3.4.1 打開ElementPlus官網(wǎng)，找到組件，將任意組件復(fù)制到App.vue中，檢測其是否顯示即可

? ? ? ? 3.4.1.1 首先將App.vue中不相關(guān)的內(nèi)容刪除掉，只剩下vue組件框架的基本內(nèi)容

<template>

</template>
<script>

export default {
  name: 'App',
  components: {
    
  }
}
</script>

<style>

</style>

? ? ? ? 3.4.1.2 例如：復(fù)制按鈕組件的代碼

<template>
  <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button round>Round</el-button>
    <el-button type="primary" round>Primary</el-button>
    <el-button type="success" round>Success</el-button>
    <el-button type="info" round>Info</el-button>
    <el-button type="warning" round>Warning</el-button>
    <el-button type="danger" round>Danger</el-button>
  </el-row>

  <el-row>
    <el-button :icon="Search" circle />
    <el-button type="primary" :icon="Edit" circle />
    <el-button type="success" :icon="Check" circle />
    <el-button type="info" :icon="Message" circle />
    <el-button type="warning" :icon="Star" circle />
    <el-button type="danger" :icon="Delete" circle />
  </el-row>
</template>
<script>

export default {
  name: 'App',
  components: {
    
  }
}
</script>

<style>

</style>

? 3.4.1.3 啟動項目，訪問鏈接，出現(xiàn)如下頁面即可

使用element-plus幫助構(gòu)建視圖,使用axios完成前后端的數(shù)據(jù)傳輸,Vue,Elementplus,Axios,vue.js,elementui

? 4. 創(chuàng)建登錄組件：Login.vue

? 4.1 修改App.vue文件，添加router-view組件

<template>
  <router-view></router-view>
</template>
<script>

export default {
  name: 'App',
  components: {
    
  }
}
</script>

<style>

</style>

? 4.2 訪問ElementPlus官網(wǎng)，找到 Form表單組件，在Login.vue頁面進(jìn)行使用

<template>
	<div class="container">
		<el-row class="h-60">		
		</el-row>
		<el-row>
			<el-col :span="8">	
			</el-col>
			<el-col :span="8" class="bg-primary-subtle p-10">
				<el-form :model="loginForm" 
				  class="login-container" label-position="left"
				 label-width="80px" v-loading="loading"  status-icon>
					<h4 class="text-center">系統(tǒng)登錄</h4>
					<div style="margin: 20px" />
					<el-form-item label="郵箱" prop="email">
					    <el-input v-model="loginForm.email" placeholder="郵箱"></el-input>
					</el-form-item>
					<el-form-item label="密碼" prop="password">
					    <el-input  type="password" v-model="loginForm.pwd" placeholder="密碼"></el-input>
					</el-form-item>
					<el-form-item class="text-center">
					    <el-button type="primary" class="m-l-20" @click.native.prevent="toLogin()">Login</el-button>
						<el-button type="Reset" class="m-l-20" >Reset</el-button>
					</el-form-item>
				</el-form>	
			</el-col>
		</el-row>
	</div>
</template>
<script setup>
  import { ref  } from 'vue'
  //data
  let loginForm=ref({
    email:"super@a.com",
    pwd:"123123"
  });
  function toLogin(){
    alert('ok')
  }
</script>
<style>
.h-60{
	height: 60px;
}
.p-10{
	padding: 10px;
}
</style>

4.3 創(chuàng)建Home.vue 組件

4.3.1?在src/components 目錄下創(chuàng)建 Home.vue

4.3.2?Home.vue 組件內(nèi)容（簡單添加幾個文字即可，例如：我是首頁面）

<template>
    <div>
        我是首頁面
    </div>
</template>
<script setup>

</script>
<style>

</style>

4.4 路由文件的配置：（項目先啟動登錄頁面）

import {createRouter,createWebHistory} from 'vue-router'
//- 異步加載組件
import {defineAsyncComponent} from 'vue'
//- 路由規(guī)則
const myRouter = [
    {
        path: '/',
        redirect: '/login'
    },
    {
        path: '/login',
        name: "Login",
        component: defineAsyncComponent(()=>import('../components/Login.vue'))
    },
    {
        path: '/home',
        name: "Home",
        component: defineAsyncComponent(()=>import('../components/Home.vue'))
    }
]
//- 創(chuàng)建路由對象
const router = createRouter({
    history: createWebHistory(),
    routes: myRouter
})
//全局守衛(wèi)  訪問非Login界面時，驗證是否已登錄
router.beforeEach((to,from,next)=>{
    //判斷是否已登錄 查sessionStorage中是否有isAuthenticated信息
    let isAuthenticated = sessionStorage.getItem("isAuthenticated")
    //判斷路由的別名不是登錄且未進(jìn)行登錄認(rèn)證，就跳轉(zhuǎn)去登錄
    if(to.name!="Login"&&!isAuthenticated){
        next({name: "Login"})
    }else if(to.name=="Login"&&isAuthenticated){//已登錄，不允許退回到登錄頁面
        next({name:"Home"})
    }else{
        next()
    }
})
//-將路由暴露出去，其他文件才能訪問
export default router

4.4 啟動項目，訪問項目

使用element-plus幫助構(gòu)建視圖,使用axios完成前后端的數(shù)據(jù)傳輸,Vue,Elementplus,Axios,vue.js,elementui

5. vue 整合 axios 發(fā)起網(wǎng)絡(luò)請求

5.1 Login.vue 發(fā)起網(wǎng)絡(luò)請求

<template>
	<div class="container">
		<el-row class="h-60">		
		</el-row>
		<el-row>
			<el-col :span="8">	
			</el-col>
			<el-col :span="8" class="bg-primary-subtle p-10">
				<el-form :model="loginForm" 
				  class="login-container" label-position="left"
				 label-width="80px" v-loading="loading"  status-icon>
					<h4 class="text-center">系統(tǒng)登錄</h4>
					
					<el-form-item label="用戶編號">
					    <el-input v-model="loginForm.adminCode" placeholder="用戶編號"></el-input>
					</el-form-item>
					<el-form-item label="密碼">
					    <el-input  type="password" v-model="loginForm.password" placeholder="密碼"></el-input>
					</el-form-item>
					<el-form-item class="text-center">
					    <el-button type="primary" class="m-l-20" @click.native.prevent="toLogin()">Login</el-button>
						<el-button type="Reset" class="m-l-20" @click.native.prevent="toReset()">Reset</el-button>
					</el-form-item>
				</el-form>	
			</el-col>
		</el-row>
	</div>
</template>
<script setup>
  import { ref  } from 'vue'
  import axios from 'axios'
  import {useRouter} from 'vue-router'
  //-路由對象
  const router = useRouter()
  //data
  let loginForm=ref({
    adminCode:"",
    password:""
  });
  function toLogin(){
	let url="http://localhost:8080/nep/admins/getAdminsByCode";
		//post()請求部分	
	axios.post(url,{
		adminCode:loginForm.value.adminCode,
		password:loginForm.value.password	
	})//服務(wù)響應(yīng)后，調(diào)用的函數(shù)  response 響應(yīng)對象
	  .then(function (response) {
		  //response.data 響應(yīng)正文
	    console.log(response.data);
		//判斷服務(wù)器響應(yīng)狀態(tài) 200成功  422失敗
		if(response.status==200){
			//1、記錄登錄狀態(tài)  sessionStorage 
			//存儲在瀏覽器的緩存中，超時或瀏覽器關(guān)閉 數(shù)據(jù)丟失
			//存：sessionStorage.setItem("自定義鍵",值)
			//?。?sessionStorage.getItem("自定義鍵")
			//sessionStorage.setItem("user_token",response.data.access_token)
			sessionStorage.setItem("isAuthenticated",true)	
			//登錄成功到首頁
			router.push("/home")
		}
	  })//請求異常處理
	  .catch(function (error) {
	    console.log(error);
	  });
  }
  function toReset(){
	loginForm.value.adminCode = ""
	loginForm.value.password = ""
  }
</script>
<style>
.h-60{
	height: 60px;
}
.p-10{
	padding: 10px;
}
</style>

?5.2 啟動vue項目，通過vue訪問后臺接口，進(jìn)行測試，結(jié)果跳轉(zhuǎn)到Home頁面，則配置成功，如果出現(xiàn)其他錯誤提示，請檢查以上步驟哪里配置錯誤，及時調(diào)整。

到此，整個過程整理完畢！文章來源地址http://www.zghlxwxcb.cn/news/detail-791885.html

到了這里，關(guān)于Vue3+Elementplus+Axios 入門教程詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！