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

news2025/6/8 3:46:03

文章目录

  • 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.coloradmin.cn/o/2403686.html

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

相关文章

“一代更比一代强”：现代 RAG 架构的演进之路

“一代更比一代强”：现代 RAG 架构的演进之路

编者按： 我们今天为大家带来的文章，作者的观点是：RAG 技术的演进是一个从简单到复杂、从 Naive 到 Agentic 的系统性优化过程，每一次优化都是在试图解决无数企业落地大语言模型应用时出现的痛点问题。 文章首先剖析 Naive RAG 的基…
阅读更多...
My图床项目

My图床项目

引言: 在海量文件存储中尤其是小文件我们通常会用上fastdfs对数据进行高效存储,在现实生产中fastdfs通常用于图片,文档,音频等中小文件。 一.项目中用到的基础组件(Base) 1.网络库(muduo) 我们就以muduo网络库为例子讲解IO多路复用和reactor网络模型 1.1 IO多路复用 我们可以…
阅读更多...
1、Go语言基础中的基础

1、Go语言基础中的基础

摘要：马士兵教育的Go语言基础的视频笔记。 第一章：走进Golang 1.1、Go的SDK介绍 1.2、Go的项目基本目录结构 1.3、HelloWorld 1.4、编译 1.5、执行 1.6、一步到位 1.7、执行流程分析 1.8、语法注意事项 （1）源文件以"go&qu…
阅读更多...
buuctf——web刷题第二页

buuctf——web刷题第二页

