前端工程化-NPM

news2024/11/9 1:40:16

前端工程化-NPM

    • 1.什么是NPM
    • NPM安装
    • 基本使用

1.什么是NPM

NPM代表npmjs.org这个网站,这个站点存储了很多Node.js的第三方功能包。
NPM的全称是Node Package Manager,它是一个Node.js包管理和分发工具,已经成为非官方的发布Node模块(包)的标准。它可以让JavaScript开发者能够更加轻松地共享代码和共用代码片段,并且通过NPM管理需要分享的代码也很方便、快捷和简单。
NPM最初用于管理和分发Node.js的依赖,它自动化的机制使得层层嵌套的依赖管理变得十分简单,因此后来被广泛应用于前端依赖的管理中。
NPM是随同Node.js一起安装的包管理工具,能解决Node.js代码部署上的很多问题,常见的使用场景有以下几种:
(1)允许用户从NPM服务器下载别人编写的第三方包到本地使用。
(2)允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
(3)允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

NPM安装

由于Node.js已经集成了NPM,所以在安装Node.js时NPM也一并安装好了。所以可以在cmd终端输入npm-v来测试是否安装成功。命令如图所示,如果出现版本提示则表示安装成功。在这里插入图片描述
温馨提示:由于NPM的仓库源部署在国外,资源传输速度较慢且可能受限制,所以大家可以直接使用NPM安装其他依赖,也可以使用淘宝的镜像源CNPM(CNPM是淘宝团队在国内开发的一个相当于NPM的镜像,可以用CNPM代替NPM来安装依赖包)。
安装CNPM命令,我们通过打开命令行工具(Win+R),输入:

npm install -g cnpm -- registry=http://registry.npm.taobao.org

这样就可以使用淘宝定制的CNPM(gzip压缩支持)命令行工具代替默认的NPM,当然大家也可以选择不安装,不代替NPM。

基本使用

在用Vue构建大型应用时推荐使用NPM安装。NPM能很好地和诸如WebPack或Browserify模块打包器配合使用。在7.1.1节中将Vue环境搭建完成后,本节可以利用Vue提供的Vue-cli脚手架快速建立项目,步骤如下:
(1)搭建第一个完整的Vue-cli脚手架构建的项目。
Vue-cli是用Node编写的命令行工具,我们需要进行全局安装。打开命令行终端,输入如下命令:

npm install -g vue-cli

然后等待安装完成,如图在这里插入图片描述
注意:只需第一次构建脚手架项目时执行上述命令,以后的Vue项目构建从第(3)步开始。
(2)安装完成后,在命令行输入vue-V,如果出现相应的版本号,则说明安装成功,如图

在这里插入图片描述
(3)我们可以使用Vue-cli快速生成一个基于Webpack模板构建的项目,如图
所示,项目名为vue-project。

在这里插入图片描述
首先需要在命令行中进入项目目录,然后输入如下命令:

//cd $ 自定义路径$(如:D:\Web前端\VueCode)
vue init webpack vue-project

(4)配置完成后,可以看到目录下多出了一个项目文件夹,里面就是Vue-cli所创建一个基于Webpack的Vue.js项目。
然后进入项目目录(如:cd vue-project),使用npm install安装依赖,如图在这里插入图片描述
在这里插入图片描述

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

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

相关文章

DR模式 LVS负载均衡群集部署

DR模式 LVS负载均衡群集部署 一、LVS-DR工作原理1.数据包流向分析2.LVS-DR中的ARP问题3.LVS-DR模式的特点 二、LVS-DR部署1.部署NFS服务器2.配置2台节点服务器3.部署调度服务器 一、LVS-DR工作原理 1.数据包流向分析 (1)客户端发送请求到 Director Serv…

Spring Cloud Ribbon源码解析,Ribbon为什么可以实现负载均衡,为什么可以用服务名调用

文章目录 一、Ribbon概述1、Ribbon简单使用(1)引包(2)使用方式一:RestTemplateLoadBalanced(3)使用方式二:LoadBalancerClient 2、问题来了 二、前置知识回顾1、复习Qualifier的作用…

时序逻辑与组合逻辑

目录 一、概念 二、区别 一、概念 数字电路按照逻辑功能一般可以分为组合逻辑和时序逻辑。组合逻辑电路是指不含有任何存储器件(一般指寄存器)的电路,它的输出只和当前电路的输入有关;时序逻辑电路含有存储器件,可以…

[PyTorch][chapter 38][ResNet ]

前言: 论文地址: https://arxiv.org/pdf/1512.03385.pdf 残差网络是由来自Microsoft Research的4位学者提出的卷积神经网络,在2015年的ImageNet大规模视觉识别竞赛(ImageNet Large Scale Visual Recognition Challenge, ILSVRC&am…

[ATL/WTL]_[初级]_[如何获取ListView点击的单元格区域]

场景 在做Win32/WTL开发时,CListViewCtrl控件是常用的表格控件。有时候自绘listview时,需要在单元格上绘制小图标,并且小图标能响应鼠标点击的操作。 那么如何实现判断是否点击了小图标呢? 说明 要响应点击单元格上的小图标&…

MongoDB笔记

