vscode+live server——更改端口号——基础积累

news2025/1/21 12:23:02

最近在写前台,通过jq写的,之前我一直嚷嚷jq基础薄弱,现在练手的来了。。。。

运行页面的时候,可以使用live server

1.vscode软件中安装live server

在这里插入图片描述

2.在html页面右击,有个open with live server

在这里插入图片描述

3.电脑默认的浏览器会自动打开一个页面:

在这里插入图片描述

4.接口跨域时,需要后端将页面地址写入到白名单中,但是由于每次live server时打开的页面链接端口都不太一样,因此此时需要更改live server启动的端口号

5.更改live server启动端口号

5.1 使用快捷键ctrl+,打开设置面板

在这里插入图片描述

5.2 输入 live server关键字,并切换到工作区!!!

在这里插入图片描述

5.3 点击在 setting.json 中编辑

在这里插入图片描述

5.4 在配置文件中添加——"liveServer.settings.port": xxxx,

在这里插入图片描述
重点就是这一行:"liveServer.settings.port": 64467,
此时的端口号可以跟后端协商,统一一个端口号。

保存配置后,重新在html页面中右击执行open with live server,此时就会发现端口号已改。

完成!!!多多积累,多多收获!!!

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

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

相关文章

Vue3中使用hooks,hooks究竟是个啥?如何理解

1.前言 最近被hooks这个词老是被提出,我经常听到但是又不会用,于是乎抽时间认真学习一下。 2.vue3 hooks 2.1 为什么vue3 可以使用hooks 因为vue2由选项式Api转为组合式Api。底层源码改了好多。 组合式API的好处; 就是在函数内可以使用声…

使用pynecone开发python web应用

环境•windows 10 64bit•python 3.8.15•pynecone 0.1.14简介Pynecone 是一个基于纯 python 的用于开发 web app 的开源框架,它依赖于 nodejs,不过不需要另外编写前端代码,这对于没有接触过前端的朋友是非常友好的。安装第一步,安…

Vue项目常见的错误以及解决办法

错误分类 vue项目中遇到的问题大体上分为两类:一类是基础的语法错误,另一类就是其它错误 这里简单分享以下我在项目中遇到的错误和解决办法,如果你也有,希望对你会有帮助 GET http://dida100.com:8888/api/cart 401 (Unauthoriz…

【前端修炼场】 — HTML常用的标志语言

此文为【前端修炼场】第三篇,上一篇文章链接:上一篇 文章目录前言标志语言基本结构介绍声明介绍标签修饰编码形式常用HTML标签标题标签段落标签换行标识水平线标识加粗标识倾斜标识删除线标识下划线标识上标 / 下标标识总结前言 之前我们使用过的那些标…

React 面向组件编程(上)

目录前言:一、组件的基本理解和使用1. 函数式组件2. 类式组件3. 注意事项4. 渲染函数式组件标签的基本流程5. 渲染类组件标签的基本流程二、组件三大核心属性 1:state1. 代码示例2. 效果展示3. 注意4. 设置状态:setState三、 组件三大核心属性 2&#xf…

小程序问题:封装公共组件的onLoad方法不生效

素材编辑 | 宋大狮 排版运营 | 小唐狮 ONE 问题描述 因为许久没有接触小程序项目,今天在做小程序项目时,为了节省时间,将要修改的页面组件直接拿出来封装成了公共组件,同时也没多想就直接使用了。于是就出现了页面数据不能加载的…

模板字符串基本使用

