如何快速搭建一个完整的vue2+element-ui的项目-二

技术细节-继续配置

提示:你以为这样就完了吗,其实还有很多东西需要我们自己手写的

例如:

  • element-ui的配置
  • 样式重置配置
  • src使用@的配置
  • elinst配置
  • axios异步请求的二次封转配置
  • 语言国际化配置(这个看需求,我这里就不用配置了)
  • vuex的配置
  • mixins的配置
  • 开发环境的配置

  继续: 

axios异步请求的二次封转配置

 这个是每一个项目中都必须要的:

    首先下载axios 插件

    npm i axios -S

   其实在项目的src目录中新建 utils目录,然后再新建request.js

        src --> utils --> request.js 

代码: 

import Vue from 'vue'
import axios from 'axios'// 设置超时时长
axios.defaults.timeout = '30000'// request拦截器
axios.interceptors.request.use((config) => {return config
}, (error) => {return Promise.reject(error)
})// responese拦截器
axios.interceptors.response.use((res) => {return res.data
}, (error) => {Vue.$message.error(error.toString())return Promise.reject(error)
})/*** 设置请求header* @param {Object} headers*/
const setHeader = (headers) => {for (const key in headers) {axios.defaults.headers[key] = headers[key]}
}/*** POST请求* @param {String} url 地址* @param {Object} params 参数* @param {Object} headers headers*/
export const request= (url, params, method,headers = {}) => {return new Promise((resolve, reject) => {setHeader(headers)axios({url,method,data: method == 'post'? params:"",params: method =='get'?params:"" }).then((response) => {resolve(response.data)}).catch((error) => {reject(error)})})
}/*** 文件上传* @param {String} url 地址* @param {File} file 文件*/
export const uploadFile= (url, file) => {return new Promise((resolve, reject) => {const formData = new FormData()formData.append('file', file)formData.append('currentDate', Date.now())axios.post(url, formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {resolve(response.data)}).catch((error) => {reject(error)})})
}
vuex的配置 (项目自动完成了)

这个项目已经配置完成

mixins的配置 (这个主要是放公共的方法)

在src目录中新建mixins文件夹,然后再新建index.js

src  --> mixins  ---> index.js

export default {data() {return {};},created(){},methods: {},
};

在使用mixins的时候要注意了: 他的方法 和 vue的方法 的先后使用问题

  

开发环境的配置 (这里的开发环境是指当前是 开发 ,  生产,  测试)

  配置如下:在项目的根目录新建三个文件

 都写相同的代码:

NAME="开发环境 dev"

VUE_APP_API_URL=http://127.0.0.1   // url为不用环境的地址

小结

提示:跨域我就没有写了,这个百度就有

项目搭建完成之后,希望大家自己启动然后测试一下,有问题的哈,可以在想交流,

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/281220.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

淘宝店铺如何从1688一键铺货?官方授权API接口,可满足多样化上货需求

那么新手卖家如何将1688的源头厂货一键铺货到淘宝店铺呢?下面我教大家几招: 1、通过淘宝复制一键复制上货 淘宝API接口采集 taobao.item_get 公共参数 名称类型必须描述keyString是调用key(必须以GET方式拼接在URL中)secretStr…

未来已来?国内10家AI大模型盘点(附体验网址)

名人说:莫道桑榆晚,为霞尚满天。——刘禹锡(刘梦得,诗豪) 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 目录 1、阿里云——通义千问2、科大讯飞——星火大模…

Windows 11 鼠标右键可选择 cmd 命令行选项

** Windows 11 鼠标右键可选择 cmd 命令行选项 ** 在文件夹内打开命令行,只能使用 Windows 自带的 PowerShell , 作为一个 cmd 重度使用用户来说很是折磨,需要打开 cmd 然后切换盘符再 cd 。。。 现在咱们自己创建一个可以打开 cmd 的方法…

Linux hook系统调用使你文件无法删除

文章目录 前言一、什么是hook技术二、Linux hook种类三、系统调用表hook3.1 查看删除文件用到系统调用3.2 获取系统调用函数3.3 编写hook函数3.4 替换hook函数3.5 测试 参考资料 前言 hook技术在Linux系统安全领域有着广泛的应用,例如通过hook技术可以劫持删除文件…

Unity Live Capture 中实现面部捕捉同步模型动画

Unity Face Capture 是一个强大的工具,可以帮助你快速轻松地将真实人脸表情捕捉到数字模型中。在本文中,我们将介绍如何在 Unity Face Capture 中实现面部捕捉同步模型动画。 安装 |实时捕获 |4.0.0 (unity3d.com) 安装软件插件 安装 Live Capture 软件…

C++利用开散列哈希表封装unordered_set,unordered_map

C利用开散列哈希表封装unordered_set,unordered_map 一.前言1.开散列的哈希表完整代码 二.模板参数1.HashNode的改造2.封装unordered_set和unordered_map的第一步1.unordered_set2.unordered_map 3.HashTable 三.string的哈希函数的模板特化四.迭代器类1.operator运算符重载1.动…

