前端工程化-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的仓库源部署在国外,资源传输速度较慢且可能受限制,所以大家可以直接使用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

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

前端工程化-NPM
(3)我们可以使用Vue-cli快速生成一个基于Webpack模板构建的项目,如图
所示,项目名为vue-project。

前端工程化-NPM
首先需要在命令行中进入项目目录,然后输入如下命令:

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

(4)配置完成后,可以看到目录下多出了一个项目文件夹,里面就是Vue-cli所创建一个基于Webpack的Vue.js项目。
然后进入项目目录(如:cd vue-project),使用npm install安装依赖,如图前端工程化-NPM
前端工程化-NPM文章来源地址https://www.toymoban.com/news/detail-489365.html

到了这里,关于前端工程化-NPM的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端工程化面试题】webpack的module、bundle、chunk分别指的是什么?

    首先从语法方面 在配置文件中有 module 这个配置项,里面有 rules 选项用来配置各种 loader,还有其他各种选项,参考官网。 bundle 和 chunk 在配置文件中是没有这个选项的,但是会出现在配置的值中。 module 模块 指单个文件,可以是 js、css、图片等, 每个文件都是一个独立的模

    2024年02月19日
    浏览(58)
  • 【前端工程化面试题】webpack proxy的工作原理,为什么能解决跨域问题

    在 webpack 的配置文件 webpack.config.js 中有一个配置项 devServer 里面有一个属性是 proxy,这里面可以配置代理服务器,解决跨域问题,请参考官网。 一般来说 webpack 的代理就是说的开发服务器 webpack-dev-server。 其实不光是 webpack 其他的打包工具比如是 vite,也有代理的功能,也是

    2024年02月21日
    浏览(59)
  • 前端工程化详解——理解与实践前端工程化

    前言: 前端工程化一直是一个老生常谈的问题,不管是面试还是我们在公司做基建都会经常提到前端工程化,那么为什么经常会说到前端工程化,并没有听过后端工程化、Java工程化或者Python工程化呢?我们理解的前端工程化是不是一直都是Webpack的性能调优,或者是一个cli工

    2024年02月02日
    浏览(82)
  • 前端工程化

    手把手带你走进Babel的编译世界 - 掘金 (juejin.cn) 我们所写的代码转换为机器能识别的一种 树形结构, 本身是由一堆节点(Node)组成,每个节点都表示源代码中的一种结构。 不同结构用类型(Type)来区分,常见的节点类型有Identifier(标识符),Expression(表达式),VariableDeclarat

    2023年04月11日
    浏览(100)
  • 前端工程化-VUE

    高效的开发离不开基础工程的搭建。本章主要介绍如何使用Vue进行实际SPA项目的开发,这里使用的是目前热门的JavaScript应用程序模块打包工具Webpack,进行模块化开发、代码编译和打包。 Vue脚手架指的是Vue-cli,它是一个专门为单页面应用快速搭建繁杂程序的脚手架,它可以轻

    2024年02月08日
    浏览(79)
  • 前端工程化相关

    知道软件包名,拿到源码或者路径的方法 在浏览器输入以下内容,就可以找到你想要的。。。 unpkg.com/输入包名 ESM特性清单: 自动采取严格模式,忽略“use strict” 每个ESM模块都是单独的私有作用域; ESM是通过CORS去请求外部JS模块的 ESM的script标签会延迟执行脚本,就要有

    2024年01月17日
    浏览(109)
  • 前端工程化与webpack

    能够说出什么是前端工程化 能够说出webpack的作用 能够掌握webpack的基本使用 了解常用plugin的基本使用 了解常用loader的基本使用 能够说出Source Map的作用 前端工程化 webpack的基本使用 webpack中的插件 webpack中的loader 打包发布 Source Map 1.1小白眼中的前端开发vs实际的前端开发 实际

    2024年02月13日
    浏览(79)
  • Ajax及前端工程化

    Ajax:异步的js与xml。 作用: 1、通过ajax给服务器发送数据,并获得其响应的数据。 2、可以在不更新整个网页的情况下,与服务器交换数据并更新部分网页的技术。  1、准备数据地址  2、创建XMLHttpRequest对象,用于和服务器交换数据  3、向服务器发送请求  4、获取服务器响

    2024年02月12日
    浏览(70)
  • 前端工程化知识系列(9)

    👍 点赞,你的认可是我创作的动力! ⭐️ 收藏,你的青睐是我努力的方向! ✏️ 评论,你的意见是我进步的财富! 持续性能监控和自动化性能优化在前端开发中非常重要。以下是一些相关工具和实践: 性能监控工具 :工具如Google Lighthouse、WebPageTest、PageSpeed Insights等可以

    2024年02月07日
    浏览(67)
  • 前端工程化之 webpack <一>

    编写的代码 ==》经过打包工具(glup、rollup、webpack、vite)本身也是js代码,读取文件操作的, 依赖于 node 环境 = = 》 普通的html 、css 、javascript = = 》 打包到静态服务器 = = 》 跑在用户的浏览器 用于对路径和文件进行处理 在 Mac OS、Linux 和 window 上的路径上是不一样的,部署的

    2024年01月24日
    浏览(74)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包