超级详细的Vue安装与配置教程

最新推荐文章于 2025-11-26 12:11:44 发布
原创 最新推荐文章于 2025-11-26 12:11:44 发布 · 3.2w 阅读 · 422 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #node #npm #webpack #前端

本文详细介绍了Vue的安装与配置教程。先下载安装Node.js，创建全局安装和缓存日志目录，配置环境变量。接着安装vue.js、webpack模板、vue-cli脚手架和vue-router。最后创建了第一个vue-cli应用程序，包括项目创建、参数设置及手动初始化等步骤。
该文章已生成可运行项目，

Vue web前端三大主流框架之一,是一套用于构建用户界面的渐进式框架,下面这篇文章主要给大家介绍了关于Vue安装与配置教程的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下

−

目录

一、下载和安装Vue

官网下载地址Download | Node.js

选择适合自己的版本，推荐LTS，长久稳定版本。 我这里选择的是Windows Installer(.msi) 64-bit

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

点next

勾选I accept............，点next 

这里建议更改为自己想要的的安装目录，然后点next（可以自己先建好安装目录，我这里是提前建好的一个目录：E:\Java\nodejs）

这里有五个选项，有时间可以看一下，就是安装的时候会安装一些组件和npm，同时会添加环境变量，右侧有说明。我们直接点next

这里不用勾选，直接点next

install

 finish

安装完成后，检查一下是否安装成功。

打开cmd，输入如下指令。 

1

node -v

1

npm -v

输出了版本号就说明安装成功了。

安装后的完整目录：

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

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

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

npm config set prefix "你的安装目录\node_global"

npm config set cache "你的安装目录\node_cache"

为了以后下载包快速，修改源为淘宝镜像。（这里修改了，我们就不需要安装cnpm了，因为cnpm就是Node.js淘宝镜像加速器，这里配置了就不需要安装了）

1

npm config set registry https://registry.npm.taobao.org

查看npm配置修改是否成功

1

npm config list

同时我们会发现多了个文件：C:\Users\用户名\下的.npmrc文件，可以理解为一个记录当前用户修改信息的配置文件。如果你把这个文件删了，那你刚刚修改的那些参数全没有了，回归默认配置。

三、配置环境变量

在安装过程中，自动配置了两个环境变量一个是环境变量---用户变量---Path里面的C:\Users\你的用户名\AppData\Roaming\npm另一个是环境变量---系统变量---Path里面的软件安装目录，我们需要增加和修改一下。

 1. 环境变量---用户变量---选中Path---点编辑

 将 C:\Users\你的用户名\AppData\Roaming\npm 修改为 你的安装目录\node_global

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

变量名：NODE_PATH

变量值：你的安装目录\node_global\node_modules

注：这里的node_modules目录是还没有的，但是我们等会把模块安装到全局目录下就会自动生成这个文件夹。

记得在系统变量---Path添加上%NODE_PATH% 

 三、安装vue

1. 安装vue.js

1

npm install vue -g

其中-g是全局安装，指安装到global全局目录去，如果不加-g，模块就会安装到当前路径下的node_modules文件夹下，没有目录则自动创建。

如果出现了这个问题，是因为当前用户没有这个权限。

网上有些方法是删除C:\Users\用户名\下的.npmrc文件，万万不可这样，因为那个文件删除了，我们前面修改的全局模块目录和缓存目录配置就没了！！！到时候vue包就下载到C:\Users\你的用户名\AppData\Roaming\npm去了，也就是默认的地方去了，那我们前面修改就没意义了。

正确的打开方式是，用管理员身份运行呗！

Win + s 搜索 “命令提示符”，右键以管理员身份运行。

1

npm install vue -g

2. 安装webpack模板

1

npm install webpack -g

此外，在webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，所以还需要安装webpack-cli

1

npm install webpack-cli -g

输入 webpack -v，能输出版本号就说明都安装好了。

3. 安装脚手架vue-cli

1

npm install vue-cli -g

输入vue --version，能输出版本号就说明安装好了。

4. 安装vue-router

1

npm install vue-router -g

都弄好了我们打开我们自定义的全局模块目录下的node_modules文件夹，会发现安装的模块都统一在这里。

四、我的第一个的 vue-cli应用程序

1. 创建项目（最好在cd到D盘、E盘的某个位置，即项目的路径，否则项目会新建在C:\Users\用户名\，也可以直接在想要的项目路径下输入cmd）可能会出现权限问题，所以我们还是以管理员运行cmd窗口。

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

1

vue init webpack 项目名

根据自己的需求来操作。

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

因为没有自动初始化，我们按照代码提示手动初始化

1

cd myvue

1

npm run dev

 访问网址：成功！

