- npm介绍
NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:
1.允许用户从NPM服务器下载别人编写的第三方包到本地使用。
2.允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
3.允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
- npm的安装
由于新版的nodejs已经集成了npm,因此安装Node.js完成后,Npm也安装完成了。
node.js下载地址
node.js安装完成后,配置相应的环境变量
配置完成后,可在cmd中看到对应的npm版本:
此时还需要配置npm的全局模块存放路径以及cache的路径(路径为本地安装node.js的路径)
命令:
npm config set prefix “E:\nodejs\node_global”
npm config set prefix “E:\nodejs\node_cache”
完成后,可进行如下验证:
执行如下命令:(-g 是将express模块安装到 E:\nodejs\node_global 文件夹下(全局模块路径))
npm install express -g
检测是否安装成功,在对应目录下会看到对应的文件,如图:
成功后,可执行如下命令提高npm的执行效率:
npm config set registry=http://registry.npm.taobao.org 配置镜像站
安装npm若出现如下错误:
手动更改 :C:\Users\zhangbo.BJHUAHUAN.npmrc文件
将对应的路径修改正确。
- 安装cnpm
安装过程类似npm:
安装:
npm install -g cnpm registry=https://registry.npm.taobao.org
查看是否安装成功:
cnpm -v
cnpm会被安装到E:\nodejs\node_global\node_modules下,而系统变量path并未包含该路径。在系统变量path下添加该路径即可正常使用cnpm。
- 安装webpack和vue-cli
webpack安装:
命令行中执行:
- cnpm install webpack -g
npm install webpack webpack-cli -g
webpack eb成功后查看版本:
- webpack -v
vuecli 安装:
命令行中执行:
- cnpm install vue -g
cnpm install vue-cli -g成功后查询版本:
- vue -V
- 利用vue脚手架创建一个vue项目platform-startup-ui:
执行命令:
vue init webpack platform-startup-ui (创建项目:platform-startup-ui)
进入项目目录下执行命令安装npm依赖:
cnpm install | npm install
项目目录下运行项目:
npm run dev
可成功访问 http://localhost:8080 即创建成功: