IDEA搭建Vue开发环境(安装Node.js、安装vue-cli、创建项目、编译项目、启动项目、yarn启动项目、npm和yarn命令行命令简单使用)

目录

  • 1. 安装Node.js
  • 2. 安装vue-cli构建工具
  • 3. 使用vue-cli创建项目
  • 4. 启动项目
  • 5. IDEA启动vue
  • 6. 在IDEA编译vue项目
  • 7. 用yarn启动vue项目
  • 8. npm和yarn命令行命令简单使用
    • 8.1 npm
    • 8.2 yarn

1. 安装Node.js

Node.js基于Google的V8引擎,形成了一个Javascript的运行环境

  1. 从Node.js中文官网下载最新的window 64位zip包: node-v20.4.0-win-x64.zip。然后解压安装包

  2. 再将E:\install_software\Node.js\node-v20.4.0-win-x64目录配置到环境变量

  3. cmd验证是否安装成功

C:\Users\hehuan>node -v
v20.4.0C:\Users\hehuan>node test.js
hello nodeC:\Users\hehuan>npm -v
9.7.2C:\Users\hehuan>
  1. 安装cnpm替换npm。这样所有的包都可以从国内下载。npm install也可以用来升级
C:\Users\hehuan>
C:\Users\hehuan>npm install -g cnpm --registry=http://registry.npm.taobao.orgadded 449 packages in 21s28 packages are looking for fundingrun `npm fund` for details
npm notice
npm notice New minor version of npm available! 9.7.2 -> 9.8.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.8.0
npm notice Run npm install -g npm@9.8.0 to update!
npm noticeC:\Users\hehuan>
C:\Users\hehuan>cnpm -v
cnpm@9.2.0 (E:\install_software\Node.js\node-v20.4.0-win-x64\node_modules\cnpm\lib\parse_argv.js)
npm@9.8.0 (E:\install_software\Node.js\node-v20.4.0-win-x64\node_modules\cnpm\node_modules\npm\index.js)
node@20.4.0 (E:\install_software\Node.js\node-v20.4.0-win-x64\node.exe)
npminstall@7.9.0 (E:\install_software\Node.js\node-v20.4.0-win-x64\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=E:\install_software\Node.js\node-v20.4.0-win-x64
win32 x64 10.0.19045
registry=https://registry.npmmirror.comC:\Users\hehuan>

2. 安装vue-cli构建工具

vue-cli的全称叫command line interface,也叫脚手架,是Vue官方提供的标准化开发工具

  1. 查看已安装的依赖包
C:\Users\hehuan>cnpm ls -g
E:\install_software\Node.js\node-v20.4.0-win-x64
+-- cnpm@9.2.0
+-- corepack@0.19.0
`-- npm@9.7.2C:\Users\hehuan>
  1. 安装。如果存在旧版,需要卸载旧版
C:\Users\hehuan>cnpm install -g @vue/cli

3. 使用vue-cli创建项目

使用vue create命令创建项目。项目包含项目运行的基本脚手架文件,和HelloWorld项目文件

其中babel是一个javascript编译器,可以将ES6转换成ES5;eslint是进行语法检查的

C:\Users\hehuan\Desktop>
C:\Users\hehuan\Desktop>vue create vue-projectVue CLI v5.0.8
? Please pick a preset: Default ([Vue 2] babel, eslint)Vue CLI v5.0.8
✨  Creating project in C:\Users\hehuan48495\Desktop\vue-project.
......省略部分......
🎉  Successfully created project vue-project.
👉  Get started with the following commands:$ cd vue-project$ npm run serveC:\Users\hehuan\Desktop>

进入项目目录,安装项目所需依赖

C:\Users\hehuan\Desktop>cd vue-project
C:\Users\hehuan\Desktop\vue-project>
C:\Users\hehuan\Desktop\vue-project>cnpm install
C:\Users\hehuan\Desktop\vue-project>

4. 启动项目

C:\Users\hehuan\Desktop\vue-project>cnpm run serve
......省略部分......DONE  Compiled successfully in 8216ms                                                                          21:39:12App running at:- Local:   http://localhost:8080/- Network: http://192.168.101.103:8080/

访问地址: http://192.168.101.103:8080/。效果如下:
在这里插入图片描述

5. IDEA启动vue

使用IDEA打开项目, 然后在File–Settings–Plugins–Makerplace搜索vue.js, 安装并重启IDEA

配置如下:

IDEA Vue配置

再启动项目

启动项目

6. 在IDEA编译vue项目

在控制台进行vue的编译。编译后的包位于根路径下的dist目录

PS C:\Users\hehuan\Desktop\vue-project>
PS C:\Users\hehuan\Desktop\vue-project> npm run build           
......省略部分......DONE  Build complete. The dist directory is ready to be deployed.INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.htmlPS C:\Users\hehuan\Desktop\vue-project>

7. 用yarn启动vue项目

如果vue项目有yarn.lock,则需要用yarn来启动

  1. 先安装yarn
C:\Users\hehuan>
C:\Users\hehuan>cnpm install -g yarn
C:\Users\hehuan>
  1. 因为这个yarn和Hadoop的yarn命令会冲突,所以修改E:\install_software\Node.js\node-v20.4.0-win-x64路径下的yarn.cmd名称为yarnJs.cmd

  2. 验证

C:\Users\hehuan>yarnJs --version
1.22.19C:\Users\hehuan>
  1. 安装依赖
C:\Users\hehuan>yarnJs install
C:\Users\hehuan>
  1. 在项目根路径下启动项目
C:\Users\hehuan>yarnJs run serve
  1. IDEA启动Vue项目,先进行配置
    IDEA配置vue项目

再启动项目

启动项目

8. npm和yarn命令行命令简单使用

8.1 npm

  • npm config list -l 查看配置信息
  • npm list [-g] [yarn] 查看当前项目的包,[或查看全局的包],[或查看指定的包]
  • npm info yarn 查看指定包的详细信息

8.2 yarn

  • yarnJs config list — 查看配置信息
  • yarnJs config set key value — 设置指定配置
  • yarnJs config get key — 查看指定配置
  • yarn info npm — 查看包详细信息
  • yarnJs global bin — 查看全局bin路径
  • yarnJs global dir — 查看全局包安装路径
  • yarnJs cache dir — 查看全局缓存路径
  • yarnJs config set prefix “E:\install_software\Node.js\node-v20.4.0-win-x64\yarn_bin”
  • yarnJs config set global-folder “E:Node.js\node-v20.4.0-win-x64\yarn_node_modules” — 设置全局包安装路径
  • yarnJs config set cache-folder “E:\install_software\Node.js\node-v20.4.0-win-x64\yarn_cache” — 设置全局缓存路径
  • yarnJs [global] add cowsay — [全局]安装指定的包
  • yarnJs remove cowsay — 删除指定包

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

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

相关文章

CFPRF:一种用于音频时间伪造检测和定位的框架

关键词:音频伪造检测、时间伪造定位、差异特征感知学习 最近,一种新型的音频部分伪造形式对音频取证提出了挑战,这要求采取先进的对策来检测长时间音频中的微妙伪造操作。然而,现有的对策仍然服务于分类目的,未能对部分…

手机空号过滤批量查询的意义及方法

手机空号过滤批量查询是现代营销和通信管理中常用的技术手段,旨在通过批量处理手机号码,筛选出活跃号码和空号等无效号码,以提高营销效率和减少不必要的通信成本。以下是关于手机空号过滤批量查询的详细解答: 一、手机空号过滤批…

C++客户端Qt开发——Qt窗口(工具栏)

2.工具栏 使用QToolBar表示工具栏对象&#xff0c;一个窗口可以有多个工具栏&#xff0c;也可以没有&#xff0c;工具栏往往也可以手动移动位置 ①设置工具栏 #include "mainwindow.h" #include "ui_mainwindow.h" #include<QToolBar> #include<…

61.列表重绘

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a;易道云信息技术研究院 上一个内容&#xff1a;60.分析对比模块找出被注入的模块 以 60.分析对比模块找出被注入的模块 它的代码为基础…

secureCRT同时在所有已打开窗口执行命令、mac-os下使用的SecureCRT版本 以及 SecureCRT一段时间不操作没有响应的问题

一、secureCRT命令行工具一次性同时在所有已打开窗口执行命令 公司的服务器比较多&#xff0c;最近因为opcache&#xff0c;上线发布后&#xff0c;需要重启所有的WEB服务器上的php。目前使用的jenkins发布&#xff0c;不过账号安全问题&#xff0c;给jenkins的账号权限受限不能…

Hype 4 Pro for Mac:专业级HTML5动画制作利器

Hype 4 Pro for Mac是一款专为Mac用户设计的专业级HTML5动画制作软件&#xff0c;它集动画制作、交互设计于一身&#xff0c;为用户提供了一种全新的、高效的动画制作体验。 该软件拥有直观易用的界面和强大的功能&#xff0c;支持多种设计元素&#xff0c;如滚动、旋转、缩放…

DVWA的安装和使用

背景介绍 DVWA是Damn Vulnerable Web Application的缩写&#xff0c;是一个用于安全脆弱性检测的开源Web应用。它旨在为安全专业人员提供一个合法的测试环境&#xff0c;帮助他们测试自己的专业技能和工具&#xff0c;同时也帮助web开发者更好地理解web应用安全防范的过程。DV…

GD32 MCU电源复位和系统复位有什么区别

GD32 MCU的复位分为电源复位和系统复位&#xff0c;电源复位又称为冷复位&#xff0c;相较于系统复位&#xff0c;上电复位更彻底&#xff0c;下面为大家详细介绍上电复位和系统复位的实现以及区别。 电源复位包括上电/掉电复位或者从standby模式唤醒产生的复位&#xff0c;电…

【进阶篇-Day12:JAVA中stream流、File类的介绍】

目录 1、stream流1.1 stream流的作用1.2 stream流的思想1.3 获取stream流对象1.4 stream流中间操作方法1.5 stream流终结操作方法1.6 stream收集操作1.7 stream的综合案例 2、File类2.1 File类创建文件对象2.2 File类的常用方法2.3 File类的创建和删除方法2.4 File类的遍历方法…

埃文科技受邀出席2024年河南省工业领域网络和数据安全政策宣贯会

2024年7月18日&#xff0c;由河南省工业和信息化厅主办&#xff0c;河南省工业信息安全产业发展联盟、河南省信息安全产业协会承办的2024年河南省工业领域网络和数据安全政策宣贯会在郑州召开&#xff0c;活动旨在提升河南省工业领域网络和数据安全保护能力&#xff0c;助力企业…

Fetch请求的取消

在实际开发中&#xff0c;我们常常会遇到根据输入框输入的内容&#xff0c;实时去请求接口并将拿到的数据渲染到页面上&#xff0c;但是由于接口响应时间不可控&#xff0c;简单来说就是请求的顺序和响应的顺序不一致&#xff0c;就会导致你可能输入了12&#xff0c;但实际返回…

PMOS、NMOS 驱动电路和使用方法

下图就是 PMOS 和 NMOS 的简单使用方法。D2 是指示灯&#xff0c;NMOS 的 G 连接单片机 IO&#xff0c;PMOS 的 D 连接 24V 继电器&#xff0c;PMOS 的体二极管作为继电器的反向电动势的吸收二极管 PMOS 和 NMOS 不一样&#xff0c;在远超单片机电压下控制 PMOS 必须依靠一个 N…

CSS相关记录

文章目录 backgroundposition文字displayflexjustify-contentalign-itemsflex-directionflex-wrap gridimportant transformtranslate&#xff08;位移&#xff09;scale&#xff08;缩放&#xff09;rotate&#xff08;旋转&#xff09;origin (旋转中心点)skew (倾斜 ) borde…

C# 知识点总结

入门 C#程序在.NET上运行&#xff0c;.NET framework包含两个部分&#xff1a; ①&#xff1a;.NET framework类库 ②&#xff1a;公共语言运行库CLR&#xff08;.NET虚拟机&#xff09; CLS&#xff08;公共语言规范&#xff09; CTS&#xff08;通用类型系统&#xff09; .N…

【分布式系统】 单机架构 | 分布式架构 | 集群 | 主从架构 | 分库分表 | 冷热分离 | 微服务

文章目录 [toc] 分布式系统一、单机架构二、分布式系统三、应用服务器集群四、读写分离 / 主从分离架构五、引入缓存/冷热分离架构六、垂直分库七、微服务架构——业务拆分代价优势 八、名词解释1.应用&#xff08;Application&#xff09;/系统(System)2.模块&#xff08;Mode…

Mysql9安装

目录 一、下载mysql 二、安装 三、配置mysql环境变量 四、mysql初始化和启动 1.以管理员身份运行cmd 2.cd到mysql的安装目录 3.初始化mysql的数据库 4.为Windows系统安装MySQL服务 5.查看一下名为mysql的服务&#xff1a; 6.启动MySQL服务 五、附录 1.系统变量还在&…

CentOS 8中 更新或下载时报错:为仓库 ‘appstream‘ 下载元数据失败 : Cannot prepare internal mirrorlist

一、错误重现 CentOS Stream 8 - AppStream 0.0 B/s | 0 B 00:00 Errors during downloading metadata for repository appstream: - Curl error (6): Couldnt resolve host name for http://mirrorlis…

昇思25天学习打卡营第18天|生成式-GAN图像生成

打卡 目录 打卡 GAN 博弈函数 博弈过程 GAN 案例 数据集 数据加载与可视化 隐码构造 模型构建 生成器 判别器 损失函数和优化器 模型训练 输出展示-1w张训练样本 输出展示-6w张训练样本 输出展示-6w张-100 epoch 效果展示 部分展示如图-12epoch-6w张 部分展…

Windows系统上Git详细图文安装及使用教程

Git 是一种高效、分布式的版本控制系统&#xff0c;用于代码的跟踪、分支管理和协同工作&#xff0c;支持快速提交、合并和回滚操作。它是开发者工具箱中必不可少的工具之一&#xff0c;广泛应用于软件开发和其他需要版本控制的领域。 1. Git的安装 1.1 Git下载 可以通过以下…

Qt SQLite数据库学习总结

到此为止&#xff0c;就使用Qt进行SQLite数据库的操作&#xff0c;做一次总结 1. Qt中数据库操作的相关概念和类 Qt 数据库编程相关基本概念https://blog.csdn.net/castlooo/article/details/140497177 2.表的只读查询--QSqlQueryModel QSqlQueryModel单表查询的使用总结htt…