Vue3+Elementplus+Axios 入门教程详解
- vue3项目创建
- 安装第三方框架
- vue整合第三方框架
- 创建登录组件
- vue整合axios
1. vue3项目创建
1.1 创建vue3项目，如：vuepro01
备注：vue项目不会创建，请参考CSDNhttps://mp.csdn.net/mp_blog/creation/editor/134034891
1.2. 测试项目是否正常启动：
1.2.1 进入项目根目录
cd vuepro01
1.2.2 执行 npm run serve
1.2.3 访问路径即可
2. 安装第三方框架
2.1 第三方框架
2.1.1 element-plus 解决界面UI问题（基于vue3的UI框架）
2.1.2 bootstrap 引用基础样式
2.1.3 axios 异步ajax进行数据交互(用于向后台发送请求)
2.1.4 vue-router 路由框架 （可以帮助我们管理应用程序中的路由，从而使用户能够访问应用程序的各个部分）
2.2 在vuepro01 项目中安装
2.2.1 进入 vuepro01 根目录，执行如下命令
npm install element-plus
npm install bootstrap
npm install axios
npm install vue-router
2.2.1 执行如下：
2.2.3 检查是否安装成功，执行：npm ls
3. vue整合第三方框架
3.1 VSCode 打开 vue项目
3.2 创建router路由的设置文件
3.2.1 在src下创建router目录，在router目录下创建index.js文件
3.2.2 index.js 的基本内容
import {createRouter, createWebHistory} from 'vue-router'
//-异步加载组件
import { defineAsyncComponent } from 'vue'
//-路由规则
const myRoutes = [
]
//-创建路由对象
const router = createRouter({
history: createWebHistory(),
routes: myRoutes
})
//-将路由暴露出去，其他文件才能访问
export default router3.3 在 main.js 中导入 框架
import { createApp } from 'vue'
import App from './App.vue'
//导入axios框架
import Axios from 'axios'
//导入bootstrap样式
import 'bootstrap/dist/css/bootstrap.min.css'
//导入ElementPlus框架
import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'
//导入 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官网，找到组件，将任意组件复制到App.vue中，检测其是否显示即可
3.4.1.1 首先将App.vue中不相关的内容删除掉，只剩下vue组件框架的基本内容
<template>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
</style>3.4.1.2 例如：复制 按钮组件的代码
<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 启动项目，访问链接，出现如下页面即可
4. 创建登录组件：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官网，找到 Form表单组件，在Login.vue页面进行使用
<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">系统登录</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 创建Home.vue 组件
4.3.1 在src/components 目录下创建 Home.vue
4.3.2 Home.vue 组件内容（简单添加几个文字即可，例如：我是首页面）
<template>
<div>
我是首页面
</div>
</template>
<script setup>
</script>
<style>
</style>4.4 路由文件的配置：（项目先启动登录页面）
import {createRouter,createWebHistory} from 'vue-router'
//- 异步加载组件
import {defineAsyncComponent} from 'vue'
//- 路由规则
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'))
}
]
//- 创建路由对象
const router = createRouter({
history: createWebHistory(),
routes: myRouter
})
//全局守卫 访问非Login界面时，验证是否已登录
router.beforeEach((to,from,next)=>{
//判断是否已登录 查sessionStorage中是否有isAuthenticated信息
let isAuthenticated = sessionStorage.getItem("isAuthenticated")
//判断路由的别名不是登录且未进行登录认证，就跳转去登录
if(to.name!="Login"&&!isAuthenticated){
next({name: "Login"})
}else if(to.name=="Login"&&isAuthenticated){//已登录，不允许退回到登录页面
next({name:"Home"})
}else{
next()
}
})
//-将路由暴露出去，其他文件才能访问
export default router4.4 启动项目，访问项目
5. vue 整合 axios 发起网络请求
5.1 Login.vue 发起网络请求
<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">系统登录</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
})//服务响应后，调用的函数 response 响应对象
.then(function (response) {
//response.data 响应正文
console.log(response.data);
//判断服务器响应状态 200成功 422失败
if(response.status==200){
//1、记录登录状态 sessionStorage
//存储在浏览器的缓存中，超时或浏览器关闭 数据丢失
//存：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访问后台接口，进行测试，结果跳转到Home页面，则配置成功，如果出现其他错误提示，请检查以上步骤哪里配置错误，及时调整。文章来源：https://www.toymoban.com/news/detail-791885.html
到此，整个过程整理完毕！文章来源地址https://www.toymoban.com/news/detail-791885.html
到了这里，关于Vue3+Elementplus+Axios 入门教程详解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![SSM(Vue3+ElementPlus+Axios+SSM前后端分离)--功能实现[五]](https://imgs.yssmx.com/Uploads/2024/02/633520-1.png)
![SSM(Vue3+ElementPlus+Axios+SSM前后端分离)--搭建Vue 前端工程[二]](https://imgs.yssmx.com/Uploads/2024/02/635781-1.png)