[网鼎杯 2018]Fakebook和[SWPU2019]Web1没有，共30题 目录 [BSidesCF 2020]Had a bad day [网鼎杯 2020 朱雀组]phpweb [BJDCTF2020]The mystery of ip [BUUCTF 2018]Online Tool [GXYCTF2019]禁止套娃 [GWCTF 2019]我有一个数据库 [CISCN2019 华北赛区 Day2…
阅读更多...
MVC与MVP设计模式对比详解

MVC与MVP设计模式对比详解

MVC（Model-View-Controller）和MVP（Model-View-Presenter）是两种广泛使用的分层架构模式，核心目标是解耦业务逻辑、数据和界面，提升代码可维护性和可测试性。以下是它们的对比详解： MVC 模式&…
阅读更多...
二叉树的遍历总结

二叉树的遍历总结

144.二叉树的前序遍历(opens new window)145.二叉树的后序遍历(opens new window)94.二叉树的中序遍历 二叉数的先中后序统一遍历法 public static void preOrder(BiTree root){BiTree p root;LinkedList<BiTree> stack new LinkedList<>();while(p ! null ||…
阅读更多...
win32相关（远程线程和远程线程注入）

win32相关（远程线程和远程线程注入）

远程线程和远程线程注入 CreateRemoteThread函数 作用&#xff1a;创建在另一个进程的虚拟地址空间中运行的线程 HANDLE CreateRemoteThread([in] HANDLE hProcess, // 需要在哪个进程中创建线程[in] LPSECURITY_ATTRIBUTES lpThreadAttributes, // 安全…
阅读更多...
[Spring]-AOP

[Spring]-AOP

AOP场景 AOP: Aspect Oriented Programming (面向切面编程) OOP: Object Oriented Programming (面向对象编程) 场景设计 设计: 编写一个计算器接口和实现类&#xff0c;提供加减乘除四则运算 需求: 在加减乘除运算的时候需要记录操作日志(运算前参数、运算后结果)实现方案:…
阅读更多...
agent 开发

agent 开发

什么是 agent&#xff1f; Agent智能体&#xff08;又称AI Agent&#xff09;是一种具备自主感知、决策与行动能力的智能系统&#xff0c;其核心在于模仿人类的认知过程来处理复杂任务。以下是其关键特性和发展现状的综合分析&#xff1a; 一、核心定义与特征 #‌## 自主决策…
阅读更多...
Golang——5、函数详解、time包及日期函数

Golang——5、函数详解、time包及日期函数

函数详解、time包及日期函数 1、函数1.1、函数定义1.2、函数参数1.3、函数返回值1.4、函数类型与变量1.5、函数作参数和返回值1.6、匿名函数、函数递归和闭包1.7、defer语句1.8、panic和recover 2、time包以及日期函数2.1、time.Now()获取当前时间2.2、Format方法格式化输出日期…
阅读更多...
深度学习环境配置指南：基于Anaconda与PyCharm的全流程操作

深度学习环境配置指南：基于Anaconda与PyCharm的全流程操作

一、环境搭建前的准备 1. 查看基础环境位置 conda env list 操作说明&#xff1a;通过该命令确认Anaconda默认环境&#xff08;base&#xff09;所在磁盘路径&#xff08;如D盘&#xff09;&#xff0c;后续操作需跳转至该磁盘根目录。 二、创建与激活独立虚拟环境 1. 创…
阅读更多...
打卡day46

打卡day46

知识点回顾&#xff1a; 不同CNN层的特征图&#xff1a;不同通道的特征图什么是注意力&#xff1a;注意力家族&#xff0c;类似于动物园&#xff0c;都是不同的模块&#xff0c;好不好试了才知道。通道注意力&#xff1a;模型的定义和插入的位置通道注意力后的特征图和热力图 内…
阅读更多...
在SpringBoot中使用AWS SDK实现邮箱验证码服务

在SpringBoot中使用AWS SDK实现邮箱验证码服务

1.依赖导入&#xff08;maven&#xff09; <dependency><groupId>software.amazon.awssdk</groupId><artifactId>ses</artifactId><version>2.31.46</version></dependency> 2.申请两个key 发件人邮箱需要验证&#xff1a; …
阅读更多...
深入理解二叉搜索树：原理到实践

深入理解二叉搜索树：原理到实践

1.二叉搜索树的概念 ⼆叉搜索树⼜称⼆叉排序树&#xff0c;它或者是⼀棵空树&#xff0c;或者是具有以下性质的⼆叉树 若它的左树不为空&#xff0c;则左子树上所有节点的值都小于或等于根节点的值。若它的右树不为空&#xff0c;则右子树上所有节点的值都大于或等于根节点的…
阅读更多...
测试W5500的第11步_使用ARP解析IP地址对应的MAC地址

测试W5500的第11步_使用ARP解析IP地址对应的MAC地址

本文介绍了基于W5500芯片的ARP协议实现方法&#xff0c;详细阐述了ARP请求与回复的工作机制。ARP协议通过广播请求和单播回复实现IP地址与MAC地址的映射&#xff0c;确保局域网设备间的可靠通信。文章提供了完整的STM32F10x开发环境下的代码实现&#xff0c;包括网络初始化、SP…
阅读更多...
终极数据结构详解：从理论到实践

终极数据结构详解：从理论到实践

终极数据结构详解&#xff1a;从理论到实践 我将从 底层原理、时间复杂度、空间优化、实际应用 和 代码实现 五个维度&#xff0c;彻底解析数据结构。内容涵盖&#xff1a; 线性结构&#xff08;数组、链表、栈、队列&#xff09;非线性结构&#xff08;树、图&#xff09;高…
阅读更多...
【k8s】k8s集群搭建

【k8s】k8s集群搭建

k8s集群搭建 一、环境准备1.1 集群类型1.2 安装方式1.3 主机规划1.4 环境配置1.4.1 说明1.4.2 初始化1.4.3 关闭防火墙和禁止防火墙开机启动1.4.4 设置主机名1.4.5 主机名解析1.4.6 时间同步1.4.7 关闭selinux1.4.8 关闭swap分区1.4.9 将桥接的IPv4流量传递到iptables的链1.4.1…
阅读更多...
60天python训练计划----day45

60天python训练计划----day45

DAY 45 Tensorboard使用介绍 知识点回顾&#xff1a; tensorboard的发展历史和原理tensorboard的常见操作tensorboard在cifar上的实战&#xff1a;MLP和CNN模型 之前的内容中&#xff0c;我们在神经网络训练中&#xff0c;为了帮助自己理解&#xff0c;借用了很多的组件&#x…
阅读更多...
C# Wkhtmltopdf HTML转PDF碰到的问题

C# Wkhtmltopdf HTML转PDF碰到的问题

最近碰到一个Html转PDF的需求&#xff0c;看了一下基本上都是需要依赖Wkhtmltopdf&#xff0c;需要在Windows或者linux安装这个可以后使用。找了一下选择了HtmlToPDFCore&#xff0c;这个库是对Wkhtmltopdf.NetCore简单二次封装&#xff0c;这个库的好处就是通过NuGet安装HtmlT…
阅读更多...
Vue3 （数组push数据报错） 解决Cannot read property ‘push‘ of null报错问题

Vue3 （数组push数据报错） 解决Cannot read property ‘push‘ of null报错问题

解决Cannot read property ‘push‘ of null报错问题 错误写法 定义变量 <script setup>const workList ref([{name:,value:}])</script>正确定义变量 <script setup>const workList ref([]) </script>解决咯~
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023