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

一、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版本 ,版本必须要在15.0.1以上才能使用vue3

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

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

输入一下命令进行创建

npm create vue@latest

创建成功后输入控制台提供的代码

cd 命令用于去到test目录

npm install 加载资源

npm run dev 启动项目 

启动项目

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

输入 npm run dev

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SQL注入漏洞(三)

报错注入 group by重复键冲突 (count()floor()rand()group by 组合)就是利用 count()、rand()、floor()、 group by 这几个特定的函数结合在一起产生的注入漏洞。 ?id1 and (select 1 from (select count(*),concat(0x5e,(select version() from inf…

[含文档+PPT+源码等]精品基于Nodejs实现的微信小程序校园心理健康平台设计与实现

《[含文档PPT源码等]精品基于Nodejs实现的微信小程序校园心理健康平台设计与实现》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程等福利! 软件开发环境及开发工具: 操作系统:Windows 10、Windows 7、Windows 8 开…

前端excel的实现方案Luckysheet

一、介绍 Luckysheet是一款纯前端类似excel的在线表格&#xff0c;功能强大、配置简单、完全开源的插件。目前已暂停维护&#xff0c;但是其已有功能大概能满足常见需求的使用。 二、引入 ①cdn引入&#xff08;目前应该已经不支持&#xff0c;可自行尝试&#xff09; <l…

mysql 10 单表访问方法

01.优化的过程 对于我们这些 MySQL 的使用者来说&#xff0c; MySQL 其实就是一个软件&#xff0c;平时用的最多的就是查询功能。DBA时不时丢过来一些慢查询语句让优化&#xff0c;我们如果连查询是怎么执行的都不清楚还优化个毛线&#xff0c;所以是时候掌握真正的技术了。我…

LED显示屏与手机连接:简单便捷的操作指南

随着科技的飞速发展&#xff0c;LED显示屏已经成为现代商业和公共信息展示的重要工具。它们不仅在户外广告中扮演着重要角色&#xff0c;室内应用也越来越广泛。智能手机的普及使得我们希望能够通过手机直接控制LED显示屏&#xff0c;以实现更灵活、更便捷的信息展示。那么&…

证件照小程序源码,前后端稳定运行

演示&#xff1a;证寸照制作 运行环境: Linux Nginx PHP >5.6 MySQL>5.6 安装步骤: 1.下载源码上传至你的服务器宝塔面板 2.直接添加站点选择源码目录&#xff0c;新建数据库 3.设置代码执行目录为/web 4.在浏览器中输入你的域名&#xff0c;会提示安装&#xff0c;填写…

5 -《本地部署开源大模型》在Ubuntu 22.04系统下ChatGLM3-6B高效微调实战

在Ubuntu 22.04系统下ChatGLM3-6B高效微调实战 无论是在单机单卡&#xff08;一台机器上只有一块GPU&#xff09;还是单机多卡&#xff08;一台机器上有多块GPU&#xff09;的硬件配置上启动ChatGLM3-6B模型&#xff0c;其前置环境配置和项目文件是相同的。如果大家对配置过程还…

Django的模板语法

Django的模板语法 1、初步认识2、原理 1、初步认识 本质上&#xff1a;在HTML中写一些占位符&#xff0c;由数据对这些占位符进行替换和处理。 在views.py中用字典&#xff08;键值对&#xff09;的形式传参&#xff0c;在html文件中用两个花括号来显示单独的值 列表、元组等数…

【UI】将 naive ui 的 message 封装进axios 中,关于naiveui的message相关的用法

文章目录 前言在setup外进行使用直接包裹使用vue 单文件中使用 参考文章&#xff1a; 关于naiveui的message相关的用法 前言 最近新建了一个vite vu3 的项目&#xff0c;完全是从0 到1 &#xff0c;封装到request 的时候 想对axios 请求做一个全局的处理&#xff0c;但发现…

dart-sass和node-sass的区别,使用dart-sass后可能会出现的问题

前言&#xff1a; 2020 年 10 月 27 日&#xff0c;Sass 官方团队正式宣布 Libsass 将弃用&#xff0c;以及基于它的 Node Sass 和 SassC&#xff0c;并且建议用户使用 Dart Sass。如果在 vue 脚手架搭建的项目中需要使用 sass&#xff0c;建议初始化时勾选 sass 配置&#xff…

扫雷(C 语言)

目录 一、游戏设计分析二、各个步骤的代码实现1. 游戏菜单界面的实现2. 游戏初始化3. 开始扫雷 三、完整代码四、总结 一、游戏设计分析 本次设计的扫雷游戏是展示一个 9 * 9 的棋盘&#xff0c;然后输入坐标进行判断&#xff0c;若是雷&#xff0c;则游戏结束&#xff0c;否则…

Redis拒绝连接问题分析与解决方案

目录 前言1. 问题描述2. Redis拒绝连接的常见原因分析2.1 Redis服务未启动2.2 Redis配置中的绑定地址问题2.3 防火墙或安全组问题2.4 Redis连接池耗尽2.5 Redis服务器负载过高2.6 权限配置问题 3. 深度解决方案和优化建议4. 总结 前言 在分布式系统中&#xff0c;Redis作为高性…

Unity之XR Interaction Toolkit 射线拖拽3DUI

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、想实现的功能二、实现原理1.UI挂在XRGrabInteractable、刚体、BoxCollder2.修改刚体属性3.加BoxCollder 总结 前言 VR项目里正常情况有放置两种3DUI的方式…

Git之代已修改文件的目录高亮设置

不管Android Studio或者Idea&#xff0c;进入Setting 选择如图所示&#xff0c;并进行勾选 就可以高亮了。

2023年10月自考《数据库系统原理》04735试题

目录 一.选择题 二.填空题 三.设计题 四.简答题 五.综合体 一.选择题 1.下列属于数据库中存储数据基本特点是 (书中)P28页 A.冗余大 B.无组织 C.不可共享 D.永久存储 2.浏览器/服务器结构描述不正确的是 (书中)P36页 A.三层客户/服务器结构 B.基于Web引用的客户/服务器…

AWD入门

一、简介 AWD(Attack With Defense&#xff0c;攻防兼备)模式。你需要在一场比赛里要扮演攻击方和防守方&#xff0c;攻者得分&#xff0c;失守者会被扣分。也就是说攻击别人的靶机可以获取 Flag 分数时&#xff0c;别人会被扣分&#xff0c;同时你也要保护自己的主机不被别人…

武汉正向科技|焦炉移动机车连锁控制系统的介绍

焦炉车辆连锁控制系统是采用格雷母线定位技术&#xff0c;无线数据传输技术以及计算机技术&#xff0c;实现推焦车、拦焦车、熄焦车、装煤车、导烟车的集中监控和系统管理&#xff0c;以及车间作业计划管理&#xff0c;作业实绩管理&#xff0c;作业联锁控制及安全控制等。 焦炉…

Unlock the Power of Frozen LLMs in Knowledge Graph Completion

文章目录 题目摘要引言方法实验相关工作结论局限性附录 题目 在知识图完成中释放冻结LLM的力量 论文地址&#xff1a;https://arxiv.org/abs/2408.06787 摘要 传统的知识图完成(KGC)方法仅仅依赖于结构信息&#xff0c;难以克服知识图固有的稀疏性。大型语言模型(LLM)通过强大…

3dsMax添加天空盒

点击渲染&#xff0c;环境 &#xff0c; 点击位图 找到要设置的天空HDR&#xff0c;可以使用HDR(EXR)贴图 一个可以下载HDR贴图的网站 https://polyhaven.com/hdris在渲染的时候不要使用使用微软输入法&#xff0c;3dsmax会卡死&#xff0c; 在渲染的时候不要使用使用微软…

2013年国赛高教杯数学建模D题公共自行车服务系统解题全过程文档及程序

2013年国赛高教杯数学建模 D题 公共自行车服务系统 公共自行车作为一种低碳、环保、节能、健康的出行方式&#xff0c;正在全国许多城市迅速推广与普及。在公共自行车服务系统中&#xff0c;自行车租赁的站点位置及各站点自行车锁桩和自行车数量的配置&#xff0c;对系统的运行…