安装node.js;npm与cnpm、yarn;webpack;vue-cli

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

  1. 官网下载地址下载对应安装包:http://nodejs.cn/download/
  2. 点击安装,选择路径(我选的D:\Program Files\nodejs),下一步到完成。
  3. win+R键,输入cmd,打开命令行窗口,输入:npm-v 。如下图示表安装成功。
    在这里插入图片描述打开系统环境变量查看,可见安装时已经已经自动添加了环境变量。
    在这里插入图片描述

3、修改默认配置

  1. 首先配置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、cnpmyarn
初始化npm inityarn init
安装依赖npm installyarn
全局安装依赖npm install package@version -gyarn global add package@version
安装依赖并保存到dependenciesnpm install package@version --saveyarn add package@version
安装依赖并保存到devnpm install package@version --save-dev yarn add package@version --dev
移除依赖npm uninstall package --save(-dev)yarn remove package
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Huathy-雨落江南,浮生若梦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值