vue3工程+axios+elementplus之前端学习笔记

这个笔记是在自己学习的过程中根据现实用到的和学到的整理出来的，大概会有缺失，错误等，主要是给鼓励自己学习，遇到写不下去的环境给自己一个参考，请各位大佬发现问题提出问题时能嘴下留情，也盼望多提建议，谢谢。
本笔记长期更新（更新日期2024年9月24日）

  
这个笔记更得当后端入门的工程师
用的是组合式API，并非选项式API，然后用到了TypeScript作为主要的逻辑写法(后端工程师更能继承的一种)，利用到了Axios和Element-plus
首先需要安装好nodejs，npm等，并设置好环境变量，在有网络的条件下才能举行所有内容
第1章.vue3

1.1.vue项目标创建

1.1.1.创建底子的vue项目

找一个喜欢的地方，利用管理员身份运行CMD

1. npm init vue@latest

复制代码

然后会让你输入项目名称，输入一个你需要的，回车，然后会出现很多选项，选YES和NO
选项意义YES OR NOAdd TypeScript是否加入TypeScript组件YESAdd JSX Support是否加入JSX支持YESAdd Vue Router for Single Page Application development是否为单页应用步伐开发添加Vue Router路由管理组件YESAdd Pinia for state management?是否添加Pinia组件来举行状态管理YESAdd Vitest for Unit Testing?是否添加Vitest来举行单元测试NOAdd an End-to-End Testing Solution是否添加端到端测试NOAdd ESLint for code quality是否添加ESLint来举行代码质量检查YESAdd Prettier for code formatting是否添加Prettier代码格式化工具YES 1.1.2.(选择)仅需做一次

同样是管理员身份运行CMD，这个的作用是安装TS官方提供的编译器，代码如下:

1. npm install -g typescript

复制代码

1.1.3.为项目安装axios和element-plus

需要进入到项目路径下，管理员身份进入CMD下令，分别实验如下下令

1. npm install element-plus --save
3. npm install axios

复制代码

然后到创建好的Vue项目内里的main.ts设置ElementPlus(尽大概参照官网)，本笔记编写时可以追加一下设置信息就可以

1. import ElementPlus from 'element-plus'
2. import 'element-plus/dist/index.css'
3. /*下面这个的作用是让element的组件变成中文的*/
4. import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
5. import * as ElementPlusIconsVue from '@element-plus/icons-vue'
7. /*引入ElementPlus的Icon组件*/
8. for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
9.   app.component(key, component)
10. }
11. app.use(ElementPlus, {locale: zhCn})
13. app.mount('#app')

复制代码

在env.d.ts引入element的中文语言包

1. declare module 'element-plus/dist/locale/zh-cn.mjs'

复制代码

1.1.4.清算项目

因为Vue脚手架创建的项目有演示文件，以是我们需要删掉多余的东西：

• 删除components中的vue文件
  
• 删除views目次的vue文件
  
• 清空App.vue的内容，保留基本框架
  
• 删除main.css的内容
  

第2章.Axios

2.1.常见的通信方式

最常用的几个通信方式无非就是GET，POST，PUT，DELETE，但是路径拼接和传送方式照旧多少会有一些区别的，下面就简朴介绍一下拼接的方法和后端吸收的方法

1. const result = await axios.get('请求地址')

复制代码

上面这就是个非常简朴的发送没有参数的GET请求，然后把吸收到的数据生存在result中，对应的，发送GET,POST,PUT,DELETE请求就直接改get那个单词就可以，然后说一下那个括号写的东西的环境和后端怎样吸收。
括号里的东西举例(~是路径)后端怎样吸收(‘地址’,json数据)(‘~/users’,userForm)一样平常是POST，PUT请求利用这种，修改大概添加功能，后端利用@RequestBody吸收(‘地址/{数据}’)(‘~/users/1’)一样平常是GET，DELETE请求利用这种，查询或删除功能
GET请求直接利用同类型同名变量吸收，大概利用封装类吸收
DELETE请求利用@PathVariable吸收(‘地址?数据1=数据1&数据2=数据2’)(‘~/users/name=张三&age=18’)一样平常是GET，请求利用这种，查询功能GET请求一样平常直接利用封装类吸收，也可以一个个吸收，比较麻烦(‘地址?数据1=数据1,数据2,数据3’)(‘~/users?id=1,2,3’)一样平常是DELETE请求利用这种，删除功能利用，利用@RequestParam的数组大概集合吸收(‘地址/{数据1,数据2,数据3}’)(‘~/users/1,2,3’)一样平常是DELETE请求利用这种，删除功能，利用@PathVariable数组大概集合吸收 2.2.封装TS文件(解决跨域问题)

