vs code 搭建 vue 开发环境

1. vs code 环境准备好

2. 安装vue环境:

nodejs:官网下载安装后 输入 node -v 验证是否安装成功

vue-cli : 输入 npm install -g @vue/cli  安装后,vue --versoin 验证

3. 创建项目并启动:

进入目标文件夹,输入  vue create your-project-name ,创建vue 项目

以管理员身份打开 vs code ,导入 vue 项目

终端执行 npm run serve  访问: http://localhost:8080/

现在开发越来越简单了。

4. 在创建的项目里 完成请求后端的接口:

安装 axios

npm install axios 

点击事件监听 前端vue代码片段,加在HelloWorld.vue 的 template 标签内:

<h3>
    <button @click="requestApi">请求</button>
 </h3>

前端vue 完成http请求代码片段,加在HelloWorld.vue 的 script 标签内:

import axios from 'axios'; 

methods: {
    requestApi() {
      axios.get('http://localhost:88/test/v1')
        .then(response => {
          this.response = response.data;
          console.log('Data received:', this.response);
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    },
  }

如果这样直接请求后端接口,会存在跨域问题。解决方式 是使用 nginx 做一下转发,nginx配置:

location /test {
            proxy_pass  http://localhost:8082;
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
 } 

启动nginx,就可以访问通了。

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

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

相关文章

MySQL性能分析工具——EXPLAIN

性能分析工具——EXPLAIN 1、概述 定位了查询慢的SQL之后&#xff0c;我们就可以使用EXPLAIN或DESCRIBE工具做针对性的分析查询语句 。 DESCRIBE语句的使用方法与EXPLAIN语句是一样的&#xff0c;并且分析结果也是一样的。 MySQL中有专门负责优化SELECT语句的优化器模块&…

2023职称继续教育--“十四五”大数据产业发展规划

单选题&#xff08;共7题&#xff0c;每题5分&#xff09; 1、截至2021年4月&#xff0c;我国已经有&#xff08;&#xff09;个省级和地市级数据开放平台。 B、174 2、在“十四五”规划中&#xff0c;“大数据”出现过&#xff08;&#xff09;次。 C、43 3、我国已建设&…

如何成功完成一个Java项目答辩

目录 如何成功完成一个Java项目答辩一、准备阶段二、答辩阶段三、答辩后阶段 案例&#xff1a;在线图书管理系统项目背景需求分析系统架构设计核心功能展示关键代码展示测试结果遇到的问题及解决方案总结与未来展望 如何成功完成一个Java项目答辩 在编写这篇博客时&#xff0c…

Android Dialog软键盘弹出问题完美解决办法

一、问题&#xff1a; Dialog中有输入框时&#xff0c;显示后无法自动弹起软键盘&#xff0c;原因就不赘述了&#xff0c;自行Google。 一、解决办法&#xff1a; 开启独立线程&#xff0c;线程中使用while循环&#xff0c;循环调用弹起软键盘方法&#xff0c;直至showSoftI…

FreeRTOS基础(五):任务挂起与恢复

今天我们将探讨FreeRTOS中的两个非常重要的函数&#xff1a;任务挂起和恢复函数。在实际的嵌入式系统开发中&#xff0c;我们常常需要在特定条件下暂停某些任务的执行&#xff0c;而在满足某些条件后再恢复这些任务的执行。这就像我们日常生活中的“暂停”和“继续”按钮。无论…

js扣代码

调试的时候保持一致.参数一致.注意断点位置,否则会有作用域问题 new之后this的问题. 改函数名字是为了方便. 关于对象两种方案.滞空,完全不去管. 对象不能直接参与计算,一定是对象里的属性方法. 不管的情况,需要写日志笔记,方便检索到位置.建议唯一性.快速检索定位. 出现上述不…

SQL深度解析:从基础到高级应用

SQL&#xff08;Structured Query Language&#xff09;是用于管理关系型数据库的语言&#xff0c;广泛应用于数据管理、分析和查询。本文将详细介绍SQL的基础知识、高级特性以及一些常见的代码示例&#xff0c;帮助您全面掌握SQL的应用。 一、SQL基础语法 数据库操作 创建数据…

【Kubernetes】Pod理论详解

一、Pod基础概念&#xff1a; Pod是kubernetes中最小的资源管理组件&#xff0c;Pod也是最小化运行容器化应用的资源对象。一个Pod代表着集群中运行的一个进程。kubernetes中其他大多数组件都是围绕着Pod来进行支撑和扩展Pod功能的&#xff0c;例如&#xff0c;用于管理Pod运行…

Unix、Linux 软件包管理快速入门对照

Linux&#xff08;RHEL、Ubuntu&#xff09;或者 Unix&#xff08;macOS、FreeBSD&#xff09;可以参看下表快速入门: 命令功能/系统Darwin (macOS)FreeBSDDebian/UbuntuRHEL&#xff08;dnf yum&#xff09;搜索和查找软件包brew searchpkg searchapt listyum list查看软件包…

生态系统服务功能之碳储量

大家好&#xff0c;这期开始新生态系统服务功能即碳储量的计算&#xff0c;这部分较简单&#xff0c;下面让我们开始吧&#xff01;&#xff01;&#xff01; 碳储量的计算公式 生态系统通过从大气中释放和吸收二氧化碳等温室气体来调节地球气候&#xff0c;而森林、 草原和沼…

基于Open3D的点云处理23-Web可视化

Open3D Web 可视化工具可在现代浏览器中实现3D 模型的高级渲染和可视化。 首先在本地或远程计算机上启动可视化服务器,然后可以从任何具有现代浏览器的设备上查看3D 模型。Web 可视化服务器和客户端通过WebRTC(Web 实时通信)协议进行通信。 将Open3D Web 可视化服务器作为独…

Stable Diffusion生成图片的参数查看与抹除方法

前几天分享了几张Stable Diffusion生成的艺术二维码&#xff0c;有同学反映不知道怎么查看图片的参数信息&#xff0c;还有的同学问怎么保护自己的图片生成参数不会泄露&#xff0c;这篇文章就来专门分享如何查看和抹除图片的参数。 查看图片的生成参数 1、打开Stable Diffus…

AI大模型辅助开发

作为现阶段最流行的AI大模型辅助开GLM-4究竟对程序员影响多大&#xff0c;达到了什么程度&#xff1f; 首先AI大模型在开发过程中辅助作用已经很大了&#xff0c;但是还处于辅助阶段&#xff0c;远没有达到自主开发的阶段。现阶段根本达不到代替程序员开发的地步。但是它在部分…

炸裂的开源AI语音生成模型ChatTTS

今天看到GitHub上开源了一个非常厉害的AI语音生成模型ChatTTS&#xff0c;可以生成和人类声音非常接近的语音&#xff0c;而且有语气、语调、可以停顿和发出笑声&#xff0c;再也没有了以前的AI味道 体验地址&#xff1a;https://colab.research.google.com/drive/1MYep5f0-BJ…

php反序列化入门

一&#xff0c;php面向对象。 1.面向对象&#xff1a; 以“对象”伪中心的编程思想&#xff0c;把要解决的问题分解成对象&#xff0c;简单理解为套用模版&#xff0c;注重结果。 2.面向过程&#xff1a; 以“整体事件”为中心的编程思想&#xff0c;把解决问题的步骤分析出…

就业班 第四阶段(docker) 2401--5.29 day3 Dockerfile+前后段项目若依ruoyi

通过Dockerfile创建镜像 Docker 提供了一种更便捷的方式&#xff0c;叫作 Dockerfile docker build命令用于根据给定的Dockerfile构建Docker镜像。docker build语法&#xff1a; # docker build [OPTIONS] <PATH | URL | ->1. 常用选项说明 --build-arg&#xff0c;设…

Windows安装Docker

启用虚拟化 打开 勾选Hyper-V 验证 下载Docker Docker官网 阿里云 安装Docker 傻瓜式安装 遇到问题&#xff1a; 打开命令窗口&#xff0c;执行命令&#xff1a; wsl --update升级完成之后点击Restart按钮即可 切换阿里镜像 https://fmkoym4e.mirror.aliyuncs.com

Firebase Local Emulator Suite详解

文章目录 Firebase Local Emulator Suite 组件安装和使用步骤1. 安装 Firebase CLI2. 初始化 Firebase 项目3. 配置模拟器4. 启动模拟器5. 配置应用程序使用本地模拟器 常见用途 Firebase Local Emulator Suite 是一组本地服务&#xff0c;可以模拟 Firebase 平台的在线服务&am…

每天写两道(五)合并两个有序链表、最长回文子串

21.合并两个有序链表 . - 力扣&#xff08;LeetCode&#xff09; 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4] (1)迭代法…

小白教你搭建测试环境(docker部署版)

如何使用docker创建多数据库端口&#xff08;云服务器版&#xff09; 背景&#xff1a; 需要搭建一个测试环境&#xff0c;同时还需要不同的端口映射mysql端口。那么我采用的docker拉取mysql镜像&#xff0c;通过宿主机和docker容器端口映射完成。 准备一台云服务器服务器安装…