前端项目工程化

Npm 是nodejs里面自带的帮助我们构建前端工程化的工具

Win+r  打开运行工具 输入cmd 选择确定

进入cmd控制面板

检查nodejs的版本

输入node -v 可以查看版本



在保证nodejs安装完毕的情况下

使用npm 命令

新建一个文件夹双击打开文件夹

在文件夹的内部按住shift按键 右击鼠标不松

选择在此处打开Powershell窗口

如果是苹果电脑进入网址https://git-scm.com/

下载苹果版本的git 全部下一步

在文件夹右击选择Git Bash Here 也可以执行下面的同样的操作

上面的操作是为了保证是在你当前文件夹下建立项目

输入npm命令  npm init 回车

遇到问你的问题就按下enter键

直到后面问你yesOrNo?输入yes 结束

这样就会在你的文件夹下面出现package.json文件




上面出现的就是你默认的项目信息

Name代表项目的名字

version代表项目的版本号

Description 代表项目的具体描述

Mian代表项目的主要入口

Scripts代表调试这个项目的命令

Author代表作者

License 代表用什么语言规范





第二种建立项目的快捷方式

点击Powershell下 或者 选择Git Bash Here,输入

npm init -y 可以快速生成package.json文件

但是里面的所有内容都是默认的


如果安装下载一个模块

在当前文件夹的Powershell下,输入 npm install vue或者

npm i vue(简写方式) 都可以安装一个vue包



在你当前的文件夹内生成一个node_modules(依赖文件),

你需要的所有的库或者模块都在依赖文件里面。











如果你需要用里面的vue文件可以在依赖文件中寻找


截图上的vue下的dist文件夹,就是vue文件的打包后的主文件夹,所有的资源都在dist文件夹里面。









当你npm install vue之后,会在package.json文件加上上面红框的字段,dependencies表示生产环境中所需要的文件或者模块,

Vue:”^2.6.14”2.6.14代表目前vue使用的版本 ^表示你后面安装依赖的时候,如果对方的版本升级了,那会变成最新的小版本,比如2.7.0,不会动2,但是会动6,6就叫做小版本。

如果你想让别人安装的js或者库是指定的版本,可以把^去掉





Package.json的作用:

当别人给你项目的时候,不会给你node_modules依赖文件,

你需要在存在package.json的文件下,去使用npm i 或者npm install来安装。


想安装指定版本的js怎么办?

如果不知道具体的版本可以输入npm i vue@3,那么就会下载vue3最新的版本,如果你的项目已经存在vue2了,会被替换,package.json中的文字也会被替换




如果你知道了指定的版本可以直接写npm i vue@3.2.26


卸载npm uninstall vue

也可以简写为npm uni vue


npm i vue 默认是安装在生产环境的,但是有的时候,生产环境并不需要,只是开发的时候需要,那么我们安装需要分成两个环境,第一个环境是开发环境,第二个环境是生产环境。如果都安装在一起,那么最后的文件将变得特别的庞大,所以需要区分。

安装到开发环境的命令npm i xxx --save-dev 或者

npm i xxx -D






devDependencies就代表描述开发环境需要安装的依赖的字段

当你拿到一个项目npm i的时候就是安装的开发环境的依赖文件


安装到生产环境的命令:npm i xxx --save 或者

npm i xxx -S


dependencies表示描述生产环境所需要安转的依赖文件

当你打包文件上线的时候,就会根据你dependencies上面的文件进行打包,打包的时候会根据你的代码的引用来判断要不要帮你打包到最终的dist文件中。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,137评论 6 511
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,824评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,465评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,131评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,140评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,895评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,535评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,435评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,952评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,081评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,210评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,896评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,552评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,089评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,198评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,531评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,209评论 2 357

推荐阅读更多精彩内容