1.相关名词解释

npm: Nodejs下的包管理器。
webpack: 主要作用通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。
vue-cli: 用户生成Vue工程模板。(快速创建一个vue项目,生成一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装使用)

2.安装

1.官网下载安装包。网址:https://nodejs.org/en/

antdesign vue npm 在别的电脑上打开_vue安装


2.更换成自己想要存放的目录,记住路径。后面有用

antdesign vue npm 在别的电脑上打开_vue安装_02


然后一路next进行安装

antdesign vue npm 在别的电脑上打开_vue安装_03


这样安装会自动将path添加到环境变量中

antdesign vue npm 在别的电脑上打开_安装过程_04


可以win+r,cmd进命令行,输入echo %PATH%查看一下

antdesign vue npm 在别的电脑上打开_环境变量_05


antdesign vue npm 在别的电脑上打开_环境变量_06


到安装nodejs的目录下新建下图所圈目录

antdesign vue npm 在别的电脑上打开_vue安装_07


运行如下命令,路径与自己的保持一致

npm config set prefix “D:\nodejs\node_global”

npm config set cache “D:\nodejs\node_cache”

antdesign vue npm 在别的电脑上打开_安装过程_08


可以看到路径已经改变,且目录里面为空。npm list -global查看npm本地仓库

然后为npm配置一个镜像仓库,命令为:npm config set registry=http://registry.npm.taobao.orgnpm config list 显示所有配置信息

antdesign vue npm 在别的电脑上打开_安装过程_09


npm config get registry查看镜像仓库是否配置成功

antdesign vue npm 在别的电脑上打开_下载安装_10

查看是否能够拉取到vue的信息 npm info vue

antdesign vue npm 在别的电脑上打开_安装过程_11


开始安装vue

npm install npm -g (npm install:安装或更新命令;npm:模块名字 ; -g:表示安装到global目录下,就是前面设置的d:\nodejs\node_global目录)

antdesign vue npm 在别的电脑上打开_vue安装_12


可以看出,npm已经升级了。

antdesign vue npm 在别的电脑上打开_nodejs安装_13


已经不为空了。

此时,默认的模块D:\nodejs\node_modules 目录

将会改变为D:\nodejs\node_global\node_modules 目录,

直接运行npm install等命令会报错的。

需要配置环境变量:

增加环境变量NODE_PATH 内容是:D:\nodejs\node_global\node_modules

antdesign vue npm 在别的电脑上打开_下载安装_14


antdesign vue npm 在别的电脑上打开_安装过程_15


注意路径,然后重新打开cmd。让设置生效安装vue.js

命令:npm install vue -g (-g:安装在全局目录中)

antdesign vue npm 在别的电脑上打开_环境变量_16


antdesign vue npm 在别的电脑上打开_vue安装_17


安装vue-router

命令:npm install vue-router -g

antdesign vue npm 在别的电脑上打开_nodejs安装_18


antdesign vue npm 在别的电脑上打开_环境变量_19


npm install vue-cli -g安装vue脚手架

antdesign vue npm 在别的电脑上打开_vue安装_20


如果安装过程中出现如下错误,可以ctrl+c停止进程,重新安装。

antdesign vue npm 在别的电脑上打开_下载安装_21


安装完毕后,直接运行vue是不行的,因为我们将vue安装在了自己定义的global目录下,需要设置变量

antdesign vue npm 在别的电脑上打开_环境变量_22


antdesign vue npm 在别的电脑上打开_下载安装_23


重新打开cmd,输入vue即可看到信息

antdesign vue npm 在别的电脑上打开_vue安装_24


创建一个vue项目,根据个人需求蛇者具体信息

antdesign vue npm 在别的电脑上打开_安装过程_25


初始化,安装依赖

npm install

运行 npm run dev

antdesign vue npm 在别的电脑上打开_nodejs安装_26


出现localhost:8080代表成功

antdesign vue npm 在别的电脑上打开_环境变量_27


运行npm run build 生成静态文件

antdesign vue npm 在别的电脑上打开_nodejs安装_28


antdesign vue npm 在别的电脑上打开_下载安装_29