前端主流框架:项目运行命令 npm 详解

        作为一位资深前端开发,我对npm(Node Package Manager)的使用有着深入的了解。npm是Node.js的包管理器,用于安装、管理和删除各种前端库和工具。现在,让我们深入了解npm在Vue、React、Angular和Vue 3项目中的一些基本使用方法和配置。

npm命令概述

npm提供了一系列命令,用于管理项目的依赖、运行脚本、发布包等。以下是一些常用的npm命令:

  • npm install安装项目的依赖。
  • npm start运行项目。
  • npm run运行在package.json中定义的脚本。
  • npm test运行测试。
  • npm run build构建项目,通常用于生产环境。
  • npm publish发布包到npm仓库。

首先,在使用npm命令之前,确保你已经安装了Node.js和npm(Node.js的包管理器)。

Vue项目

在Vue项目中,package.json文件通常会包含如下脚本:

"scripts": {  "serve": "vue-cli-service serve",  "build": "vue-cli-service build",  "lint": "vue-cli-service lint"  
}
  • npm run serve:启动开发服务器,监听文件变化并自动刷新浏览器。
  • npm run build:构建生产环境的静态资源。

步骤示例

        1.你可以通过Vue CLI(Vue的命令行工具)来创建一个新的Vue项目。在命令行中运行以下命令:

# 安装Vue CLI(如果尚未安装)  
npm install -g @vue/cli  # 创建一个新的Vue项目  
vue create my-vue-project

接下来,Vue CLI会提示你选择预设或者手动选择特性。选择你需要的配置,或者手动选择并配置你想要的插件和特性。

        2.一旦项目创建完成,进入项目目录:

cd my-vue-project

现在,你可以查看项目的package.json文件,它应该包含如下脚本:

"scripts": {  "serve": "vue-cli-service serve",  "build": "vue-cli-service build",  "lint": "vue-cli-service lint"  
}

如你所见,serve脚本对应的是vue-cli-service serve命令,这就是用来启动开发服务器的命令。

现在,你可以运行以下命令来启动开发服务器:

npm run serve

这将会启动一个本地开发服务器,默认运行在http://localhost:8080/。你的浏览器会自动打开一个新的标签页显示这个地址,并且服务器会监视你的文件更改,当你保存文件时,页面会自动重新加载以显示更新后的内容

开发服务器还提供了热重载(Hot Module Replacement)功能,这意味着你可以在不刷新整个页面的情况下更新部分组件,从而加速开发过程。

        记住,这只是一个简单的示例。实际的Vue项目可能会包含更多的文件和目录,以及更复杂的配置。但是,无论项目规模如何,npm run serve命令都是用来启动本地开发服务器的标准方式。

React项目

React项目通常使用Create React App(CRA)初始化,其package.json中的脚本如下:

"scripts": {  "start": "react-scripts start",  "build": "react-scripts build",  "test": "react-scripts test",  "eject": "react-scripts eject"  
}
  • npm start:启动开发服务器。
  • npm run build:构建生产环境的静态资源。

步骤示例

在React项目中,使用npm start命令来启动本地开发服务器的原因与Vue项目类似,主要是因为项目构建工具(如Create React App)为开发者提供了一个方便的启动脚本。这个脚本通常被配置在项目的package.json文件中,作为项目的默认启动命令。

npm start命令背后通常对应的是react-scripts start,这是由Create React App生成的React项目默认使用的脚本。这个脚本会启动一个开发服务器,并带有一些有用的特性,如热模块替换(Hot Module Replacement)和源代码映射(Source Maps),以提高开发效率。

以下是一个简单的React项目示例,展示如何使用npm start命令启动开发服务器:

        1.首先,确保你已经安装了Node.js和npm。

        2.使用Create React App快速创建一个新的React项目:

npx create-react-app my-react-project

        3.进入项目目录:

cd my-react-project

        4.查看package.json文件,你将看到如下脚本

"scripts": {  "start": "react-scripts start",  "build": "react-scripts build",  "test": "react-scripts test",  "eject": "react-scripts eject"  
}

        5.运行npm start命令来启动开发服务器:

npm start

这个命令会启动一个本地开发服务器,监听文件变化,并在浏览器中自动打开应用。默认情况下,服务器运行在http://localhost:3000

  1. 现在你可以编辑src目录下的React组件,保存文件后,页面会自动刷新以显示更新后的内容,这得益于热模块替换功能。

npm start命令方便之处在于它封装了所有必要的配置和步骤,让开发者可以专注于编写代码,而不需要担心如何设置开发环境。同时,由于这是Create React App等工具的标准做法,因此它也确保了跨项目的一致性。

        需要注意的是,如果你使用的是自定义设置或不同的构建工具(如Next.js、Gatsby等),启动命令可能会有所不同。但是,npm start作为默认启动命令的做法在React社区中非常普遍。

