vue安装步骤（vue安装教程）



1.2 安装开发环境

1.2.1 安装Node.js

（1）打开Node.js官方网站（https://nodejs.org/zh-cn），如图1-2-1-1所示。

图1-2-1-1 Node.js官方网站

（2）点击【下载】导航，进入下载页面，如图1-2-1-2所示。选择操作系统版本和架构完成下载。

图1-2-1-2 Node.js下载页面

（3）打开安装包，双击安装包进入安装界面，如图1-2-1-3所示。

图1-2-1-3 打开安装包

（4）点击【Next】按钮，进入许可协议窗口，点击接受协议，如图1-2-1-4所示。

图1-2-1-4 阅读许可协议

（5）点击【Next】按钮，进入安装位置窗口，如图1-2-1-5所示。

图1-2-1-5 设置安装位置

（6）点击【Next】按钮，进入安装选项设置，如图1-2-1-6所示。

图1-2-1-6 安装选项设置

🚩Node.js默认安装以下五项基本功能：

1.Node.js runtime：安装Node运行环境。

2.corepack manager：Node.js的通用包管理器(the universal package manager for Node.js)，也称为包管理器的管理器，可统一用corepack来管理包。

3.npm package manager：安装npm包管理器(Node Package Manager)。

4.Online documentation shortcuts：在Windows开始菜单中创建链接到Node.js在线文档和官方网站的快捷方式。

5.Add to PATH：添加Windows环境变量。

（7）点击【Next】按钮，选择工具，如图1-2-1-7所示。

图1-2-1-7 选择工具

（8）点击【Next】按钮，进入准备安装界面，如图1-2-1-8所示。点击下图中【Install】按钮开始安装。

图1-2-1-8 开始安装

（9）等待安装完成，出现安装完成的提示界面，点击【Finish】按钮完成安装，如图1-2-1-9所示。

图1-2-1-9 安装完成

（10）验证Node.js安装。打开cmd命令行窗口，在命令行窗口中输入“node -v"，显示Node.js版本信息,在命令行窗口中输入“npm -v”，提示npm的版本信息，出现如图1-2-1-10所示信息，表示安装成功。

图1-2-1-10 验证Node.js安装

1.2.2 安装Visual Studio Code

（1）打开Visual Studio Code官方网站（https://code.visualstudio.com），如图1-2-2-1所示。

图1-2-2-1 Visual Studio Code官网

（2）选择相应的软件版本，完成软件下载，如图1-2-2-2所示。

图1-2-2-2 Visual Studio Code下载界面

（3）打开安装包，双击安装包进入许可协议界面，点击接受协议，如图1-2-2-3所示。

图1-2-2-3 阅读许可协议

（4）点击【下一步(N)>】按钮，进入附加任务窗口，如图1-2-2-4所示。

图1-2-2-4 选择附加任务

（5）点击【下一步(N)>】按钮，进入准备安装窗口，如图1-2-2-5所示。

图1-2-2-5 准备安装

（6）点击【安装(I)】按钮，进行安装，等待安装完成，安装完成如图1-2-2-6所示。

图1-2-2-6 完成安装

1.2.3 调试工具

1.2.3.1浏览器开发者工具

浏览器开发者工具（Browser Developer Tools）是一组内置于现代网络浏览器中的开发工具，帮助开发人员调试和优化网页及Web应用程序，可以通过F12快捷键或在网页中【右击】后选择“检查”打开,以Microsoft Edge浏览器为例，开发者工具打开后，如图1-2-3-1所示。

图1-2-3-1 浏览器开发者工具

浏览器开发者工具主要包括元素（Elements）面板、控制台（Console）面板、源代码（Sources）面板、网络（Network）面板、性能（Performance）面板等，以下是其详细介绍。

（1）元素（Elements）面板

元素（Elements）面板中可以查看和修改HTML结构，对样式进行编辑，并实时预览效果。

查看和修改HTML结构：开发者通过此面板查看和编辑网页的HTML结构，包括元素标签、属性等。

样式编辑器：开发者可以直接编辑元素的CSS样式，快速调整样式效果。

实时预览：开发者编辑HTML或CSS后,可以实时预览所作的更改，无需刷新页面即可看到效果。

