使用idea和vecode创建vue项目并启动(超详细)

news2024/10/10 7:49:15

一、idea创建vue项目

创建项目之前先下载好插件

新建项目找到vue生成器

 写好名称,找到自己需要存放的地址,node解释器安装方式可以看我上一个博客,vueCLI是选择vue的版本,我们可以使用idea自带的vue版本默认是vue3,创建速度会很快,这是一个简洁版本,也可以选择自己下载好的vue版本。

加载完后,项目就创建好了,idea创建项目非常的简单易懂,我给大家展示一下默认idea自带的vue和下载的区别

idea自带的:

创建项目非常迅速

端口号(默认):5173

版本是3.x

启动项目速度非常快

下载的全局vue:

创建项目需要加载资源

端口号(默认):8080

提供network入口启动

每次启动都需要加载资源(非常的慢)

启动项目

在浏览器是填写local地址,可以在idea的控制台上看到。

二、vscode创建项目

使用vscode编辑器有很功能,我们先安装一个node.js管理器(nvm)

nvm文档手册 - nvm是一个nodejs版本管理工具 - nvm中文网 (uihtm.com)icon-default.png?t=O83Ahttps://nvm.uihtm.com/

下载好后进行安装

选择同意协议后一直点next就好了,记得把安装地址记住,也可以安装到自己想要存放的文件夹中,建议还是默认好,如果之前已经安装了node.js它会弹出一个选项,选择ok就行了,意思是需要将已经下载的node放入管理中吗?

完成安装后,可以到windows的命令台中测试一下,是否安装成功,在控制台中输入nvm

成功样式如下:

我们打开vscode,导航栏中点击查看——>终端 ,下面会出现一个控制台

在控制台中输入nvm list 查看自己安装的所有node版本

如果有多个版本,想选择其他版本可以输入nvm use 版本号

选择好版本后可以开始创建项目了

在控制台输入npm i -g @vue/cli-init 加载资源

加载完后输入

vue init webpack 项目名称

上面是我的项目信息,可以按照我这个来入门,下面是这些信息的翻译

启动项目

创建好项目后输入 cd 项目名称  进入项目

输入 npm run dev

启动后可以看到控制台输出了地址,在浏览器中访问,效果和idea中是一样的

需要退出项目,就在点击控制台 在键盘上按住ctrl+c

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

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

相关文章

【LeetCode】修炼之路-0004-Median of Two Sorted Arrays【python】

题目 Given two sorted arrays nums1 and nums2 of size m and n respectively, return the median of the two sorted arrays. The overall run time complexity should be O(log (mn)). Example 1: Input: nums1 [1,3], nums2 [2] Output: 2.00000 Explanation: merged…

java.lang.NoClassDefFoundError: kotlin/Result解决方案

