Vue的安装与配置（超详细）

-1
原创 已于 2025-08-27 16:24:08 修改 · 639 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

于 2025-08-12 13:47:39 首次发布

Vue的安装与配置（超详细）

Vue.js：现代前端开发的渐进式框架

什么是Vue.js？

Vue.js（通常简称为Vue）是一个用于构建用户界面的渐进式JavaScript框架。由前谷歌工程师尤雨溪于2014年创建，Vue以其简洁的API、灵活的架构和出色的性能迅速成为最受欢迎的前端框架之一。

核心设计理念

  • ✅ 渐进式架构：可以从小型功能逐步扩展到完整SPA
  • ✅ 声明式渲染：通过模板语法将数据声明式地渲染到DOM
  • ✅ 组件化开发：将UI拆分为独立可复用的组件
  • ✅ 轻量高效：核心库专注视图层，可与其他库灵活集成

第一步下载Node.js

Node.js官网下载

Node.js官网: https://nodejs.cn/download/

选择windows安装包
在这里插入图片描述

  • 之后进入下载好的安装包

在这里插入图片描述

  • 点击next

在这里插入图片描述

  • 这里简易换成C盘之外的任何一个盘

在这里插入图片描述

  • 后面的可以不用改，直接next就行

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 最终install，finish就表示安装好了

在这里插入图片描述

  • 这里我还弹出来了一个窗口

在这里插入图片描述

接下来验证是否安装成功

       首先Win+R，打开cmd

       输入两个指令

node -v
npm -v

有版本号就说明安装成功了

在这里插入图片描述

创建一个新的Vue项目

首先新建一个文件夹，然后进入这个新的文件夹建议路径里面不要包含中文名
在这里插入图片描述

把文件夹里面的这个地方改成cmd点回车

在这里插入图片描述

可以看到这已经进入了我们的文件夹了

在这里插入图片描述

Vue的基本命令（创建项目）

输入这行命令并回车

npm init vue@latest

在这里插入图片描述
这里名字随意起
在这里插入图片描述

连续点击回车键即可

在这里插入图片描述

之后将这三条命令依次输入即可（此处cd你的项目名字，跟我的不一定要相同）

 cd vue-project
 npm install
 npm run dev

在这里插入图片描述
在这里插入图片描述

这时访问Local给出的网址就可以了
在这里插入图片描述

终止操作

Ctrl+C就可以终止操作

在这里插入图片描述

在VScode里面打开项目以及安装插件

在这里插入图片描述
打开项目文件夹vue-project
在这里插入图片描述
在这里插入图片描述

  • 在插件里面搜索vue并安装Vue（Official）

在这里插入图片描述
这里修改一下代码（加一行进去对比一下）

<h3>Welcome to Vue 3!</h3>

在这里插入图片描述

再次运行项目

在这里插入图片描述
此处运行成功
在这里插入图片描述

到此你可以开始你的Vue的旅程了