本文章已经生成可运行项目
花小疯
关注
VUE安装及环境配置（完整版）
qq_52611686的博客
09-30 3万+
VUE是一套用于构建用户界面的渐进式JavaScript框架。渐进式：主张最少（没有强主张），可以在原有的大系统中，把一两个组件改用它实现。渐进式框架也就是说：你可以只用我的一部分，而不是用了我的一部分就必须用我的全部。特点：1.采用组件化模式，提高代码复用率、且更好维护；2.采用声明式编码，让编码人员无需操作DOM，提高开发效率。3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
Vue开发工具vuejs-devtools超级详细安装教程以及常见问题解决
bsefef的博客
03-09 580
这绝对是最详细的Vue开发工具vuejs-devtools安装教程，相信你只需要5分钟即可解决所有问题 所需的所有文件，链接：https://pan.baidu.com/s/19GWDS_7GodIdFBUO0eTDAg 提取码：2yvc 一、vue.js插件下载 下载地址：vue.js插件下载； 点击进入Vue官网即可下载，共有两种版本的插件（开发版本：vue.js，生产版本：vue.main.js），建议使用开发版本。开发版本有更多的错误信息提示和调试，文件较大，生产办文件小但是很多提示不全，解决开发
Vue安装与配置教程（非常详细）
热门推荐
fairy_radiance的博客
10-13 2万+
Vue安装与配置教程（非常详细）
vue-01环境配置
最新发布
weixin_39900427的博客
11-26 976
Vue.js是一个基于MVVM架构的JavaScript框架，用于构建用户界面。它采用组件化开发模式，支持单页面应用(SPA)开发。本文详细介绍了Vue.js的安装与项目创建流程：首先安装Node.js和npm，配置国内镜像源；然后通过yarn创建vite项目，包括项目初始化、依赖安装和运行；最后介绍了VSCode开发环境配置及常见问题解决方法。整个流程涵盖了从环境搭建到项目运行的完整步骤，为Vue.js初学者提供了清晰的入门指南。
Vue 安装与配置
wuliyouMaozhi的博客
07-06 6924
Vue 安装与配置
Vue安装及环境配置教程(超详细图文教程)
java骨灰级码农，10年IT从业经验
05-18 1万+
将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录。到这里，Vue安装及环境配置就已经全部完成，如有不会，欢迎骚扰！先把路径改到刚刚创建的项目，然后再运行，语句如下。输出了版本号就说明Node.js已经安装成功。变量值：你的安装目录\node_modules。可以选择创建Vue2版本或者Vue3版本的项目。（注意中间有个空格）验证是否安装成功。创建vue项目，选择项目想要放的位置。系统变量中新增一个变量，如下👇。一直Next即可完成安装。打开cmd窗口，执行如下命令。安装webpack模板。
Vue的安装与配置
快乐修勾的博客
08-04 445
vue的安装与配置
一份超级详细的Vue-cli3.0使用教程【推荐】
12-04
以下是对 Vue-cli 3.0 的详细解释： 1. **零配置启动/打包 .vue 文件**： Vue-cli 3.0 提供了一个简单的命令行工具，允许开发者通过 `vue serve` 命令快速启动一个开发服务器，并且通过 `vue build` 命令打包项目...
超级简单的Vue使用typescript教程
05-02
### 超级简单的Vue使用TypeScript教程 #### 一、环境准备 为了开始学习如何在Vue项目中集成TypeScript，我们首先需要确保本地开发环境中已经安装了Node.js和npm（或者yarn）。这两个工具是现代前端开发的基础，...
Vue.js超级购物中心项目搭建与配置教程
总结来说，这个文件描述了一个基于Vue.js框架构建的前端项目，涉及到了项目安装、开发环境配置、热重装、编译和构建等一系列开发和部署的关键环节。开发者在进行项目开发前，需要了解和掌握这些知识点，以便于能够...
Vue安装与配置教程（非常详细）从零基础入门到精通，看完这一篇就够了_vue配置
2401_84254474的博客
04-12 8780
同时我们会发现多了个文件：C:\Users\用户名\下的.npmrc文件，可以理解为一个记录当前用户修改信息的配置文件。如果你把这个文件删了，那你刚刚修改的那些参数全没有了，回归默认配置。在安装过程中，自动配置了两个环境变量一个是环境变量—用户变量—Path里面的C:\Users\你的用户名\AppData\Roaming\npm另一个是环境变量—系统变量—Path里面的软件安装目录，我们需要增加和修改一下。将 C:\Users\你的用户名\AppData\Roaming\npm 修改为 你的安装目录\no
vue安装与配置
xiaocai5731的博客
09-04 567
一、安装Node.js 1、Node.js 安装包及源码下载地址：https://nodejs.org/en/download/ 2、配置系统环境变量PATH，添加Node.js的地址。 3、验证安装成功 C:\Users\admin>node -v C:\Users\admin>node --version 二、安装cnpm 1、配置淘宝镜像： C:\Users\admin>npm config set registry https://registry.npm.taobao.org 2
Vue快速入门安装与配置（最新版、超详细、图文结合）
m0_74732859的博客
07-13 3308
关于Vue最新版的安装就总结到这里了，如果小伙伴们安装过程中出现了什么问题，欢迎大家在评论区留言，我会及时回答大家的问题的。长路漫漫，编程之路渐行渐远，相信不少小伙伴对未来计算机发展道路还很迷茫，计算机的就业道路很广泛，未来可以细分很多专业：同时在当下人工智能、互联网快速发展的时代，我们计算机专业的就业方向也非常广泛，包括技术类、产品类、物计算机专业的就业方向非常广，联网、金融、游戏等领域。
vue的安装和配置
俗人
06-01 878
下载nodejs包，地址如下：            https://nodejs.org/en/download/    解压后，在bin文件夹中已经存在node以及npm，如进入到对应文件的中执行命令行能打印node版本号          cd node-v0.10.28-linux-x64/bin        ls        ./node -v   node文件夹具体放在哪，叫什么名...
Vue（Node.js与npm）的安装与配置
weixin_46010276的博客
03-29 2166
Vue 是一个用于构建用户界面的 渐进式 JavaScript 框架，由尤雨溪（Evan You）创建。它专注于视图层，易于集成到现有项目中，同时也能构建复杂的单页应用（SPA）。4. 通过命令行配置的信息会在用户目录下的.npmrc文件存储，删除里面的配置信息或者删除文件就会恢复到默认设置。轻量灵活：核心库仅关注视图层，可逐步引入其他工具（如 Vue Router、Vuex/Pinia）。4. 安装Vue脚手架（Remark：warn信息不影响使用，无需处理）组件化开发：将页面拆分为可复用的组件。
Vue的安装及使用快速入门
weixin_30645617的博客
04-19 375
一、安装vue 1、安装node.js，安装完node.js之后，npm也会自动安装 查询是否安装成功的命令： node -v npm -v 2、全局安装脚手架工具vue-cli，命令如下： npm install --global vue-cli 3、vue项目初始化命令如下，若没有安装webpack，则先安装webpack npm install -g webpack ...
安装VUE教程
小米粒的博客
07-10 774
https://www.cnblogs.com/laizhouzhou/p/8027908.html 这一可以 推荐一批
vue安装配置
W_SSNY的博客
03-12 403
一、先安装node.js 安装教程：https://jingyan.baidu.com/article/64d05a021974acde54f73b70.html 环境配置：https://blog.youkuaiyun.com/u012830533/article/details/79986984 二、搭建vue环境 在cmd中：开始->运行->cmd 1.npm install...
安装vue环境
05-16
### 安装 Vue 环境并配置开发依赖 #### 前置条件 在开始安装 Vue 环境之前，需要确保已安装以下工具： - **Node.js**: Vue CLI 和其他依赖项的运行需要 Node.js 提供支持。推荐安装 LTS 版本[^1]。 - **Visual Studio Code (VSCode)** 或其他代码编辑器：用于编写和管理项目文件[^2]。 - **Git**: 方便进行版本控制和协作开发[^2]。 #### 安装 Vue CLI 工具 Vue CLI 是官方提供的脚手架工具，可以帮助快速搭建 Vue 项目。如果尚未安装 Vue CLI，可以通过以下命令全局安装最新版： ```bash npm install -g @vue/cli ``` 验证安装是否成功，可运行以下命令查看当前版本： ```bash vue --version ``` 如果提示 `vue` 命令不存在，可能是之前的安装出现问题，可以尝试卸载后再重新安装： ```bash npm uninstall -g @vue/cli npm install -g @vue/cli ``` 此过程有助于解决潜在路径或权限问题[^3]。 #### 创建新项目 使用 Vue CLI 初始化一个新的 Vue 项目，执行以下命令： ```bash vue create my-vue-project ``` 在此过程中，可以选择默认预设或手动选择特性（如 Babel、Router、Vuex 等）。完成后进入项目目录： ```bash cd my-vue-project ``` #### 启动开发服务器 在项目根目录下运行以下命令以启动本地开发服务器： ```bash npm run serve ``` 默认情况下，开发服务器会在 `http://localhost:8080/` 上运行。如果有端口占用或其他需求，可通过修改 `package.json` 文件中的 `scripts` 部分来指定不同的模式或端口[^4]。 例如，在生产环境下运行时，可以添加自定义模式： ```json "scripts": { "dev": "vue-cli-service serve --mode development", "build": "vue-cli-service build" } ``` #### 环境变量配置 为了更好地管理和切换不同环境下的 API 请求地址，可以在 `.env`, `.env.development`, `.env.production` 文件中分别定义对应的环境变量。例如： ```plaintext # .env.development VUE_APP_BASE_URL=http://api.dev.example.com # .env.production VUE_APP_BASE_URL=http://api.prod.example.com ``` 这些变量可以通过 `process.env.VUE_APP_BASE_URL` 访问。 --- ####
评论 17
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值