mongoDB基础知识 MongoDB的三个核心特性:灵活设计(No Schema)、高可用和分布式(可平行扩展),另外MongoDB自带数据压缩功能,使得同样的数据存储所需的资源更少。 No Schema(BJSON&a…

NeRF-Diffusion系列文章阅读

文章目录 前置知识《Latent-NeRF for Shape-Guided Generation of 3D Shapes and Textures》【CVPR23】《NeRDi: Single-View NeRF Synthesis with Language-Guided Diffusion as General Image Priors》【CVPR23】《SparseFusion: Distilling View-conditioned Diffusion for …

【系统找不到D盘指定驱动设备之解决方法】

文章目录 1.原因2.解决经过3.最终解决办法 1.原因 今天在搞课设,突然之间电脑一顿卡,然后整个电脑屏幕空白,D盘以及所有的安装软件都不见了。点击屏幕出现提示系统找不到指定驱动设备等等提示,查看此电脑发现D盘神奇的消失了。 …

Kafka面试题01

1、kafka有哪些特点 高吞吐,低延迟 可以热扩展 并发度高 具有容错性(即使挂的只剩下一台也可以正常工作) 可靠性高2、请简述你在那些场景下会选择kafka?kafka的应用 日志收集: 一个公司可以用kafka收集各种服务的log…

B站、抖音上那些4K、60帧视频是如何修复的?

如何把一个不清晰的视频变成高清的视频?今天就来教大家视频画质修复把720p的渣画质变成4K超清画质。 相信对于电影和后期爱好者来说,糊成马赛克的画质一定劝退了无数人,那不妨试试这个 牛学长视频修复工具 牛学长视频修复工具通过高级的AI…

Java网络开发(Tomcat)—— 登陆 和 注册功能 的实现 从html 到 jsp 迭代升级 session保存登陆信息

目录 引出登陆功能---从html到jsp1.登陆--用post请求2.用html文件的form表单登陆(1)index.html页面(2)login.html登陆的页面(3)LoginServlet.java处理输入信息的代码(4)登陆成功&…

ChatGPT提示大解析:如何有效定制Prompt并用插件管理

有时候,你可能在编程时遇到难题,需要解决方法。有时候,你在学习新的语言时,想要找到一位悉心的教师。又或者,你可能只是需要一些新的灵感,来润色你的文章。在所有这些情况下,ChatGPT都可以发挥巨…

轻量应用服务器哪款性价比高?

最近云服务器618活动正在火热进行中,选对时间入手自己心仪的云服务器其实可以为你省去一大笔费用,这里先开门见山将三家的云服务器活动粒度做个对比。 腾讯云 懂行的人一看这种配置性价比就会内心无比激动,按照平时的价格根本买不到这么实惠的…

JavaSE基础知识笔记

​1、基础语法 在一个Java源文件中可以声明多个class,但是最多只有一个类可以被声名为public,而且被声名为public的类的类名必须与源文件名相同。 计算机底层都以补码的方式来存储数据!目的是为了简化计算机的结构设计,同时提升运…

如何在Moonbeam设置多重签名钱包,加固资产安全

Moonbeam Safe是以太坊上Safe(先前名为Gnosis Safe)的分叉。Safe于2018年正式推出,并发展成为了以太坊上知名的去中心化托管协议和集体资产管理平台。 Moonbeam Safe可用于创建多重签名Safe钱包,通过配置一个多签(mul…

02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素

Web大前端时代之&#xff1a;HTML5CSS3入门系列&#xff1a;Web大前端时代之&#xff1a;HTML5CSS3入门系列 - 毒逆天 - 博客园 1.结构元素 可以理解为语义话标记&#xff0c;比如&#xff1a;以前这么写<div id"nav"></div> 现在偷懒写&#xff1a;&l…

JavaWeb笔记_SpringBoot原理

JavaWeb笔记_SpringBoot原理 配置优先级Bean管理获取BeanBean作用域第三方Bean SpringBoot原理自动配置原理ComponentScan组件扫描Import导入源码跟踪Conditional自定义starter创建aliyun-oss-spring-boot-starter模块创建aliyun-oss-spring-boot-autoconfigure 来源 配置优先级…

opencv、dlib、paddlehub人脸检测

opencv、dlib、paddlehub检测效果对比。dlib和paddlehub的效果相对好一点。 说明&#xff1a;本文只做人脸检测不识别&#xff0c;找识别的不用看本文。 ## 部署说明 # 1. 安装python或conda # 2. 安装依赖&#xff0c;pip install -r requirements.txt # 3. 192.168.1.41 修…

Docker 基本使用

安装 Linux安装 # 1、查看当前Linux系统版本 Linux系统版本需要>3.0 [rootzjrs_test2_152 ~]# uname -a Linux zjrs_test2_152 3.10.0-957.el7.x86_64 #1 SMP Thu Nov 8 23:39:32 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux [rootzjrs_test2_152 ~]# uname -r 3.10.0-957.el…

Baumer工业相机堡盟工业相机如何使用BGAPI SDK控制相机数据流的开启和关闭(C#)

Baumer工业相机堡盟工业相机如何使用BGAPI SDK控制相机数据流的开启和关闭&#xff08;C#&#xff09; Baumer工业相机Baumer工业相机BGAPI SDK的技术背景Baumer工业相机使用BGAPISDK控制相机数据流的方式1.引用合适的类文件2.使用BGAPISDK控制相机数据流的方式2.使用BGAPISDK控…