Vue-3-前端框架Vue基础入门之VSCode开发环境配置和Tomcat部署Vue项目

article/2025/6/28 22:38:23

文章目录

  • 1 安装配置VSCode
    • 1.1 安装中文语言插件
    • 1.2 主题颜色
    • 1.3 禁用自动更新
    • 1.4 开启代码提示设置
    • 1.5 安装open in browser插件
  • 2 安装配置nodejs
    • 2.1 配置环境变量
    • 2.2 npm与maven的区别
    • 2.3 使用npm避坑
  • 3 创建Vue项目
    • 3.1 两种创建方式
    • 3.2 package.json
    • 3.3 安装新的依赖
    • 3.4 运行项目
    • 3.5 指定端口
    • 3.6 项目打包
    • 3.7 Debug方法
    • 3.8 Tomcat部署vue项目
  • 4 参考附录

安装配置VSCode、node.js、创建Vue项目、并使用Tomcat部署Vue项目。

1 安装配置VSCode

Visual Studio Code(简称 VSCode) 是由微软开发并开源的一款轻量级、跨平台、功能强大的代码编辑器,支持多种编程语言,并且拥有丰富的插件生态系统。它不仅是一个代码编辑器,还可以通过插件扩展为一个完整的集成开发环境(IDE),适用于前端开发(如 Vue、React)、后端开发(如 Node.js、Python)、数据库管理等多种用途。

前端开发的IDE:VsCode或者WebStorm。
安装目录D:\Program Files\Microsoft VS Code。

1.1 安装中文语言插件

(1)选择插件模块,在搜索栏输入chinese,搜索中文语言插件。
(2)选中chinese插件,安装完毕后,关闭软件重新打开即可。
(3)配置选择中文,Ctrl+Shift+P。
在这里插入图片描述

1.2 主


http://www.hkcw.cn/article/YTpnUbeyeb.shtml

相关文章

Webpack依赖

