npm、Vue脚手架安装教程

npm、Vue脚手架安装教程

1.下载node.js

node.js官网链接：https://nodejs.org/en/

推荐下载红色框圈起来的版本

2.安装node.js

1）双击打开node.js安装包

2） 打开之后一直选择next

3）在该页面下可以修改默认路径

本笔记选择了“E:\node.js”

4）该页面下选择“install”

5）点击“Finish” 安装完成

6）查看安装目录下是否有该文件

node_modules：模块
node.exe：node.js程序
npm.cmd：包管理器

7）在cmd中检查是否有node

打开cmd后，在cmd中输入 node-v

node自带npm，但是不是最新版本的npm，可以输入 npm-v 查看npm版本

3.修改npm本地仓库目录

npm的本地仓库默认安装到了系统c盘的用户目录之下，要将这两个目录移到安装的目录下。

1）在E:\node.js下建立如图所示目录

2）在cmd中运行下述两条命令

npm config set prefix "E:\node.js\node_global"
npm config set cache "E:\node.js\node_cache"

3）在cmd中查看npm的本地仓库

npm list -global

此时目录已经改变为E盘

4）在cmd中配置镜像

npm config set registry=http://registry.npm.taobao.org

可以输入下述命令查看所有配置信息

npm config list

5）检查镜像是否可以执行

在cmd输入下述命令

npm config get registry

npm info vue

4.升级npm

1）在cmd中输入命令 npm install npm -g

安装完成后输入 npm -v 检查版本是否已更新

npm install：安装或更新的命令
npm：模块名字
-g：安装到“E:\node.js\node_global”目录下，

使用 npm list -global 查看global下有什么模块

此时全局目录不为空

2）如果运行npm install报错，则配置一下环境变量（不报错可以忽略该步骤）

在“此电脑”中右击选择“属性”，进去之后左边菜单栏如下图所示

选择“高级系统设置”，显示下图

选择“环境变量”，在环境变量中的“系统变量”新增环境变量

该操作全部确定之后，一定要重启cmd，新配置的环境变量才能生效

5.测试npm

安装Vue.js

在cmd中输入命令 npm install vue -g

在E:\node.js\node_global\node_modules下查看是否有vue文件

6.安装Vue脚手架

在cmd中输入命令 npm install -g @vue/cli

在cmd中输入命令 vue -V 查看vue脚手架版本

注：使用vue命令时提示'Vue'不是内部或外部命令，也不是可运行的程序或批处理文件，是由于vue脚手架版本在自定义的global目录下，不在环境变量path里。

对上述提示，进行环境变量的配置

找到“环境变量”（步骤在4.2中给出）

找到“系统变量”中的Path

双击“Path”，添加E:\node.js\node_global

最后不要加分号

7.测试Vue

切换到E盘（必须是根目录）

根据提示，进入下述命令

cd vue01
npm install -g

初始化，安装依赖 npm run dev

会自动打开浏览器 http://localhost:8080/#/

以上安装已全部完成-------------------------------------------------------------

8.使用vue ui打开页面（可根据需求选择）

个人比较喜欢在VS Code中集成终端中打开页面

在集成终端使用 vue ui，正常情况会自动打开浏览器

以下为特殊情况：

1）提示"在此系统上禁止运行脚本"

解决方法：

在终端输入 get-ExecutionPolicy ，此时执行策略显示 Restricted ，表示此系统上脚本被禁止。

输入 set-ExecutionPolicy RemoteSigned ，设置执行策略为RemoteSigned。

再次执行get-ExecutionPolicy，显示 RemoteSigned ，即可正常使用 vue ui 脚本命令。

---

如果在第二步修改时有如下警告：

根据提示，输入命令 set-ExecutionPolicy -Scope CurrentUser

修改为ExecutionPolicy为 RemoteSigned即可

---

2）输入vue ui无报错， 可视化页面未打开

在终端中输入vue ui，并没有打开可视化页面

vue3.x版本以上才有vue ui这个命令

解决方法：

使用 npm uninstall vue-cli -g 删除已有得vue
使用 npm install -g @vue/cli 重新下载