文章目录
1、npm简介
npm
全称为 Node Package Manager
,是一个基于Node.js
的包管理器,也是整个Node.js
社区最流行、支持的第三方模块最多的包管理器。
cnpm
:淘宝(这是一个完整 npmjs.org 镜像,你可以用此代替官方版本)。
webpack
: JavaScript
打包器(module bundler)。主要用途:通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。
vue-cli
: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装)
2、安装node.js
- 官网下载地址下载对应安装包:http://nodejs.cn/download/
- 点击安装,选择路径(我选的D:\Program Files\nodejs),下一步到完成。
- win+R键,输入cmd,打开命令行窗口,输入:npm-v 。如下图示表安装成功。
打开系统环境变量查看,可见安装时已经已经自动添加了环境变量。
3、修改默认配置
- 首先配置npm的全局模块的存放路径、cache的路径。(这里我选择放在:D:\Program Files\nodejs)
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache"D:\Program Files\nodejs\node_cache"
如下图示:
2. 添加环境变量
变量名:NODE_PATH
变量值:D:\Program Files\nodejs\node_global
3. 在path变量中新建变量值:D:\Program Files\nodejs\node_global
4、安装 cnpm
注:“-g”表示安装到global目录下,就是上面设置的node_global中
npm install -g cnpm --registry=https://registry.npm.taobao.org
执行 cnpm -v 。如下图示:
5、安装yarn
安装:npm install yarn -g
查看版本:yarn --version
镜像配置:
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
6、安装 vue-cli
cnpm install -g @vue/cli
7、安装 webpack
cnpm install -g webpack
8、执行 vue ui 命令打开vue图形管理界面
——》默认设置 ——》 创建项目 ——》 在命令行可以看到项目的创建过程与进度 ——》 到刚刚设置的路径下可以看到已经创建了一个名为test的文件夹
9、npm、cnpm、yarn语法区别
指令 | npm、cnpm | yarn |
---|---|---|
初始化 | npm init | yarn init |
安装依赖 | npm install | yarn |
全局安装依赖 | npm install package@version -g | yarn global add package@version |
安装依赖并保存到dependencies | npm install package@version --save | yarn add package@version |
安装依赖并保存到dev | npm install package@version --save-dev | yarn add package@version --dev |
移除依赖 | npm uninstall package --save(-dev) | yarn remove package |