为相识决请求路径难以维护和数据分析繁琐的环境，一样平常会封装一个请求处理的工具类，在这个工具类中对axios举行了封装，一样平常这个文件会单独封装到一个文件夹例如/src/utils内里，下面代码直接用就可以

1. import axios from 'axios'
3. //创建axios实例对象
4. const request = axios.create({
5.     //如果直接发请求的话或者用代理服务器，这个可以直接写路径，下面那个写法还要去配置一个东西，同时解决跨域问题
6.   baseURL: '/api',
7.   timeout: 600000
8. })
10. //axios的响应 response 拦截器
11. request.interceptors.response.use(
12.   (response) => { //成功回调
13.     return response.data
14.   },
15.   (error) => { //失败回调
16.     return Promise.reject(error)
17.   }
18. )
20. export default request

复制代码

一样平常还会为每个vue文件创建一个对应名字的ts文件，专们用来封装请求，利用时直接调用就可以，一样平常这个文件会单独封装到一个文件夹例如/src/api内里
这样2.1内里的那个代码就可以改成下面的样子，然后要利用的时间直接跟调用方法一样直接调用就可以

1. import request from "@/utils/request"
2. import type { ResultModel } from "./model/model"
4. //这个从model拿到的ResultModel相当于Java里面的封装类
5. //下面这个尖括号括号左边是发送的数据，any表示任意类型，后面那个是接收的数据，我这里面封装了code,msg,data
6. export const queryAllApi = () => request.get<any, ResultModel>('直接写要拼接的路径就可以了，不用写协议+域名+端口了')

复制代码

model.ts示例:

1. //统一响应结果接口
2. export interface ResultModel {
3.   code: number,
4.   msg: string,
5.   data: any
6. }

复制代码

调用演示：
在vue文件的<scrpit>内里

1. import {  queryAllApi } from '@/api/dept'
3. const search = async () => {
4.   const result = await queryAllApi()
5.   list.value = result.data
6. }

复制代码

然后解决转发和跨域问题
在 vite.config.ts 中设置前端请求服务器的信息

1.   server: {
2.     proxy: {
3.       '/api': {
4.           /*这个是转发到那个接口*/
5.         target: 'http://localhost:8080',
6.         secure: false,
7.             /*这个是解决跨域*/
8.         changeOrigin: true,
9.             /*这个是删除路径上的/api*/
10.         rewrite: (path) => path.replace(/^\/api/, ''),
11.       }
12.     }
13.   }

复制代码

这样我们发送的请求就会从http://localhost:5173/api/users酿成http://localhost:8080/users
第3章.路由的利用

/src/router/index.ts就是路由文件，假如需要用到结构嵌套(例如我保持导航栏不变，只改变main窗口的内容就可以用这种方式，这个路由也对应着不同的地址跳转到哪个vue文件来表现)
假如是按照上面的创建方式创建的，我们一样平常能看到框架已经存在了，只需要更改设置就可以了
框架示例：

1. import { createRouter, createWebHistory } from 'vue-router'
3. const router = createRouter({
4.   history: createWebHistory(import.meta.env.BASE_URL),
5.   routes: [
6.     {
7.       /*这里就是跳转的地址了*/
8.       path: '/',
9.       /*起个名字，不能重复*/
10.       name: 'home',
11.       /*跳转到的组件名称,例如我们访问地址+/就是调用这个vue现实*/
12.       component: () => import('@/views/IndexView.vue'),
13.     }
14.   ]
15. })
17. export default router

复制代码

可以通过设置redirect来重定向，让一个地址调用时跳转到另一个地址，假如有子文件，就好比导航栏的结构文件不变，只改变内里表现的main，就可以利用children数组来定义子文件
例如：

1. import { createRouter, createWebHistory } from 'vue-router'
3. const router = createRouter({
4.   history: createWebHistory(import.meta.env.BASE_URL),
5.   routes: [
6.     {
7.       /*虽然这里写了/路径，但是到下面的重定向会被定向到/index上*/
8.       path: '/',
9.       name: 'home',
10.       component: () => import('@/views/layout/IndexView.vue'),
11.       /*调用/路径会自动跳转到/index*/
12.       redirect: '/index',
13.       /*这里面写子文件*/
14.       children: [
15.         {
16.           path: '/index',
17.           name: 'index',
18.           component: () => import('@/views/index/index.vue')
19.         },
20.         {
21.           path: '/user',
22.           name: 'user',
23.           component: () => import('@/views/user/index.vue')
24.         }
25.       ]
26.     }
27.   ]
28. })
30. export default router

复制代码

然后假如要用到子文件来表现main的地方加上这个标签

1. <router-view/>

复制代码

第4章.Element-plus用法

麻烦各位先看官网快速开始 | Element Plus (element-plus.org)吧，我学的不深，等我学了一些好玩的特性，简便的方法再来分享

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。