Webpack到底怎么对我们的项目进行打包捏? 在webpack处理应用程序时,会根据命令或者配置文件找到入口文件 从入口开始,会生成一个依赖关系图,这个依赖关系图会包含应用程序中所需的所有模块(.js、css文件、图片、字体…

关于找不到符号,符号变量log的问题的解决方案

创建时间:06月02日 1、问题描述 最近在学习鱼皮的AI超级智能体项目过程中,遇到如下错误: java: 找不到符号符号: 变量 log位置: 类 com.liucc.aiagent.app.LoveApp2、排查思路 网上的常见解决思路主要是检查lombok插件是否安装、Enable…

mysql离线安装教程

1.下载地址: https://downloads.mysql.com/archives/community/ 2.上传安装包到系统目录,并解压 tar -xvf mysql-8.0.34-1.el7.x86_64.rpm-bundle.tar3.检查系统中是否存在mariadb的rpm包 rpm -qa|grep mariadb存在则删除 rpm -e xxx4.解压完后执行如下命令安装 sudo rpm -iv…

【git-首次初始化本地项目、关联远程仓库】

使用场景: windows系统本地首次创建的项目本地已存在但未关联为git项目 操作步骤 创建远程仓库 在gitee或github创建新仓库即可本地安装git 搜索“git安装教程”,按照步骤安装即可打开git中端,进入项目文件夹 cd E:\xxx备注:这…

AI驱动的文本转Mermaid图表工具Smart Mermaid

简介 什么是 Smart Mermaid ? Smart Mermaid 是一款基于 AI 技术的 Web 应用程序,能够将文本内容智能转换为 Mermaid 格式的代码,并将其渲染成可视化图表。用户只需输入文本描述,AI 即可生成相应的图表,支持多种图表类…

调用蓝耘API打造AI 智能客服系统实践教程

声明:文章是实验教程,不是广告 1.前言 在用户与人工客服的沟通中,等待时间长、需求难满足等问题频发,企业面临用户流失风险,用户渴望快速精准的答案,企业需要“开源节流”、“降本增效”。对此&#xff0c…

VM图像处理之图像二值化

什么是灰度? 灰度(Grayscale)是指将彩色图像转换为仅包含亮度信息(黑白过渡)的单通道图像的过程或结果。灰度图像中每个像素的数值代表该点的明暗程度,而不包含颜色信息。 亮度代替颜色: 灰度…

通信革新与网络安全探索与创新:开启未来之门

在科技飞速发展的当下,各领域的前沿探索正不断刷新着人类的认知与能力边界。脑机接口领域取得重大突破,上海阶梯医疗科技有限公司成功完成国内首例侵入式脑机接口系统前瞻性临床试验,受试者通过植入大脑的设备实现用意念玩游戏,为…

sigmastar实现SD卡升级

参考文章:http://wx.comake.online/doc/DD22dk2f3zx-SSD21X-SSD22X/customer/development/software/Px/zh/sys/P3/usb%20&%20sd%20update.html#21-sd 1、构建SD卡升级包 在project下make image完成后使用make_sd_upgrade_sigmastar.sh脚本打包SD卡升级包。 ./make_sd_up…

hook组件-useEffect、useRef

hook组件-useEffect、useRef useEffect 用法及执行机制 WillMount -> render -> DidMount ShouldUpdate -> WillUpdate -> render -> DidUpdate WillUnmount(只有这个安全) WillReceiveProps useEffect(callback) 默认所有依赖都更新useEffect(callback, [])&am…

Spring 5 响应式编程:构建高性能全栈应用的关键

本文已收录在Github,关注我,紧跟本系列专栏文章,咱们下篇再续! 🚀 魔都架构师 | 全网30W技术追随者🔧 大厂分布式系统/数据中台实战专家🏆 主导交易系统百万级流量调优 & 车联网平台架构&a…

用“红烧鱼”类比说明卷积神经网络CNN的概念

我们用一个生活中的例子——「厨房做红烧鱼」 的场景,来类比卷积神经网络中多层卷积核的工作过程。你会发现,卷积层就像厨房里分工明确的厨师团队,逐步处理食材,最终完成一道复杂的菜品。 🐟 生活案例:厨房…

如何捍卫德国利益 默茨访美很“烧脑”

根据德国政府日前的声明,德国总理默茨将于当地时间5日访美,与美国总统特朗普举行首次单独会晤。△路透社报道截图德美关系一直是西方世界中最为重要的双边关系之一。然而,自美国总统特朗普提出“美国优先”理念以来,这对跨大西洋盟友间的裂痕不断加深。此前,白宫椭圆形办公…

Google机器学习实践指南(TensorFlow六大优化器)

🔥 Google机器学习实践指南(TensorFlow六大优化器) Google机器学习实战(12)-20分钟掌握TensorFlow优化器 一、优化器核心作用 ▲ 训练本质: 迭代求解使损失函数最小化的模型参数,关键要素: 特征工程&…

第15讲、Odoo 18 中 自动任务(ir.cron) 的实现原理与应用

目录 引言ir.cron 实现原理运行机制应用场景使用案例 案例一:定期发送邮件通知案例二:自动清理过期数据案例三:订单状态自动更新案例四:系统健康检查 最佳实践与注意事项总结 引言 在企业级应用中,自动化是提高效率…

消费信心回升5.3%!亚马逊泳装搜索量暴涨120%的启示

近期,美国经济呈现出令人鼓舞的复苏迹象。根据密歇根大学发布的最新消费者信心指数(Consumer Sentiment Index),2024年5月,该指数环比增长5.3%,达到69.1,创下自2023年中以来的最高水平。与此同时…

绿发会回应涉哈佛女孩蒋雨融争议 特权质疑风波

绿发会回应涉哈佛女孩蒋雨融争议 特权质疑风波!2025年5月29日,哈佛大学毕业典礼上,中国籍学生蒋雨融作为毕业生代表发表演讲。她穿着中国传统服饰,通过讲述翻译洗衣机中文标识的趣事,呼吁多元与包容,并间接批评了特朗普政府的“禁招令”。这场本应充满励志色彩的演讲却因…

高效使用Map的“新”方法

个人名片: 😊作者简介:一个为了让更多人看见许舒雅的宝贝的小白先生 🤡个人主页:🔗 许舒雅的宝贝 🐼座右铭:深夜两点半的夜灯依旧闪烁,凌晨四点的闹钟不止你一个。 &…

35.x64汇编写法(二)

免责声明:内容仅供学习参考,请合法利用知识,禁止进行违法犯罪活动! 本次游戏没法给 内容参考于:微尘网络安全 上一个内容:34.x64汇编写法(一) 上一个内容写了,汇编调…

多地公共自行车退场 设备老旧促变革

多地公共自行车退场 设备老旧促变革!近期,多地宣布公共自行车项目停止运营。安徽省马鞍山市和县住房和城乡建设局发布公告称,该县公共自行车将于5月28日终止运营,有需要的市民在2025年6月28日前办理骑行卡押金退款业务。和县公共自行车系统于2016年2月正式运营,县城主城区…