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

ops/2024/10/21 5:42:47/

一、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.ppmy.cn/ops/123406.html

相关文章

SQLite Developer使用说明

1.SQLite Developer下载 SQLite Developer官方版是SharpPlus出品的一款数据库管理工具。支持对sqlite3数据库的管理,能够自动完成窗口显示和执行数据库命令等多种特色。并且支持打开.db文件,适用于Android的开发。另外,使用Sqlite Developer…

PGMP-05相关方

目录 1.主要内容 2.概括 3.相关方人员 1.主要内容 Stakeholders IdentificationStakeholders AnalysisStakeholders Engagement PlanningStakeholders EngagementStakeholder communications 2.概括 识别:产生相关方登记册,使用头脑风暴分析&#x…

​el-table去除表格表头多选框或者更换为文字​

多选框那一列加label-class-name 1 <el-table-column type"selection" width"55" label-class-name"DisabledSelection" :reserve-selection"true"></el-table-column> style加样式 1 2 3 4 5 6 7 8 9 10 11 /*表格全…

GO网络编程(六):海量用户通信系统4:读写数据包与登录消息处理

如果你掌握了前三节&#xff0c;接下来就会轻松很多&#xff0c;看老韩的视频也不容易蒙圈了。本节内容不难&#xff0c;分别是读写数据包和登录消息处理。注意&#xff0c;因为上一节&#xff08;GO网络编程五&#xff09;把系统框架&#xff0c;目录结构和业务流程都讲了&…

[已解决] Install PyTorch 报错 —— OpenOccupancy 配环境

目录 关于 常见的初始化报错 环境推荐 torch, torchvision & torchaudio cudatoolkit 本地pip安装方法 关于 OpenOccupancy: 语义占用感知对于自动驾驶至关重要&#xff0c;因为自动驾驶汽车需要对3D城市结构进行细粒度感知。然而&#xff0c;现有的相关基准在城市场…

人机协作:科技与人类智慧的融合

随着科技的飞速发展&#xff0c;越来越多的领域开始借助人工智能&#xff08;AI&#xff09;和自动化技术来提升工作效率。人机协作&#xff08;Human-Machine Collaboration&#xff09;这一概念逐渐成为现代技术进步的核心。它不仅改变了我们的工作方式&#xff0c;也在重新定…

【mysql 截断订单表order 报错】

truncate table order;这个是一个截断订单表的sql语句 看起来没有什么问题 但是实际执行的时候是会报错的 SQLSTATE[42000]: Syntax error or access violation: 1064 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version…

如何通俗的理解linux中的挂载?

挂载点&#xff08;Mount Point&#xff09;是操作系统中用于将一个文件系统连接到现有目录结构中的特定目录。理解挂载点对于管理和组织文件系统、分区以及外部存储设备&#xff08;如硬盘、U盘、网络驱动器等&#xff09;至关重要。以下是对挂载点的详细解释&#xff0c;以帮…