Vue Element Puls与Axios

保底不不不不歪真君

已于 2024-12-15 23:59:53 修改

阅读量878

点赞数 10

文章标签： vue.js 前端 javascript

于 2024-12-09 11:59:55 首次发布

本文链接：https://blog.youkuaiyun.com/Gwy001/article/details/144302878

版权

一、Element Plus组件实例

Element Plus 是一套为构建基于 Vue 3 的组件库而设计的 UI 组件库（UI Kit）。它为开发者提供了一套丰富的 UI 组件和扩展功能，帮助开发者快速构建高质量的 Web 应用。

使用用于编写的Node.js代码的相关软件，例如Visual Studio Code

1、创建项目文件夹

右击，在集层终端打开，输入

npm init vue@latest

接下来执行下图操作：

2、下载Element Plus组件

执行以上操作后我们要下载Element Plus组件

npm install element-plus --save

3、下载自动按需导入的插件

npm install -D unplugin-vue-components unplugin-auto-import

4、完善配置文件代码

我们要用浏览器到Element Plus的官网（一个 Vue 3 UI 框架 | Element Plus）中，找到指南--快速开始只要复制这三行代码

import AutoImport from 'unplugin-auto-import/vite'

import Components from 'unplugin-vue-components/vite'

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

到项目文夹件中的vite.config.js文件

加在原先导入代码的后面，然后复制这几行代码

 AutoImport({

      resolvers: [ElementPlusResolver()],

    }),

    Components({

      resolvers: [ElementPlusResolver()],

    }),

到plugins:[ ... ]中

5、使用组件

回到Element Plus页面中，找到组件，选择一个你喜欢的组件（这里选择Button组件）然后复制代码到App.vue中（覆盖原先的代码），在项目文件终端中输入

npm run dev

运行代码，蒋运行出来的链接复制到Google Chrome（这里推荐使用）中即可有该组件的效果。

二、更换组件主题

1、下载scss

打开项目文件集成终端，输入

npm i scss -D

2、创建样式文件

在项目文件夹中的src目录下创建styles/elelment/index.scss

3、书写样式代码

在Element Plus页面中找到指南--主题将scss复制粘贴到index.scss中，可以更改主题颜色

4、配置样式文件

在vite.config.js文件中的Components({resolverStyle:[ElementPlusResolver( )]})中配置{importStyle:"sass"}

在 resolve后面配置

css: {

    preprocessorOptions: {

      scss: {

        additionalData: `@use "~/styles/element/index.scss" as *;`,

      },

    },

  },

这里要将~改为@。

回到index.scss文件中需要将原来的

$colors: () !default;

$colors: map.deep-merge(

  (

    'white': #ffffff,

    'black': #000000,

    'primary': (

      'base': #409eff,

    ),

 ),


  $colors

);

改为

@forward 'element-plus/theme-chalk/src/common/var.scss' with (

  $colors: (

    'primary': (

      'base': green,

    ),

  ),

);

5、运行查看效果

最后按之前方法运行项目，在浏览器就可看到组件样式已改。

三、Axios

1、Axios是什么

Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。

Axios特性：

可以在浏览器中发送 XMLHttpRequests
可以在 node.js 发送 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
能够取消请求
自动转换 JSON 数据
客户端支持保护安全免受 XSRF 攻击

2、、下载Axios

这里用到的是

npm install --save axios

3、创建axios实例

// 设置基本 URL ，作为所有请求的前提 https://pcapi-xiaotuxian-front-devtest.itheima.n

4、配置Axios

https://www.apifox.cn/apidoc/shared-c05cb8d7-e591-4d9c-aff8-11065a0ec1de/api-67132164

5、封装测试接口

在 src/apis/testAPI.js

import httpInstantce from "@/utils/http"

 export function getCategory(){

   return httpInstantce({

     url:'/home/category/head'

 })

}

在main.js

6、发送get请求

在链接网页中发送get请求

7、运行项目

npm run dev

查看请求打印数据