windows 10安装nodejs(npm,cnpm),在谷歌浏览器上安装vue开发者工具 vue Devtools

安装nodejs

 

1)安装nodejs,

国外下载地址:https://nodejs.org/en/ 

国内下载地址:http://nodejs.cn/download/

下载16.8.0版本,下载完成后双击【node-v16.8.0-x64.msi】安装。

安装完成后使用  npm -v 命令查看nodejs是否安装成功。

 

   2).配置全局环境变量,

环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间,现在要将全局模块安装到指定的位置 。

 

(1) 配置npm的全局模块的存放路径以及cache的路径,例如两个文件夹放在NodeJS的主目录下,便在D:\Program Files\nodejs下建立【node_global】及【node_cache】两个文件夹,

  

然后输入以下命令改变npm配置,

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\node_modules,此后所安装的模块都会安装到改路径下。

(3) 以管理员权限打开cmd窗口(必须以管理员权限打开),在命令行输入以下命令试着安装express(注:“-g”这个参数意思是装到global目录下,也就是上面说设置的“D:\Program Files\nodejs\node_global”里面。)

npm install express -g

安装完毕后可以看到 D:\Program Files\nodejs\node_global\node_modules\  下面有express文件夹及内容了。

 

  

4) 在命令行输入node进入编辑模式,输入以下代码检测是否能正常加载模块。

切换到Node命令进入编辑模式

node

输入命令 require('express')

require('express')

看到如下输出说明node能正常加载模块,否则可能是环境变量路径配置不正确。

  

5)安装cnpm,cnpm是淘宝的npm国内镜像。

npm install -g cnpm --registry=https://registry.npm.taobao.org

 

如果安装 cnpm出现报错 request to https://registry.npm.taobao.org/cnpm failed, reason: certificate has expired

 将strict-ssl设置为false即可。

npm config set strict-ssl false

 

添加系统环境变量,变量名:CNPM_PATH,变量值:D:\Program Files\nodejs\node_global\node_modules\cnpm\bin

添加系统环境变量,变量名:NODE_HOME,变量值:D:\Program Files\nodejs

编辑PATH环境变量,追加四项:

%NODE_HOME%
%NODE_HOME%\node_global
%NODE_PATH%
%CNPM_PATH%

 

  

安装完成后,输入cnpm -v 检查 cnpm是否安装成功。

查看淘宝镜像是否配置成功

npm config get registry

 

安装vue dev-tool

 

1)在github下载devtools源码,地址:https://github.com/vuejs/vue-devtools

下载好后解压,打开cmd命令窗口,进入devtools-main文件夹, 

  

【构建vue devtools】有种方法构建vue devtools源码。

第一种方法:通过npm构建

安装npm依赖,构建源码

cnpm install
npm run build

 

第二种方法:通过yarn构建

如果使用npm构建vue开发者工具失败,需要用yarm安装。

安装yarn

npm install -g yarn

安装前更换淘宝镜像,不然等半天还报错timeout

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

查看yarm镜像

yarn config get registry

下载yarn依赖,构建源码

yarn install
yarn run build

构建完成,会在【shells => chrome】下的src文件夹里产生以下几个js文件,就是构建好的devtools插件。

  【将构建后的vue devtools插件添加到谷歌浏览器】

打开 谷歌浏览器  => 更多工具 => 扩展程序 => 加载已解压的扩展程序 => 选择刚刚构建好的 【shells => chrome】文件夹,就可以加插件添加到谷歌浏览器。

 

 

浏览器右侧工具栏上出现vue小图标,说明vue devtools插件就安装成功了。

 

posted @ 2021-08-31 11:42  民工黑猫  阅读(1342)  评论(0编辑  收藏  举报