npm安装

短命女 2022-04-18 02:58 310阅读 0赞

npm：nodejs下的包管理器

webpack：主要的功能是通过commentJS语法把所有浏览器端需要发布的静态资源做相应的准备，如资源的合并和打包

vue-cli：用户生成VUE工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）

1、下载nodejs，网址：[https://nodejs.org/en/][https_nodejs.org_en]

2、安装nodejs，安装成功

3、打开cmd，检查是否正常

4、输入echo %PATH%查看环境变量中是否含有刚刚安装的nodejs

5、输入node -v查看安装的node版本

6、输入npm -v 可查看npm的版本

7、打开C:\\Users\\Administrator\\AppData\\Roaming文件夹，找到npm文件夹，移动到nodejs的安装目录下

8、在nodejs安装目录下创建node\_cache、node\_global两个文件夹

9、cmd中运行下面两条命令

npm config set prefix "nodejs安装目录\\node\_global"

npm config set cache "nodejs安装目录\\node\_cache"

10、输入npm list -global可以查看到文件路径已经改变了（可以看到运行上面的两个命令前后的变化）

11、输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站

12、输入命令npm config list 显示所有配置信息，可以查看到我们刚刚配置的三个参数cache、prefix、registry

![20181107171344597.png][]

13、用编辑器打开C:\\Users\\Administrator\\.npmrc这个文件可看到上面的配置信息

14、输入命令npm config get registry检测镜像

15、输入命令npm info vue 获得vue的信息

16、输入命令npm install（安装模块名） npm -g安装或更新npm install命令；-g是安装到nodejs目录下的node\_global目录下

17、输入命令npm install npm -g查看global下的模块

18、输入npm -v可查看到npm升级后的版本

19、默认的node\_module目录已经改到node\_global目录下了，直接运行npm install命令将会报错

20、增加环境变量NODE\_PATH ，内容是node\_modules目录的路径

21、输入命令npm install vue -g把Vue.js安装到全局目录下node\_global

22、安装成功后可以在node\_global目录下可以查看到Vue文件夹

23、测试npm安装vue-router；输入命令：npm install vue-router -g

24、运行npm install vue-cli -g安装vue脚手架

25、把vue添加到环境变量中去（node\_global下的vue.cmd）

26、输入vue -V查看vue版本；进入nodejs安装的根目录（也就是盘符，如D:）

vue-cli工具是内置了模板包括webpack和webpack-simple，前者是比较复杂专业的项目，他的配置并不全放在根目录下的webpack.config.js中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NlbnRhdXJ5MzI_size_16_color_FFFFFF_t_70][]

![20181107180731542.png][]

## ##

创建项目完成

27、初始化，安装依赖

进入目录 cd vue01（目录名称）；输入npm install安装依赖

28、npm run dev

![20181107181247712.png][]

29、浏览器打开localhost:8081可以看到下main的页面，端口号根据与上图中的端口号一致

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NlbnRhdXJ5MzI_size_16_color_FFFFFF_t_70 1][]

30、npm run build 生成静态文件，打开dist文件夹下新生成的index.html文件

[https_nodejs.org_en]: https://nodejs.org/en/
[20181107171344597.png]: /images/20220418/8291b86bfa0d4da9a2012221bf8e7604.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NlbnRhdXJ5MzI_size_16_color_FFFFFF_t_70]: /images/20220418/ee5daac4f6e84722b03822743d147999.png
[20181107180731542.png]: /images/20220418/3e29d3dd58bb4bf68fda01a51f173dab.png
[20181107181247712.png]: /images/20220418/19873da2ebb04d07aa301a221b7116b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NlbnRhdXJ5MzI_size_16_color_FFFFFF_t_70 1]: /images/20220418/339693ccd6a74bcfa083e13ca59b275a.png