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:一种用于音频时间伪造检测和定位的框架

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

“微软蓝屏”事件暴露了网络安全哪些问题

一、“微软蓝屏”事件暴露了网络安全哪些问题? 1.软件漏洞:微软蓝屏事件是由于Windows操作系统中的一个软件漏洞导致的。软件漏洞可能被黑客利用来执行恶意代码或控制受感染的系统。 2.不及时的安全更新:微软蓝屏事件揭示了一些系统没有及时应…

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

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

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

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

Django教程(000):初识Django

Django 是一个高级 Python Web 框架,旨在快速开发、简洁、实用。Django 提供了众多内置功能,使得开发者可以专注于编写应用程序的业务逻辑,而不需要过多关注底层细节。以下是 Django 的详细介绍: 1. Django 简介 Django 是一个开放源代码的 Web 框架,由 Python 编写,最…

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…

css:卡片列表如何自适应布局

css媒体查询&#xff1a;media width(%)flex布局ant-design组件库中有个RowCol&#xff0c;但是有时候需要一排放5个&#xff0c;此时RowCol就不是很适用此时可以采用ant-design组件库Grid组件中useBreakpoint&#xff0c;搭配width(%),代码如下&#xff1a; const screens …

华为高教校园网络解决方案 方案规划

方案规划 高教校园虚拟化网络主要是基于iMaster NCE-Campus部署&#xff0c;按照iMaster NCE-Campus的业务配置模型进行部署规划&#xff0c;具体规划如表4-1所示。 表4-1 园区虚拟化网络新建方案规划 规划项 详细部署思路 管理网络部署方案 高教校园网络的管理…

Oriented RepPoints for Aerial Object Detection

研究对象&#xff1a; 空中目标识别&#xff0c;空中目标探测和识别技术的深入研究是为了将空中打击目标从复杂的背景环境中尽可能地剥离出来&#xff0c;通过知识学习&#xff0c;实现对目标的类型确认&#xff0c;进而完成对目标的威胁评估&#xff0c;为快速打击提供判定和决…

c++中的递归拷贝(Recursive Copy)和递归反转链表(Recursive Reverse Linked List)

前言 hello大家好啊&#xff0c;这里是文宇&#xff0c;不是文字&#xff0c;是文宇哦。 递归拷贝&#xff08;Recursive Copy&#xff09; C中的递归拷贝是一种在拷贝对象时使用递归方法的技术。在C中&#xff0c;为了拷贝一个对象&#xff0c;通常使用拷贝构造函数或拷贝赋…

vue大屏展示组件库datav

主要用于构建大屏数据展示页面&#xff0c;具有多种类型组件可供使用。详情参考 datav官网 一、安装 npm 安装 npm install jiaminghi/data-viewyarn安装 yarn add jiaminghi/data-view二、使用 在main.js中注册为全局组件 import dataV from jiaminghi/data-view Vue.us…

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…