创建一个普通的vue项目

news2024/10/1 1:28:37

1.用HbuilderX工具开发,新建项目时选择vue2.6.10
在这里插入图片描述
2.点击新建终端,输入npm run serve命令
在这里插入图片描述
3.vue项目配置elementui
可以按照官方方法使用npm i element-ui -S命令进行安装

在main.js配置3行,且要在最前面
1.import ElementUI from ‘element-ui’ //vue项目配置ElementUI
2.import ‘element-ui/lib/theme-chalk/index.css’
3.Vue.use(ElementUI);

4.运行时默认运行的页面就是app.vue,不需要登录就可以直接进入主页
5.如果主页需要调用接口还需要做如下配置
1)输入npm install axios
2) 在src目录下新建一个api文件夹,且在api文件夹中再新建一年request.js文件,复制以下代码


/*目录:/api/request.js, js文件中的代码如下*/
/* eslint-disable*/
import axios from 'axios'
 
axios.defaults.timeout = 100000 // 超时时间设置
axios.defaults.withCredentials = true // 是否跨域
axios.defaults.baseURL = 'http://6c7c337a.cpolar.io' // 域名或ip 【注意/url和后面的vue.config.js的/url相匹配】
 
// Content-Type 响应头
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8";
 
// 封装接口调用的方法
export const getAllData = params => {
  // return axios.get(`/accountBalance/get`, { params: params })
   return axios.get(`/accountBalance/get`)
}
/*在app.vue页面中使用request.js中的方法*/
import { getAllData } from './api/request.js'

methosd:{
		XXX(){
				getAllData().then((res) => {
							console.log(res)
					}).catch(error => {
							console.log(error);
					});
			}
}