问题 在控制窗口上虽然报错是找不到对应的class,但是呢在我们导入kotlin的后,还是报相同的异常,在网上查找了各种资料,都没有解决方案。 问题分析 在idea2021之后,kotlin都使用远程仓库(kotlinx-coeouti…

选择 PDF 编辑器时要考虑什么?如何选择适用于 Windows 10 的 PDF 编辑器

选择 PDF 编辑器时要考虑什么? 随着技术的出现,您在网上浏览时肯定会遇到一些 PDF 软件。但是,选择PDF 编辑器时需要考虑什么?如果您是重度用户并将在您的工作场所使用它,建议您找到专业、使用方便且能够帮助您完成任…

记一次pyc逆向

.py文件   源代码文件。   这是开发者编写的 Python 源代码文件,包含了可执行的 Python 代码。 .pyc文件   字节码文件。   Python 源文件(.py)在执行时会被编译为字节码,并存储在 __pycache__ 目录下,文件名通…

Linux下编译Eclipse Paho库采用MQTT协议连接MQTT服务器

一、Eclipse Paho介绍 Eclipse Paho 是一个开源项目,由 Eclipse Foundation 主持,提供可靠的开源实现来处理 MQTT(Message Queuing Telemetry Transport)协议以及其他与物联网 (IoT) 相关的协议。MQTT 是一种轻量级的发布/订阅消…

SQL进阶技巧:Order by 中 NULLS LAST特性使用?

目录 1 需求描述 2 数据准备 3 问题分析 4 小结 如果觉得本文对你有帮助,想进一步学习SQL语言这门艺术的,那么不妨也可以选择去看看我的博客专栏 ,部分内容如下: 数字化建设通关指南 专栏 原价99,现在活动价59…

k8s的安装和部署

配置三台主机,分别禁用各个主机上的swap,并配置解析 systemctl mask swap.target swapoff -a vim /etc/fstab配置这三个主机上的主机以及harbor仓库的主机 所有主机设置docker的资源管理模式为system [rootk8s-master ~]# vim /etc/docker/daemon.json…

k8s、prometheus、grafana数据采集和展示的链路流程

k8s集群中,容器级别的数据采集是由cAdvisor程序实现 cAdvisor # Container Advisor 容器顾问 cAdvisor程序是kubelet组件的一部分。 每个节点,包括master节点,都有一个kubelet系统服务, kukelet负责管理pod和容…

PCB在导出gerber文件时过孔盖油设置方法

目前主要使用两个电路设计软件,一个是Altium Designer 15.0版本,一个是cadence17.2版本。在设计完PCB以后需要导出加工文件发给PCB加工厂进行制板打样,其中需要注意的一点是过孔盖油设置。有的制板厂在提交工艺要求时写上过孔盖油即可&#x…

学习Ultralytics(data)(1)

今天我们来学习一下data文件夹下面的代码 首先有个_init_文件,典型的 Python 包中的 __init__.py 文件,用于导出 Ultralytics YOLO 项目中的一些重要类和函数。它将 base.py, build.py, 和 dataset.py 文件中的内容导入并暴露给外部使用。 看看里面有什…

息肉检测数据集 yolov5 yolov8适用于目标检测训练已经调整为yolo格式可直接训练yolo网络

息肉检测数据集 yolov5 yolov8 适用于目标检测训练 已经调整为yolo格式 可直接训练yolo网络 息肉检测数据集介绍 数据集概述 名称:息肉检测数据集(基于某公开的分割数据集调整)用途:适用于目标检测任务,特别是内窥镜…

【C/C++】错题记录(七)

题目一 题目二 C在调用函数时,当实参和形参的数据类型不一致时,会发生数据类型转换!将低精度转换为高精度时,由编译器隐式完成;将高精度转换为低精度时,必须用强制类型转换运算符; static_cast…

Redis-缓存过期淘汰策略

缓存淘汰策略 生产上redis内存设置为多少 设置为最大内存的 3/4 redis 会占用物理机多少内存 默认大小是 0,64 位系统下表示不限制内存大小,32位系统表示 3G 如何设置修改redis内存大小 config get maxmemory 查看修改方式 配置文件 单位是字节 2.…

读数据工程之道:设计和构建健壮的数据系统04数据工程生命周期(下)

1. 获取 1.1. 在了解数据源、所用源系统的特征以及数据的存储方式之后,你需要收集数据 1.2. 数据工程生命周期的下一阶段是从源系统中获取数据 1.2.1. 源系统和获取代表了数据工程生命周期中最重要的瓶颈 1.2.2. 源系统通常不在你的直接控制范围内,可…

性能测试工具locust —— Python脚本参数化!

1.1.登录用户参数化 在测试过程中,经常会涉及到需要用不同的用户登录操作,可以采用队列的方式,对登录的用户进行参数化。如果数据要保证不重复,则取完不再放回;如可以重复,则取出后再返回队列。 def lo…

算法修炼之路之位运算

目录 一:位运算符及一些常用结论总结 1.给一个数n,确定它的二进制表示中的第x位是0还是1(位数从右向左0开始增加) 2.将一个数n的二进制表示形式的第x位修改成1 3.将一个数n的二进制表示的第x位修改为0 4.提取一个数n的二进制表示中最右侧的1 5.干掉一个数n的…

使用Android studio进行Unit Test中遇到的问题记录

1、模块本身代码运行不起来 提示: Cannot resolve method ‘getVolumes’ in ‘StorageManager’ Cannot resolve method ‘registerListener’ in ‘StorageManager’ Cannot resolve method ‘unregisterListener’ in ‘StorageManager’ 查看Android 源码&…

p20 docker自己commit一个镜像 p21 容器数据卷 p22mysql同步数据(国内镜像被封锁暂时往后放)p23具名挂载和匿名挂载

如何自己commit一个镜像 这里还是先引用一下老师的笔记 关于如何自己commit一个镜像这个问题目前因为从仓库中拉下来的Tomcat里面是没有项目的,所以把webapps.dist里面的拷贝到webapps里面去作为自己的镜像在commit一下 这里用Tomcat举例子首先把镜像拉取下来执…

C语言 | Leetcode C语言题解之第468题验证IP地址

题目&#xff1a; 题解&#xff1a; char * validIPAddress(char * queryIP) {int len strlen(queryIP);if (strchr(queryIP, .)) {// IPv4int last -1;for (int i 0; i < 4; i) {int cur -1;if (i 3) {cur len;} else {char * p strchr(queryIP last 1, .);if (p…

读懂RAG理论到实践

目录 LLM面临的问题RAG数据准备阶段检索生成阶段 RAG实战数据准备阶段数据提取数据清洗补充&#xff1a;去除停用词 分块&#xff08;Chunking&#xff09;分块的方法固定大小分块Sentence splitting&#xff08;句分割&#xff09;递归分割 补充&#xff1a;特殊分块 向量化&a…