【Node.js从基础到高级运用】十三、NodeJS中间件高级应用

在现代web开发中,Node.js因其高效和灵活性而备受青睐。其中,中间件的概念是构建高效Node.js应用的关键。在这篇博客文章中,我们将深入探讨Node.js中间件的高级应用,包括创建自定义中间件、使用第三方中间件等。我们将从基础讲起&a…

旅游小程序在旅游营销中的作用及其优势

一、引言部分 随着科技的发展,移动互联网已经成为我们日常生活的一部分。对于旅游业来说,这也意味着新的机遇和挑战。其中,旅游小程序的出现为旅游业带来了全新的营销方式。本文将深入探讨旅游小程序在旅游营销中的作用以及其具体优势。 二、…

day12-SpringBootWeb 登录认证

一、登录功能 Slf4j RestController public class LoginController {Autowiredprivate EmpService empService;PostMapping("/login")public Result login(RequestBody Emp emp){log.info("员工登录: {}", emp);Emp e empService.login(emp);//登录失败, …

Java小项目--满汉楼

Java小项目–满汉楼 项目需求 项目实现 1.实现对工具包的编写 先创建libs包完成对jar包的拷贝和添加入库 德鲁伊工具包 package com.wantian.mhl.utils;import com.alibaba.druid.pool.DruidDataSourceFactory;import javax.sql.DataSource; import java.io.FileInputStream…

C# 设置AutoScroll为true没效果的原因分析和解决办法

C#中添加tabControl 分页,将autoscroll设置为true发现缩小窗口没有滚动条效果。该问题出现后,检索发现也有很多人询问了该问题,但是都没有给出解决方案。 原因是内部button的属性Anchor设置为top、left、right、bottom导致的缩小界面窗口也没…

QT_day2:2024/3/21

作业1:使用QT完成一个登录界面 要求: 1. 需要使用Ui界面文件进行界面设计 2. ui界面上的组件相关设置,通过代码实现 3. 需要添加适当的动图 源代码: #include "widget.h" #include "ui_widget.h"Widget…

数据结构:链式二叉树

对于二叉树而言,如果不是完全二叉树,就不再适合用数组存储了 在任意二叉树中,度为0的节点都比度为2的节点多1个,即 n0 n2 1 二叉树结构 typedef struct BinTreeNode {int val;struct BinTreeNode* left;struct BinTreeNode* right; }BTNode; 二叉树…

MySQL高级学习笔记

1、MySQL架构组成 1.1 高级MySQL介绍 什么是DBA? 数据库管理员,英文是Database Administrator,简称DBA; 百度百科介绍 数据库管理员(简称DBA),是从事管理和维护数据库管理系统(D…

算法系列--递归

一.如何理解递归 递归对于初学者来说是一个非常抽象的概念,笔者在第一次学习时也是迷迷糊糊的(二叉树遍历),递归的代码看起来非常的简洁,优美,但是如何想出来递归的思路或者为什么能用递归这是初学者很难分析出来的 笔者在学习的过程中通过刷题,也总结出自己的一些经验,总结来…

【什么是Internet?网络边缘,网络核心,分组交换 vs 电路交换,接入网络和物理媒体】

文章目录 一、什么是Internet?1.从具体构成角度来看2.从服务角度来看 二、网络结构1.网络边缘1.网络边缘:采用网络设施的面向连接服务1.1.目标:在端系统之间传输数据1.2.TCP服务 2.网络边缘:采用网络设施的无连接服务2.1目标&…

探讨Java代码混淆加固工具

摘要 本篇博客将介绍几种常用的Java代码混淆工具,如ProGuard、Allatori Java Obfuscator、VirboxProtector、ipaguard和DashO。我们将深入探讨它们的特点、功能以及在保护Java应用程序安全方面的作用。此外,还将强调在使用Java代码混淆工具时需要注意的…

openssl3.2 - note - Decoders and Encoders with OpenSSL

文章目录 openssl3.2 - note - Decoders and Encoders with OpenSSL概述笔记编码器/解码器的调用链OSSL_STORE 编码器/解码器的名称和属性OSSL_FUNC_decoder_freectx_fnOSSL_FUNC_encoder_encode_fn官方文档END openssl3.2 - note - Decoders and Encoders with OpenSSL 概述 …

‍Java OCR技术全面解析:六大解决方案比较

博主猫头虎的技术世界 🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能! 专栏链接: 🔗 精选专栏: 《面试题大全》 — 面试准备的宝典!《IDEA开发秘籍》 — 提升你的IDEA技能!《100天精通鸿蒙》 …

[ C++ ] STL---stack与queue

目录 stack简介 stack的常用接口 queue简介 queue的常用接口 stack的模拟实现 queue的模拟实现 stack简介 1. stack是具有后进先出操作的一种容器适配器,其只能从容器的一端进行元素的插入与删除操作; 2. stack是作为容器适配器被实现的&#xff0…