Angular项目

Angular CLI用于创建和管理Angular项目,其package.json中的脚本如下:

"scripts": {  "ng": "ng",  "start": "ng serve",  "build": "ng build",  "test": "ng test",  "lint": "ng lint",  "e2e": "ng e2e"  
}
  • npm/ng start:启动开发服务器。
  • npm/ng run build:构建生产环境的静态资源。

  pm start 命令实际上是调用了在 package.json 文件中定义的 scripts 部分的 start 脚本。对于 Angular 项目,当你运行 npm start 时,实际上是调用了 ng serve 命令。ng serve 命令会启动 Angular 的开发服务器,并监听文件变化。当检测到文件更改时,它会自动重新编译和重新加载应用,而无需手动刷新浏览器

        此外,ng serve 默认还会启动 LiveReload,这意味着当你保存文件时,浏览器会自动刷新以显示最新的更改

Vue 3项目

Vue 3项目与Vue 2项目在npm命令的使用上非常相似。Vue CLI也支持Vue 3,因此package.json中的脚本可能与Vue 2项目类似。

配置

package.json文件是npm命令的主要配置文件。你可以在其中定义自己的脚本,例如:

"scripts": {  "start": "node app.js",  "custom-build": "webpack --mode production"  
}

这样,通过npm startnpm run custom-build,你可以运行自定义的命令。

        总之,npm命令是前端开发中不可或缺的一部分,它帮助开发者管理项目的依赖、运行脚本、构建项目等。通过熟悉和掌握npm命令,开发者可以更加高效地进行前端开发。

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

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

相关文章

【软件工程导论】实验二——编制数据字典(数字化校园系统案例分析)

数字化校园系统案例分析 问题定义实验内容编制内容1数据项数据流处理逻辑数据存储 2外部实体 问题定义 数字化校园系统期望以数字化信息和网络为基础,在计算机和网络技术上建立起对教学、科研、管理、技术服务、生活服务等校园信息的收集、处理、整合、存储、传输和…

嵌入式Qt 第一个Qt项目

一.创建Qt项目 打开Qt Creator 界面选择 New Project或者选择菜单栏 【文件】-【新建文件或项目】菜单项 弹出New Project对话框,选择Qt Widgets Application 选择【Choose】按钮,弹出如下对话框 设置项目名称和路径,按照向导进行下一步 选…

EMC学习笔记(二十六)降低EMI的PCB设计指南(六)

降低EMI的PCB设计指南(六) 1.PCB布局1.1 带键盘和显示器的前置面板PCB在汽车和消费类应用中的应用1.2 敏感元器件的布局1.3 自动布线器 2.屏蔽2.1 工作原理2.2 屏蔽接地2.3 电缆屏蔽至旁路2.4 缝隙天线:冷却槽和缝隙 tips:资料主要…

MySQL篇----第二十一篇

系列文章目录 文章目录 系列文章目录前言一、什么是乐观锁二、什么是悲观锁三、什么是时间戳四、什么是行级锁前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 一、…

无人机概述及系统组成,无人机系统的构成

无人机的定义 无人驾驶航空器,是一架由遥控站管理(包括远程操纵或自主飞行)的航空器,也称遥控驾驶航空器,以下简称无人机。 无人机系统的定义 无人机系统,也称无人驾驶航空器系统,是指一架无人…

屏幕字体种类介绍

[ Script and font support in Windows ] [Windows 中的脚本和字体支持] 在Windows 2000 以前,Windows 的每个主要版本都会添加对新脚本的文本显示支持。本文介绍了每个主要版本中的更改。 Since before Windows 2000, text-display support for new scr…

树莓派4B(Raspberry Pi 4B)使用docker搭建springBoot/springCloud服务

树莓派4B(Raspberry Pi 4B)使用docker搭建springBoot/springCloud服务 前提:本文基于Ubuntu,Java8,SpringBoot 2.6.13讲解 准备工作 准备SpringBoot/SpringCloud项目jar包 用 maven 打包springBoot/springCloud项目&…

idea中vue文件如何快捷打出html标签结构,不写<

例如写一个<button></button>标签&#xff1a;快捷键如下 先写一个button&#xff0c;然后再按tab键即可自动生成一对标签。 演示&#xff1a; 步骤一&#xff1a; 步骤二&#xff1a;

PHP中读取(截取substr)字符串前N个字符或者从第几个字符开始取几个字符

