vue.js elementui Vue3+Elementplus+Axios 入门教程详解

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 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组件框架的基本内容

        3.4.1.2 例如：复制 按钮组件的代码

  3.4.1.3 启动项目，访问链接，出现如下页面即可

  4. 创建登录组件：Login.vue

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

  4.2 访问ElementPlus官网，找到 Form表单组件，在Login.vue页面进行使用

4.3 创建Home.vue 组件

4.3.1 在src/components 目录下创建 Home.vue

4.3.2 Home.vue 组件内容（简单添加几个文字即可，例如：我是首页面）

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 发起网络请求

 5.2 启动vue项目，通过vue访问后台接口，进行测试，结果跳转到Home页面，则配置成功，如果出现其他错误提示，请检查以上步骤哪里配置错误，及时调整。

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

精彩文章