Vue3+Elementplus+Axios 入门教程详解

已于 2024-06-14 16:03:15 修改
阅读量3.5k 收藏 20
点赞数 6
分类专栏： Vue Elementplus Axios 文章标签： vue.js elementui
于 2023-10-29 21:50:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/majingbobo/article/details/134099239
版权
Vue 同时被 3 个专栏收录
4 篇文章 1 订阅
订阅专栏
Elementplus
1 篇文章 0 订阅
订阅专栏
Axios
1 篇文章 0 订阅
订阅专栏

Vue3+Elementplus+Axios 入门教程详解

  • vue3项目创建
  • 安装第三方框架
  • vue整合第三方框架
  • 创建登录组件
  • vue整合axios

1. vue3项目创建

1.1 创建vue3项目，如：vuepro01

 备注：vue项目不会创建，请参考

Vue3 安装与配置 详细教程_安装vue3-CSDN博客

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 router

3.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 router

4.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页面，则配置成功，如果出现其他错误提示，请检查以上步骤哪里配置错误，及时调整。

到此，整个过程整理完毕！

老马聊技术
关注
  • 6
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
element-plus组件库快速上手教程
web18296061989的博客
03-03 3501
前言 一般我们开发单页面应用（关于单页面应用是什么在本专栏的另一篇文章中有介绍）时，特别是针对和我一样打算走后端开发的同学，对于前端只需要有了解的程度就行了，但是平常做项目练手时经常会要自己写前端的东西，所以本文的主旨就是让各位和我一样的后端开发的同学能快速使用element-ui提供的网页组件快速搭建自己需要的网页。 小tips 在Idea中安装一个叫“element”的插件，就可以在Idea中写element组件的关键词时快速生成基本代码，比如我现在想要生成一个el-button： 在安装了eleme
vue3 + elementplus 教程
mc_ChenF_B的博客
07-06 2426
--|shims-vue.d.ts -- 类文件(也叫定义文件)，因为.vue结尾的文件在ts中不认可，所以要有定义文件。---|store -- 是vuex的文件，主要用于项目里边的一些状态保存。---|router -- vue-router路由文件。index.ts中引入views包下的*.vue。---|views -- 用于存放我们写好的各种页面，即路由组件，比如Login.vue，Home.vue。---|assets -- 放置静态文件的目录，比如logo.pn就放在这里。
基于vue3+elementPlus的后台管理系统模板实现
03-03
基于vue3+elementPlus的后台管理系统模板实现
vue3+elementPlus后台管理系统
08-19
包含axios、echart和富文本编辑器
vue-element-plus-admin应用教程
最新发布
weixin_57893146的博客
07-02 524
host后缀文件中的appsetting.json中配置数据库信息，注意创建数据库时配置日志自增，然后将启动项设置为EF，用NuGet打开控制台（工具栏选NuGet），输入update-database，数据库就关联好了，再将启动项改为.host后缀文件，运行就行了，具体的后端写法先不说明，重点研究前端。举个例子，这里我登录用的自己的后端接口，其余的还是mock，我只需要在./api/login/index.ts中修改。设置请求成功状态码、白名单等：./src/constants/index.ts。
基于Vue3 + Element Plus 的后台管理系统详细教程
一步一个脚印，踏实努力，向着目标前进
06-13 2万+
以上是使用 Vue3 和 Element Plus 创建后台管理系统的基本步骤，但如果你想要实现一个实用的后台管理系统，还需要实现登录、权限管理、数据增删改查等功能。Vue 3 中最大的新特性是引入了 Composition API，它允许开发人员按照逻辑相关的方式组织代码，可以更好地复用组件和处理复杂的逻辑。在 data 中声明登录所需参数，初始化表单验证规则并在 method 中实现表单的提交、参数的验证与登录状态的切换。使用 Element Plus 提供的表格、表单等组件实现数据的增删改查。
使用vue3+element-ui plus 快速构建后台管理模板
m0_63622279的博客
10-12 1万+
使用vue3+element-ui plus 快速构建后台管理模板，分为侧边栏，顶部栏和内容区域三个块，前两个抽离为组件，内容区域使用routerview跳转即可，组件通信使用父子组件的通信方式。element ui plus 主要使用了 container布局容器以及icon图标。
Element Plus 实例详解（一）___安装设置
逆境清醒的博客
03-23 3万+
Element Plus是基于Vue 3，面向设计师和开发者的组件库。一、前言。二、安装方法。三、Element Plus用法。四、Element Plus 安装使用小实例
Element Plus 基本使用
qq_62377885的博客
03-23 4937
Element Plus 基本使用官网地址element-plus 基本使用具体部署请看。
Vue3+Element Plus搭建项目
weixin_38126537的博客
10-17 4234
本项目将基本最新的 vue cli 去创建，所以先检查和升级 vue 版本 一、Vue 搭建基础项目 安装升级 vue 安装 … 升级 vue 查看版本 vue -V 卸载 和 升级 npm uninstall vue-cli -g npm config get registry npm config set registry https://registry.npm.taobao.org npm i -g @vue/cli 在查看 vue 版本 vue -V 已经是 4.5.14 了。 创建项.
elementPlus学习（持续更新）
ArmadaDK的博客
06-29 1681
谁能想到element还要学啊，昨天写表单，发现自己完全不太懂表单的校验，有没有人和我一样在大学做项目表单从来不校验的，毕竟只有自己用，能展示就行。所以决定今天仔细看一下elementui的一些不熟悉的内容。
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
基于vue3+elementPlus的后台管理系统模板
02-18
Vue3和ElementPlus是当前前端开发领域中备受瞩目的技术栈。Vue3是Vue.js的最新版本，带来了诸多性能优化和开发体验改进，而ElementPlus则是一个基于Vue3的组件库，提供了丰富的UI组件，使得开发者能够快速构建出美观...
基于Vue3 +ElementPlus的智慧社区前台管理界面源码.zip
08-29
基于Vue3 +ElementPlus的智慧社区前台管理界面源码.zip基于Vue3 +ElementPlus的智慧社区前台管理界面源码.zip基于Vue3 +ElementPlus的智慧社区前台管理界面源码.zip基于Vue3 +ElementPlus的智慧社区前台管理界面源码...
vue3+电商后台管理系统+elementplus+axios
07-04
Vue3 是一个流行的前端JavaScript框架，它提供了许多改进和新特性，如...开发者可以通过查看和学习这些源码，了解如何在实际项目中运用Vue3、ElementPlus、axios和vue-router等技术栈，提升自己的前端开发能力。
Vue3.0项目实战+ElementUI从入门到实战
扶强的专栏
07-25 2万+
零.开篇介绍 Vue3 vs Vue2 Vue-cli构建Vue3项目 初尝Vue3 compositon Api 实战Element-plus + Axios +Vue3 一.Vue运行环境安装,为什么需要安装运行环境 预装环境 ：node v8+ 为什么需要运行环境 VUE项目==文件类型是.vue他是需要被编译成.js文件，才可以被浏览器识别 安装复杂度 一键安装 会不会增加学习成本 我们只是运用node环境，不需要单独学习 安装node环境下载 | ...
Vue3项目中引入ElementUI使用详解
热门推荐
蓑笠翁
06-18 3万+
Vue3项目中引入 ElementUI详解，ElementPlus引入使用。
vue3 + element 从0到1搭建前端基础框架
weixin_42854769的博客
12-04 3279
往往从0到1开发项目时发觉无从下手，或者很可能一步一个坑，因为大多基础框架公司已经搭建完毕的，新加入的成员也都是在此基础上进行功能模块的拓展。网上也鲜有详尽的全流程参考，多是某个局部功能的搭建，因此整理了一份包含以下方面的前端基础框架全流程搭建要义。
vue3+elementPlus项目搭建
程序猿的傻白甜
06-26 3363
vue3+elementPlus项目创建
vue3+ts+vite+elementplus+Router+axios搭建前端项目框架
01-26
以下是使用Vue3 + TypeScript + Vite + Element Plus + Router + Axios搭建前端项目框架的步骤： 1. 首先，确保你已经安装了Node.js和npm。你可以在命令行中运行以下命令来检查它们的版本： ```shell node -v npm -v ``` 2. 创建一个新的项目文件夹，并在该文件夹中打开命令行。 3. 在命令行中运行以下命令来初始化一个新的Vite项目： ```shell npm init vite ``` 在初始化过程中，你需要选择Vue作为模板，选择TypeScript作为语言，并填写项目名称。 4. 进入项目文件夹，并安装所需的依赖： ```shell cd your-project-name npm install ``` 5. 安装Vue Router、Vuex和Axios： ```shell npm install vue-router@next vuex@next axios ``` 6. 在项目文件夹中创建一个新的文件夹，用于存放页面组件和路由配置文件。 7. 在src文件夹中创建一个新的文件夹，用于存放页面组件。 8. 在src文件夹中创建一个新的文件夹，用于存放路由配置文件。 9. 在src/router文件夹中创建一个新的文件，命名为index.ts，并在其中编写路由配置： ```typescript import { createRouter, createWebHistory } from 'vue-router'; import Home from '../views/Home.vue'; const routes = [ { path: '/', name: 'Home', component: Home, }, // 添加其他页面的路由配置 ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` 10. 在src/main.ts文件中导入并使用Vue Router： ```typescript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app'); ``` 11. 在src/views文件夹中创建一个新的文件，命名为Home.vue，并在其中编写一个简单的页面组件： ```vue <template> <div> <h1>Welcome to Home Page</h1> </div> </template> <script> export default { name: 'Home', }; </script> ``` 12.src/App.vue文件中添加一个路由出口，用于显示组件： ```vue <template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: 'App', }; </script> ``` 13. 在src/main.ts文件中导入并使用Element Plus： ```typescript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; createApp(App).use(router).use(ElementPlus).mount('#app'); ``` 14. 运行以下命令来启动开发服务器： ```shell npm run dev ``` 15. 打开浏览器，并访问http://localhost:3000，你将看到一个简单的页面，其中包含"Welcome to Home Page"的文本。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值