html <?php $str "123456789";echo substr($str , 0 , 3);//从左边第一位字符起截取3位字符&#xff1a;结果&#xff1a;123echo substr($str , 3 , 3);//从左边第3位字符起截取3位字符&#xff1a;结果&#xff1a;456?> html <?php$rest substr(&…

【华为OD机试】 最长子字符串的长度(一)【2024 C卷|100分】

【华为OD机试】-真题 !!点这里!! 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 给你一个字符串 s,首尾相连成一个环形,请你在环中找出 o 字符出现了偶数次最长子字符串的长度。 输入描述 输入是一个小写字母组成的字符串 输出描述 输出是一个整数 备注 1 ≤ s.length…

STM32 STD/HAL库驱动W25Q64模块读写字库数据+OLED0.96显示例程

STM32 STD/HAL库驱动W25Q64 模块读写字库数据OLED0.96显示例程 &#x1f3ac;原创作者对W25Q64保存汉字字库演示&#xff1a; W25Q64保存汉字字库 &#x1f39e;测试字体显示效果&#xff1a; &#x1f4d1;功能实现说明 利用W25Q64保存汉字字库&#xff0c;OLED显示汉字的时…

Rust基础拾遗--辅助功能

Rust基础拾遗 前言1.错误处理1.1 panic为什么是 Result 2. create与模块3. 宏4. 不安全代码5. 外部函数 前言 通过Rust程序设计-第二版笔记的形式对Rust相关重点知识进行汇总&#xff0c;读者通读此系列文章就可以轻松的把该语言基础捡起来。 1.错误处理 Rust 中的两类错误处理…

寒假作业——2/13

作业1 作业2 cp cp 当前的文件位置 复制到哪个位置 格式 : cp 路径/文件 路径/目录名/重新命名的目录名 mv mv 当前的文件位置 复制到哪个位置 格式 : mv 路径/文件 路径/目录名/重新命名的目录名 也可进行重命名操作 find 查找文件 find 目标路径 -name 文件名 后续…

vue监视和深度监视

vue监视 监视属性watch 1.监视的属性变化时&#xff0c;回调函数自动调用&#xff0c;自动操作 2.监视的属性一定要存在&#xff0c;才可以进行监视 3.监视的写法 1.new vue的时候传入watch配置 2.通过vm.$watch监视 vue监视深度 深度监视 1.vue中的watch默认不检测对象内部…

leetcode(数组)128.最长连续序列(c++详细解释)DAY8

文章目录 1.题目示例提示 2.解答思路3.实现代码结果 4.总结 1.题目 给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 示例 示例 1&a…

政安晨:在Jupyter中【示例演绎】Matplotlib的官方指南(二){Image tutorial}·{Python语言}

咱们接着上一篇&#xff0c;这次咱们讲使用Matplotlib绘制图像的简短尝试。 我的这个系列的上一篇文章在这里&#xff1a; 政安晨&#xff1a;在Jupyter中【示例演绎】Matplotlib的官方指南&#xff08;一&#xff09;{Pyplot tutorial}https://blog.csdn.net/snowdenkeke/ar…

IM聊天系统为什么需要做消息幂等?如何使用Redis以及Lua脚本做消息幂等【第12期】

0前言 消息收发模型 第一张图是一个时序图&#xff0c;第二张图是一个标清楚步骤的流程图&#xff0c;更加清晰。消息的插入环节主要在2步。save部分。主要也是对这个部分就行消息幂等的操作。 前情提要&#xff1a;使用Redis发布 token 以及lua脚本来共同完成消息的幂等 目…

119.乐理基础-五线谱-五线谱的标记

内容参考于&#xff1a;三分钟音乐社 上一个内容&#xff1a;音值组合法&#xff08;二&#xff09; 力度记号&#xff1a;简谱里什么意思&#xff0c;五线谱也完全是什么意思&#xff0c;p越多就越弱&#xff0c;f越多就越强&#xff0c;然后这些渐强、渐弱、sf、fp这些标记…

如何开发一个属于自己的人工智能语言大模型?

要开发一个属于自己的人工智能语言模型&#xff0c;你需要遵循以下步骤&#xff1a; 数据收集&#xff1a;首先你需要大量的文本数据来训练你的模型。这些数据可以来自于各种来源&#xff0c;例如书籍、网站、新闻文章等。你需要确保这些数据足够多样化&#xff0c;以便模型能学…

大模型+LangChain知识

什么是 LangChain&#xff1f; https://python.langchain.com/docs/get_started/introduction LangChain 是一个基于语言模型的框架&#xff0c;用于构建聊天机器人、生成式问答&#xff08;GQA&#xff09;、摘要等功能。它的核心思想是将不同的组件“链”在一起&#xff0c…