模板字符串是ES6添加的一个新的字符串编写形式。 1.【模板字符串】之拼接 在ES6之前,如果我们想要将字符串和一些动态的变量拼接到一起,是很麻烦的。 const name "aaa" const age 18console.log("my name is "name".Im &q…

三个案例掌握this.$nextTick()方法的使用/Vue中的$nextTick()

this.$nextTick() 解释为在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM. 也就是说,当dom元素发生改变,重新渲染dom树后,再执行vue.$nextTick()里面的内容。 其实用方法一般为 this.$n…

讲讲vue3下会造成响应式丢失的情况

题引: 在我们从vue2过渡到vue3的时候,对于数据响应式的变化其实是懵懵懂懂的。从以往直接在data函数里面定义变量到每一次都要使用ref/reactive时,是有些不适应的。但问题不大,毕竟在大前端时代中,如果不及时跟上时代…

TS中快速定义一个对象数组以及处理async await的异常

定义一个对象数组(即数组成员为对象,对象的属性为我们所约束) 方法一:接口字面量形式 export type Resource {_id: string,personID: {_id: stringage: stringidentifier: stringname: stringnation: stringgrade: stringscheme…

contentEditable属性

前言 我们最常用的输入文本内容便是input与textarea,但是有一个属性,可以让我们在很多标签中,如div,table,p,span,body等,可以像input输入框一样,实现文本编辑,这便是contentEditable属性 contentEditabl…

【vue2】近期bug收集与整理01

🥳博 主:初映CY的前说(前端领域) 🌞个人信条:想要变成得到,中间还有做到! 🤘本文核心:记录博主在vue2中遇到过的坑,本文是博主的学习使用总结 目录 1登陆token的问…

【学姐面试宝典】前端基础篇Ⅴ——JS深浅拷贝、箭头函数、事件监听等

前言 博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻【前端面试专栏】 今天继续学习前端面试题相关的知识! 感兴趣的小伙伴一起来看看吧~🤞 文章目录什么是事件监听事件委托以及冒泡原理介绍一下 promise&#x…

uniapp 小程序嵌套H5开发总结

项目需求是在uniapp小程序项目中嵌套H5页面,H5返回小程序需要传值给小程序进行通信。 好,百度一查确实可以实现 用的uniapp提供的web-view(https://uniapp.dcloud.io/component/web-view.html#web-view经验证实,做功能之前先看官网&#xff…

一天时间迅速准备前端面试|JavaScript——异步进阶

🌈本系列文章是博主精心整理的面试热点问题,吸收了大量的技术博客与面试文章,总结多年的面试经历,带你快速建立前端面试知识体系。抓住每一场面试的机会,知己知彼才能百战百胜! 上期回顾 JS基础–异步 本系…

【中秋快乐】如何用three.js实现我的太空遐想3D网页

目录 创作背景 功能分解 创建3d地球 创建3d月球 创建3d小火箭

解决element-ui动态加载级联选择器默认选中问题(Cascader)

前言 最近在开发任务中碰到需要在新增和修改时使用动态加载级联选择器,但是当在修改时设置默认选中项,出现了后端数据返回较慢,导致无法选中和级联框选中了但input框不显示的问题,网上找到的方法也不是很有效,还得使用…

Vue - v-for 循环渲染多个 “重复“ 子组件(仅 ref 不同,this.$refs.xx 使用时依然能准确找到子组件)将子组件 ref 设为动态,这样每个子组件都是 “独立“ 的!详细教程

前言 本教程更多版本:uni-app | 微信小程序 我们会通过给组件绑定 ref 值,然后通过 this.$refs.xx 来获取这个组件上的方法和变量。 如果 在 v-for 中循环渲染组件(绑定固定 ref),那么这个 ref 就会 “一摸一样”,导致根本无法找到(this.$refs.xx 谁?), 要解决这个问…

【前端】vue模板语法知识了解一下,是不是只知道用element-ui组件?

vue写在前面Vue模板语法文本原始HTML属性开源Vue模板和主题框架集合BootstrapVueelement-ui最后总结写在前面 上一篇总结了在实操过程中如果遇到了nodejs版本的问题,我们该如何去解决的,还有就是总结了vue2和vue3生命周期的区别,如果感兴趣的…

【JavaScript】JS实用案例分享:动态生成分页组件 | 通过按键实现移动控制

CSDN话题挑战赛第2期 参赛话题:学习笔记 🖥️ NodeJS专栏:Node.js从入门到精通 🖥️ 博主的前端之路(源创征文一等奖作品):前端之行,任重道远(来自大三学长的万字自述&am…