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 重新下载

猜你喜欢

转载自blog.csdn.net/weixin_45489658/article/details/116223276