前端项目工程化

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 [email protected]

卸载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文件中。