VUE安装操作手册

1.卸载已有的Node.js

下载正确版本的Node.js

1. 下载网址：

https://mirrors.tuna.tsinghua.edu.cn/nodejs-release/v16.14.2/node-v16.14.2-x64.msi

1. 双击刚刚下载好的安装文件，开始安装，会进入欢迎界面

 

 

1. 需要同意相关的协议

 

1. 安装位置推荐使用默认的安装位置

1. 此处的设置无需更改

 

 

1. 点击install开始安装即可

 

1. 安装完成会进入到此界面

 

1. 重新打开一个命令窗口

 

1. 此安装包会自动配置环境变量，安装完成后，可检查npm命令是否可用

输入 npm -v 命令，检查npm是否可用，注意v是小写的

如果显示版本就是OK的，这里如果是8.5.0版本也是正确的！

 

配置npm源

npm(Node Package Manager)是 Node.js 的默认包管理和依赖管理工具

它允许用户轻松地安装、更新和管理 Node.js 应用程序所需的模块（也称为“包”）

1. 确认npm命令可用后，就可以配置npm源

   1. nmp源（即npm仓库，称之为：registry）默认是境外服务器

   2. 在国外访问速度较慢，通常在初次使用时，应该将npm源更换为国内的服务器地址

   3. 例如使用 https://registry.npmmirror.com作为npm源

使用命令：npm config set registry https://registry.npmmirror.com

1. 配置后可以使用get命令查看npm源

     npm config get registry

     注意：这个命令只能获取到你配置的源，无法检查是否正确！请认真检查url

 

安装VUE CLI

1. 配置好npm源后，就可以安装VUE CLI(VUE脚手架)了,此过程将从仓库服务器中下载VUE Cli，通常耗时30秒至5分钟左右。

命令： npm install -g @vue/cli

只要安装显示的文字中没有出现ERROR就可以，警告(提示更新npm版本或提示某些软件版本偏旧等)都可忽略

注意：无论你使用哪种操作系统，必须保证当前登录的用户具有最高访问权限，例如，在Windows操作系统中，请使用管理员模式的命令提示符，并且，不要使用Power Shell，在Mac OS中，请使用 sudo来执行以上命令。

 

 

1. 安装完毕后，可以验证一下，命令： vue -V 注意：这里的V是大写的！

可以看到当前的VUE Cli：@vue/cli 5.0.8

 

准备好上面的环境后，我们就可以动手创建工程了！

我们先来练习一下在Windows Shell中创建工程

注意：必须是管理员身份，最高权限！

6 创建VUE CLI工程

通常用vue命令来创建VUE CLI工程，并且会将工程创建在执行命令时的位置，所以，可以先进入准备存放项目的文件夹再创建项目

1. 建议切换到其他盘，不要在系统盘里存放项目，命令： d:

2. 在对应的盘下创建一个文件夹，当做VUE项目的工作空间，命令： mkdir Vue-Workspace

3. 进入到刚刚创建好的文件夹，命令： cd Vue-Workspace

4. 创建VUE项目，格式：vue create 项目名，命令： vue create vue-project-01

5. 下面即将进入创建项目时的各项选项配置，一定要慢，不要连续敲回车，会自动选择下一个选项的默认项！按图示步骤操作即可：

6. 按上下键移动

7. 空格键选中 再按一次取消选中

8. 回车键进入下一项配置,一定要慢!!!不要连续敲回车!!!

• 

 

2 在IDEA中创建VUE工程

1 IDEA创建-启动-停止VUE工程步骤

在IDEA中打开下方的Terminal工具,输入命令首先输入 npm 命令,

如图所示,如果提示"不是可运行的程序或批处理文件",需要重启IDEA

 

创建v1项目

进入到v1文件夹下,并启动项目

 npm run serve命令启动工程的服务时，会变异打包此工程，当提示如下消息时，表示工程已成功启动：