/*默认是没有vue.config.js,需要自己在项目要目录创建并且做如下代理配置*/
module.exports = {
    // assetsDir: 'static',
    devServer: {
      proxy: {
        '/api': {  //之后就使用/api代指根路径
            target: 'https://......', // 后端或者服务器地址配置民
            changeOrigin: true,
            pathRewrite: {
              '^/api': ''
            }
        }
      }
    }
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

什么是VLAN?VLAN是如何工作的?

【微|信|公|众|号:厦门微思网络】 VLAN(Virtual Local Area Network)即虚拟局域网,是将一个物理的LAN在逻辑上划分成多个广播域的通信技术。 每个VLAN是一个广播域,VLAN内的主机间可以直接通信,而VLAN间则…

解锁搜索新境界!让文本语义匹配助你轻松找到你需要的一切!(快速上手baseline)

解锁搜索新境界!让文本语义匹配助你轻松找到你需要的一切!(快速上手baseline) 实现了多种相似度计算、匹配搜索算法,支持文本、图像,python3开发,pip安装,开箱即用。 文本相似度计算(文本匹配&…

【图像去噪】【TGV 正则器的快速计算方法】通过FFT的总(广义)变化进行图像去噪(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

jedis实现分布式锁案例:

一、redis配置类: import lombok.Data; import org.springframework.beans.factory.annotation.Value; import org.springframework.context.annotation.Configuration;Configuration Data public class JedisConfig {Value("${spring.redis.host}")priv…

行业报告:视频直播美颜sdk对互联网直播产业的影响与前景

随着互联网直播产业的不断崛起,直播内容的质量和用户体验已成为成功的关键因素之一。本篇报告将深入研究视频直播美颜sdk对互联网直播产业的影响,并探讨其未来的前景。 第一章:视频直播美颜sdk的基本概念 1.1 什么是视频直播美颜 SDK&#x…

【音视频】H264视频压缩格式

H264简介 H.264从1999年开始,到2003年形成草案,最后在2007年定稿有待核实。在ITU的标准里称为H.264, 在MPEG的标准里是MPEG-4的一个组成部分-MPEG-4 Part 10,又叫Advanced Video Codec,因此常常称为MPEG-4AVC或直接叫AVC。 压缩算…

RabbitMQ —— 深入发布确认

前言 面对在实际的生产环境中RabbitMQ服务宕机或者重启导致消息在投递阶段丢失的问题,我们需要采用消息的发布确认和回退消息两种机制来保证消息的不丢失。在这篇文章中,荔枝同样以demo实例的方式来梳理相关的知识,希望能够帮助到有需要的小伙…

土耳其市场最全开发攻略

2023年6月1日起,亚马逊土耳其站开始正式面向中国卖家试运营。土耳其这个古丝绸之路西域的重要节点,再一次吸引了来自东方众商家的目光。 土耳其是一个著名的贸易中心,向世界提供许多出口产品。土耳其总统埃尔多安指出,根据调整后…

[Linux 基础] linux基础指令(2)head,tail,Cal,find,grep,zip/unzip,tar,bc,uname

文章目录 1、head指令2、tail指令引申:如何拿到中间行内容方案一:方案二:方案三: 补充指令:(1) wc -l 文件名(2) uniq 文件名(3) sort 文件名 3、时间相关的指令4、Cal指令5、find指令:(灰常重要…

如何设置代理ip服务器地址

目录 前言 一、使用HTTP代理服务器 1. Python代码 2. Java代码 二、使用SOCKS代理服务器 1. Python代码 2. Java代码 三、使用代理池 1. Python代码 2. Java代码 总结 前言 代理服务器是一种可以隐藏真实IP地址并且保护用户隐私的工具。在某些情况下,比…

「聊设计模式」之备忘录模式(Memento)

🏆本文收录于《聊设计模式》专栏,专门攻坚指数级提升,助你一臂之力,带你早日登顶🚀,欢迎持续关注&&收藏&&订阅! 前言 设计模式是软件设计中经典的解决方案,旨在解决…

中科驭数联合处理器芯片全国重点实验室获得FPL 2023最佳论文奖

在2023年的FPGA领域顶级会议FPL (International Conference on Field Programmable Logic and Applications) 上,由中科驭数团队、中国科学院计算技术研究所处理器芯片全国重点实验室团队共同完成的论文《Co-ViSu: a Video Super-Resolution Accelerator Exploiting…

高教杯数学建模竞赛A题文章写作要点与示范

数学建模竞赛写作最重要的一点 LaTeX 很重要 非常重要 非常重要一定要规范 美观 写作注意事项 标准的附录详实的支撑材料和清晰的支撑材料说明 文章中所有的图片都应该包含在支撑材料中正确得引用参考文献模型的评价部分应当包含 模型优点模型缺点改进方案图像绘制应当标准假设…

通过uni.chooseImage返回的临时路径转为base64

uniapp官方API文档:https://uniapp.dcloud.net.cn/api/media/image.html#chooseimage 代码在后面 chooseimage的succes函数中的res.tempFilePaths,是图片的一个临时路径,没法直接传给后端接口使用,且接口需要的是base64格式的 ge…

使用dokcer部署分布式任务调度平台XXL-JOB

XXL-JOB是一个分布式任务调度平台,其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线,开箱即用。 部署docker略有需要看下面文档即可 ​​​​​​yum安装docker以及安装指定版本docker_yum安装指定版本dock…

迅为RK3588开发板修改编译工具路径

1 因为此章节以 rknn_yolov5_demo 在 RK3588 Linux 64 位平台上运行为例,所以修改 examples/rknn_yolov5_demo/build-XXX.sh 的编译工具路径,如下图所示: 2 修改 build-linux_RK3588.sh 文件,将 TOOL_CHAIN 修改为 gcc-arm-10.3…

set和map通过一颗红黑树进行封装

T是什么我不知道,但是我知道set 那么T一定得是key , map一定得是pair的数据类型 得用一颗模板是红黑树,实例化出map和set ---------------------------------------------------------------------------------------------------------…

如何与QVC 建立EDI连接?

QVC,全称为Quality, Value, Convenience(品质、价值、便利),成立于1986年,是一家全球领先的零售电视和在线零售商。作为一家多渠道零售商,QVC致力于为客户提供高品质、独特的商品,通过电视、互联…

山石网科国产化防火墙,打造全方位边界安全解决方案

互联网的快速发展促进了各行各业的信息化建设,但也随之带来了诸多网络安全风险。大部分组织机构采用统一互联网接入方案,互联网出口承担着内部用户访问互联网的统一出口和对外信息服务的入口,因此在该区域部署相匹配的安全防护手段必不可少。…

Spring WebFlux使用未加前缀的双通配符模式绕过安全性CVE-2023-34034

文章目录 0.前言漏洞漏洞介绍描述 1.参考文档2.基础介绍3.解决方案3.1. 升级版本 4.漏洞修复源码分析5. 漏洞利用示例 0.前言 背景:公司项目扫描到 WebFlux中使用"**"作为模式会导致Spring Security和Spring WebFlux之间 CVE-2023-34034漏洞 漏洞 高 | 2…