当前位置: 首页 > Web前端 > vue.js

从零开始,使用elementui躺在vue-npm

时间:2023-03-31 22:35:35 vue.js

npm:nodepackagemanager,翻译成中文就是node包管理工具。随着Node.js的流行,使用npm分享js代码已经成为每个前端开发者必备的工具。但就现状而言:部分开发者还停留在npminstall层面。更重要的是,如果不一致,删除它,rm-fnode_modules。今天就让小编带大家了解下npm的基本原理和实践。1、npminit初始化package.json文件,生成name、version、script等字段。具体使用说明推荐npm的package.json中文文档2.npminstall依赖管理是npm的核心内容。原理是执行npminstall从package.json安装依赖。npminstall\后,我们可以在node_modules中查看安装的依赖包。虽然开发者只需要关注业务中的引用依赖即可。这是开发人员最常用的命令,也是克隆项目或创建新项目必须使用的第一个命令。3.npm--save-dev和npm--save--save||-S:运行dependencies(publish),将包信息添加到dependencies中,需要发布到生产环境。--保存开发||-D:开发依赖(辅助),在devDependencies中添加包信息,仅用于开发环境安装依赖时如何判断?官方的说法是:--save-dev我们只在开发时使用,生产部署后不会执行。--save:开发完成后一定要依赖它们,否则用不到。简单来说:如果程序没有这个依赖就不能运行,你必须使用--save。比如vue-router。如果依赖仅用于编译、构建和生成文档,请使用--save-dev4。package-lock.jsonpackage-lock.json文件的作用是在安装时锁定包的版本号。4.1^:Majorversionnumbercontrol^是npm默认的版本号,例如"requires":{"graceful-fs":"^4.1.2","inherits":"~2.0.0","mkdirp":">=0.50","rimraf":"2"}这个符号定义了一个向后(新)兼容性依赖,告诉npm安装8.0.33或比它更高的版本,但主要版本是4.x.xVersion4.2~:Minorversionnumbercontrol~是小版本号控制,例如"requires":{"graceful-fs":"^4.1.2","inherits":"~2.0.0","mkdirp":">=0.50","rimraf":"2"}^和^的区别在于~version只能指定次版本号2.0。测试版。可以理解为大于等于。如:0.5.1因此,我们在使用npminstall时,会根据package-lock.json文件进行安装,保证不同环境、不同时间的依赖是相同的。而不是根据package.json文件。因为pacakge-lock.json为每个依赖指明了版本、获取地址和hash值,所以每次安装的结果都是一样的。无论您在什么机器上或何时安装它都没有关系。基于此,如果我们手动更改package.json文件安装,则不会更新包。如果我们要更新,我们必须指定版本号。比如:npminstallaxious@3.2.0--save-dev,这样更新package-lock.json就可以了。切记:不要手动修改package-lock.json5.依赖管理不要手动修改package-lock.json文件。项目组成员第一次checkout/clone项目代码时,需要手动npminstall,确保同步依赖小版本升级依赖,可以使用npmupdatenpmuninstall删除依赖包任何项目组members更新完package.json和package-lock.json文件后,项目组其他成员需要重新拉取并使用npminstall同步更新依赖6.npmscripts{"scripts":{"dev":"webpack-dev-server--inline--progress--configbuild/webpack.dev.conf.js","start":"npmrundev","lint":"eslint--ext.js,.vuesrc","build":"nodebuild/build.js"}}在vue项目中,npmrundev可以说是我们最常用的命令了,也许我们从来没有过这个脚本命令的原理。今天就让小编给大家先睹为快。具体可以参考阮一峰的npmscripts使用指南。上面的代码是package.json文件的一个片段,里面的scripts字段是一个对象。它的每一个属性都对应一个脚本。比如npmrundev命令对应的脚本是webpack-dev-server--inline--progress--configbuild/webpack.dev.conf.js。npm的脚本原理很简单。每当执行npmrun时,都会自动创建一个shell。特别是,由npm创建的新shell会将node_modules/.bin子目录添加到路径变量中。执行完后,把PATH恢复到原来的样子。也就是说,当前目录的node_modules/.bin子目录下的所有脚本都可以直接用脚本名调用,不需要加路径。七、npm安装失败的解决方法在克隆或者初始化项目的时候,当npmi报错的时候,不要着急,尝试以下4大步骤,就会解决1.首先删除node_modules文件夹rm-rfnode_modules2.清理npm缓存npmcacheclean——force3。单独安装失败的npm(这个是一步解决,当然也可以省略这一步,直接跳到第4步----不建议省略)npmixx4.安装剩余的npmnpmi注意:请注意手动删除package-lock.json文件,然后运行npmi。这种方法虽然可以解决大部分npmi安装失败的问题,但是会造成npm依赖树错误,尤其是多人协同开发时,测试环境运行正常。打包上线后不工作的问题尽量不要用,因为会遗漏很多依赖,会出现各种莫名其妙的问题。8.参考npm:package.json阮一峰的npmscripts使用指南