（2）控制台（Console）面板

控制台（Console）面板中能够显示错误信息，可以实现命令行交互，并支持格式化输出。

显示错误信息：控制台面板显示网页在加载过程中产生的各类信息，包括错误、警告、调试信息等。

命令行交互：控制台提供了一个类似于命令行的界面，开发者可以直接输入和执行JavaScript代码，进行代码测试、查看变量值等操作。

格式化输出：支持格式化输出，开发者可以自定义日志信息的显示格式。

（3）源代码（Sources）面板

源代码（Sources）面板中能够查看和管理源代码，进行代码调试。

查看和管理源代码：在源代码面板中，可以查看网页的HTML、CSS、JavaScript等源文件，并进行实时编辑。

调试代码：可以设置断点，进行单步执行等操作，帮助开发者深入了解代码的执行流程。

（4）网络（Network）面板

网络（Network）面板中能够监控网络请求，分析请求性能。

监控网络请求：用于监测网页加载过程中的网络请求，包括请求方法、URL、响应状态码等详细信息。

分析请求性能：通过查看请求时间、响应时间等，帮助开发者识别潜在的性能瓶颈，优化网页加载速度。

（5）性能（Performance）面板

性能分析：用于分析网页的性能，包括加载时间、渲染时间等，帮助开发者识别和解决性能问题。

（6）其他功能

移动设备模拟：支持模拟不同的移动设备和屏幕尺寸，帮助开发者进行移动端网页的调试和优化。

响应式设计：可以模拟不同的视口尺寸，帮助开发人员进行响应式网页的调试和优化。

1.2.3.2 Vue Devtools

Vue Devtools是一个专为Vue.js开发者设计的浏览器扩展工具，帮助开发者调试和优化Vue应用程序。Vue Devtools提供了Google Chrome、Firefox、Microsoft Edge、Standalone App类型的插件，此处以Microsoft Edge为例介绍。

（1）访问Vue Devtools官网（https://devtools.vuejs.org），如图1-2-3-2所示。

图1-2-3-2 Vue Devtools官网

（2）点击“Installl now”，进入安装页面，如图1-2-3-3所示。

图1-2-3-3 Vue Devtools下载页面

（3）点击“Install on Edge”进入Vue Devtools的获取页面，如图1-2-3-4所示。

图1-2-3-4 获取Vue Devtools

（4）点击“获取”将Vue Devtools插件添加到Edge浏览器扩展中，如图，如图1-2-3-5所示。

图1-2-3-5 安装完成

💡 注意：

由于Google的官方网站无法在国内访问，只能通过离线安装方式安装扩展，安装时需要打开开发者模式，安装步骤如下。

1.下载支持Google Chrome浏览器的Vue Devtools离线安装包。

2.打开Google Chrome浏览器的扩展程序，将得到的离线安装包拖拽至Google Chrome浏览器的扩展程序。

（5）使用Vue Devtools

安装Vue Devtools之后，浏览器开发者工具中会出现Vue面板，帮助开发者使用Vue Devtools去调试Vue项目，其界面如图1-2-3-6所示.

图1-2-3-6 Vue Devtools界面

🔔 注意：

只有在访问Vue开发项目时才能够打开Vue Devtools工具。

🚩Vue Devtools 的功能面板如下。

1.Components面板：此面板下可以看到定义的组件，选中相应的组件后，右侧面板可以看到组件内的Routing、props、computed、attr等属性。

2.TimeLine面板：此面板用于记录在组件的生命周期钩子中花费的时间、每个组件的渲染和patch过程中花费的时间，有助于判断性能瓶颈。

3.Routes面板：此面板展示所有的路由，是vue-router中routes的可视化展示。

4.Vuex面板：此面板是开发者在调试Vuex状态管理时的一个核心工具，提供了对Vuex状态树的调试能力，帮助开发者理解和跟踪Vuex状态的变化。

创作说明

名称：编程指南-Vue.js 3前端开发从学到用完美实践

版本：2024年

网站：http://www.51xueweb.cn

撰写团队：杜宇飞 侯志强 尤飞祥 段玉昆

指导审核：阮晓龙

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/82431.html