Vue--》超详细教程——vue-cli脚手架的搭建与使用
ztK63LrD的博客
11-14 5294
它简化了程序员基于webpack创建工程化的Vue项目的工程。其好处就是简省了程序员花费时间去配置webpack，从而目标只需专注在撰写项目应用上。，基于vue-cli这个系统，我们就可以快速搭建好“（英文名：Singleagepplication）简称SPA，顾名思义指的是，所有的功能与交互都在这唯一的一个页面内完成。
windows下Vue安装教程（超级详细，一些细节坑）
不是老哥的博客
04-26 2940
Vue安装教程（超级详细，一些细节坑） 1、安装Node.js 注意如果你是linux安装的话，需要安装python2.6或者2.7版本的，不建议安装python3.0以上的。 2、 2. 3. 4. 5、 6. 7、 8、下面看path环境变量中是否配置了Node.js,在cmd中输入path（因为之前我安装在D盘了，所以我从D盘里面找的） 9，这里已经进行了一半啦 下面安装windows二进制文件（.exe）的安装，注意还是这个页面Node.js点击windows binary 10.
使用 VScode 进行 Vue 开发 - 插件安装
法国锄头雨
01-31 518
0.Vetur — Vue多功能集成插件 1.Auto Close Tag — 自动闭合HTML/XML标签 2.Auto Rename Tag — 自动完成另一侧标签的同步修改 3.HTML CSS Support — 智能提示CSS类名以及id 4.HTML Snippets — 智能提示HTML标签，以及标签含义 5.JavaScript(ES6) code snippets — ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支
Vue安装，环境配置 创建Vue项目
weixin_74158859的博客
09-03 3958
【用户变量】下的【Path】将默认的 C 盘下 APPData/Roaming\npm 修改为【node_global】的路径和【node_cache】的路径，这是nodejs默认的模块调用路径。1.找到刚刚安装的目录，在安装目录下新建两个文件夹【node_global】和【node_cache】分别作为默认安装目录和缓存日志目录。3.在【系统变量】中选择【Path】点击【编辑】后点击新建【%NODE_PATH%】，随后一直点击【确定】直到关闭所有窗口即可。
手把手教你Vue安装及环境配置，小白也能轻松上手
最新发布
大雨的博客
06-24 2122
在这个过程中，我们了解到 Vue.js 是一款强大且灵活的 JavaScript 框架，Node.js 和 npm 是搭建 Vue 开发环境的重要基础，Vue CLI 和 webpack 则在项目创建、配置和打包过程中发挥着关键作用。虽然安装和配置过程中可能会遇到一些问题，但只要掌握了正确的解决方法，就能顺利解决。这只是 Vue 开发的开端，Vue 的世界丰富多彩，还有很多知识等待你去探索。接下来，你可以深入学习 Vue 的组件化开发，了解如何创建可复用的组件，提高开发效率；
安装Vue 及 创建一个Vue 项目，在hbuiderx中打开项目
萍踪缘的博客
07-12 7573
创建一个Vue项目 1. 准备工作 首先要先安装node 及 npm 详情见 【http://www.cnblogs.com/ylboke/p/8342116.html 】及【http://www.cnblogs.com/ylboke/p/8342185.html 】 安装Git(可先不安装)（Git是一个分布式版本控制系统）详情见（关于git使用 在之后会记录）【http://www.c...
Vue快速入门安装与配置（最新版、超详细、图文结合）
m0_74732859的博客
07-13 2968
关于Vue最新版的安装就总结到这里了，如果小伙伴们安装过程中出现了什么问题，欢迎大家在评论区留言，我会及时回答大家的问题的。长路漫漫，编程之路渐行渐远，相信不少小伙伴对未来计算机发展道路还很迷茫，计算机的就业道路很广泛，未来可以细分很多专业：同时在当下人工智能、互联网快速发展的时代，我们计算机专业的就业方向也非常广泛，包括技术类、产品类、物计算机专业的就业方向非常广，联网、金融、游戏等领域。
从零搭建Vue项目
你看又起风了的博客
04-28 1427
搭建Vue项目 一、安装 node 环境 1、下载地址为：Node.js 2、检查是否安装成功：如果输出版本号，说明安装node 环境成功 3、淘宝镜像：npmmirror 中国镜像站 执行 npm install -g cnpm –registry=https://registry.npm.taobao.org，安装npm镜像，检查是否安装成功 4、补充 ...
vue安装及配置并创建项目
Jasper的博客
02-17 1114
vue简单入门，vue安装及配置，vue初学者创建项目，vue插件使用，axios，echarts，vue下载，作者大学课程边学边参考其他博主教程，总结归纳所得，更加详细且逻辑更为清楚，亲自验证通过，请保护原创，谢谢
vue.config.js完整配置-超详细
05-26
在 Vue 项目中，`vue.config.js` 文件是一个可选的配置文件，它允许开发者自定义项目的各种设置，以满足特定需求。这个文件通常位于项目的根目录下，如果使用了 `@vue/cli` 创建的项目，那么在初始化时该文件可能不...
vue的安装和基本配置
qiuzi_1111的博客
12-29 2263
本博文将介绍 Vue.is 有关的一些概念和技术，并帮助读者了解它们背后的工作原理，同时构建第一个 Vue.is 应用。1.vue的安装和基本配置。
VS Code创建VUE项目（一）工具安装与项目创建
shuang的博客
10-14 3914
安装Node.js或下载后一步步安装就好（安装过程基本一路直接“”就可以了，直到Finished），我之前已经安装了，详细步骤大家可以百度npm安装或Node.js安装（Node.js会自动安装npm。
vue项目安装
weixin_52921550的博客
11-26 669
vue项目安装 vue是当前最火的前端技术之一，本文将介绍怎么利用vue-cli工具快速搭建一个vue项目，适用于大部分前端架构，详细的操作步骤如下。 一:node.js安装 1.首先打开node.js官网https://nodejs.org/en/download/ 在node.js官网下载安装包 根据自己的电脑配置进行选择,例:我的电脑是Windows 64位系统,那么就选择相对应的版本 2.安装完成后会在文件夹显示 3.在电脑上使用winwods+r可以查看是否下载成功 windows+r打开cm
Vue的安装使用与注意事项
TBSGRer5617的博客
12-17 832
【代码】Vue的安装使用与注意事项。
Vue 组件安装
积水成渊
03-29 339
Vue 组件安装 1.安装vue-resource cnpm i vue-resource npm i vux -S # 简写： :src <--- v-bind @click <---v-on 1、安装vuex npm install vuex --save-dev 2、在项目里面安装vux npm install vux --save 3、安装vux-loader...
安装vue项目
技术分享
05-16 178
参考教程 一些基础的命令 windows： npm run dev //运行项目 npm run build //打包项目 安装前的准备工作安装好 一，npm；二，vue-li ESlint：创建的项目选择是否使用ESlint规则， ESLint 是一个ECMAScript/JavaScript 语法规则和代码风格的检查工具，它的目标是保证代码的一致性和避免错误。...
超级详细的Vue安装与配置教程
热门推荐
dd2016124的博客
10-26 3万+
vue安装，npm，node的安装与配置
创建Vue项目详细教程 (引入Element-plus 和 ArcoDesign)
qq_20770569的博客
06-29 1749
Vue.js（通常简称为Vue）是一个开源的渐进式JavaScript框架，用于构建用户界面。它由尤雨溪（Evan You）在2014年创建并维护至今。Vue的核心库专注于视图层，易于学习且集成到现有项目中，同时也能够为复杂的单页应用程序（SPA）提供强大的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值