2025年vue3怎么安装（vue3安装及环境配置）

科技前沿 • 2025-05-04 15:24 • 阅读 34

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg>

讯享网

版本 :
版本 :
系统 :
:

首先，我们需要安装Node.Js。Node.js提供了运行 JavaScript 代码的环境。并且Node.js 带来了 npm，它是JavaScript世界的包管理工具。开发vue时，可以使用 npm 来安装、管理和共享各种依赖。

安装Node.js时，npm会作为默认包管理工具一同安装。

打开命令行，运行如下代码，创建一个新的vue项目

讯享网

会有一些可选项，这里我们可以选择使用TypeScript

新建完成后，进入项目根目录

讯享网

安装项目所需依赖

运行项目

讯享网

这里时候，我们可以看到这个URL

在这里插入图片描述
讯享网

复制这个URL到浏览器，可以看到如下画面，说明项目启动成功了

在这里插入图片描述

4.1 安装VSCode

下载地址 : https://code.visualstudio.com/

4.2 安装插件

这是个官方的vue插件，支持语法高亮、代码提示、代码模板等功能

在这里插入图片描述

4.3 修改为IntelliJ的快捷键

具体看这篇文章 : visual studio code-webstorm的快捷键映射_webstorm按钮映射应该选什么-CSDN博客

pkWTSeS.md.png

Chrome浏览器下载地址 : https://www.google.cn/intl/zh-CN/chrome/

5.1 Chrome安装Vue插件

进入这个网站 : 极速插件 : 安装Chrome插件，下载插件，并解压。
进入页面，开启开发者模式。
将解压后的插件拖入页面，安装完成。

具体详见这篇文章 : 下载、编译、安装、使用 vue-devtools

vue.js devtools插件的作用
安装完成后，就可以在Chrome的开发者工具里看到这一项了。
可以用来看应用程序中所有组件的层级关系和状态，以及还有很多方便开发调试的功能。

在这里插入图片描述

5.2 chrome 移动端页面调试

在Chrome中，点击F12，进入如下页面，通过点击Toggle device toolbar，切换至移动Web调试模式。

在这里插入图片描述
具体详见 : chrome 移动Web H5 调试

2025年vue3怎么安装（vue3安装及环境配置）

4.1 安装VSCode

4.2 安装插件

4.3 修改为IntelliJ的快捷键

5.1 Chrome安装Vue插件

5.2 chrome 移动端页面调试

相关推荐