vue安装（Vue安装方法）

编程日记 • 2025-03-27 14:27 • 阅读 19

一、下载和安装Vue

首先下载node

官网下载地址Download | Node.js

根据自己的电脑系统，选择适合自己的版本，推荐LTS，长久稳定版本。

下载好之后，双击下载的安装包。

①点击next

②勾选同意，点next

③建议把目录更换到自己想要安装的目录里面（我这里是提前建好一个目录D:download_software odejs

④默认勾选，直接next

⑤不勾选，直接next

⑥install安装

⑦点击finish完成安装。

⑧同时按win+R,输入cmd,回车，打开终端。

在终端分别输入以下两个命令；

显示以下结果即为安装成功

安装后的完整目录：

在我们的安装目录下，创建名为node_cache和node_global的两个文件夹。

打开终端，执行如下命令，将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录。

为了以后下载包快速，执行如下代码，修改源为淘宝镜像。（我刚开始使用淘宝镜像，显示镜像源有问题，说是需要修复，所以这里再提供一个华为源）

淘宝源

华为源

（二者选其一即可）

查看npm配置修改是否成功

三、配置环境变量
在安装过程中，自动配置了两个环境变量，我们需要增加和修改一下。

1.环境变量—用户变量—选中Path—点编辑-将 C:Users你的用户名AppDataRoaming pm 修改为：你的安装目录 ode_global

2. 环境变量—系统变量—新建

变量名：NODE_PATH

变量值：你的安装目录 ode_global ode_modules

（这里的node_modules目录还没有，之后的步骤执行后就会自动生成这个文件夹。）

3.在系统变量—Path添加上%NODE_PATH%

四、安装vue

（使用管理员身份运行这条命令，以防出现报错）

（如果在这里出现下面的报错，就把镜像源换成华为源）

出现下面即安装成功

2. 安装webpack模板

3.安装webpack-cli

4. 安装脚手架vue-cli

输入vue --version，能输出版本号即成功安装

5. 安装vue-router

安装好之后打开node_modules文件夹，可以看到安装的模块都统一在这里

五、运行第一个的 vue-cli应用程序

1.创建项目（最好自定义一个项目目录）可能会出现权限问题，所以还是以管理员运行cmd窗口。

2.创建一个基于webpack模板的vue应用程序

根据自己的需求来操作。

项目名是？回车
项目描述？回车
作者？回车
是否安装编译器回车
是否安装vue-router y 回车
是否使用ESLint做代码检查 n 回车
是否安装单元测试工具 n 回车
单元测试相关 n 回车
创建完成后直接初始化 n 回车

（具体可参考上面的图片）

创建好之后如下

接着按照代码提示手动初始化

运行之后如下

复制访问网址：http://localhost:8080

成功！

停止服务

两下Ctrl+C 或者Ctrl+C一下然后Y

vue安装（Vue安装方法）

二、创建全局安装目录和缓存日志目录

四、安装vue

五、运行第一个的 vue-cli应用程序

停止服务

相关推荐