如何安装 Vue 3 并配置开发环境

秒速五厘米 2024-03-17 21:05 69阅读 0赞

Vue.js 是一款流行的 JavaScript 前端框架，用于构建交互式的用户界面。Vue 3 是 Vue.js 的最新版本，带来了许多改进和新特性。在本文中，我们将详细介绍如何安装 Vue 3 并配置开发环境，以便您能够快速开始使用 Vue 3 进行开发。

![ff5508cffb355ad5cbd37b836edd7f43.png][]

### 第一部分：安装 Node.js 和 npm ###

在开始安装 Vue 3 之前，我们需要确保已经安装了 Node.js 和 npm（包管理工具）。如果您已经安装了这两个工具，请确保它们的版本符合 Vue 3 的要求。否则，您需要按照以下步骤进行安装：

#### 1.1 下载 Node.js ####

首先，访问 Node.js 官方网站（https://nodejs.org），下载适合您操作系统的 Node.js 安装包。

#### 1.2 安装 Node.js ####

双击下载的安装包，并按照提示进行安装。在安装过程中，您可以接受默认安装选项，也可以根据您的需求进行自定义。

#### 1.3 验证安装结果 ####

安装完成后，打开终端（对于 macOS 和 Linux 用户）或命令提示符（对于 Windows 用户），运行以下命令验证 Node.js 是否成功安装：

node -v
    npm -v

如果显示了 Node.js 和 npm 的版本信息，则说明安装成功。

### 第二部分：创建 Vue 3 项目 ###

现在，我们已经准备好了安装 Vue 3。Vue 3 提供了一个命令行工具（CLI），用于快速创建和管理 Vue 项目。按照以下步骤创建一个新的 Vue 3 项目：

#### 2.1 安装 Vue CLI ####

打开终端（或命令提示符），运行以下命令全局安装 Vue CLI：

npm install -g @vue/cli

#### 2.2 创建项目 ####

创建一个新的 Vue 3 项目非常简单。在终端中，进入您希望创建项目的目录，并运行以下命令：

vue create my-vue-app

请将 `my-vue-app` 替换为您自定义的项目名称。该命令会使用默认配置创建一个新的 Vue 3 项目。

#### 2.3 配置项目 ####

安装完成后，Vue CLI 会自动下载和安装项目所需的依赖项，并为您配置好一个基本的 Vue 3 项目结构。

在项目创建过程中，您可以选择手动配置一些选项，例如选择使用默认的包管理工具（npm 或 Yarn）、选择要添加的功能插件等。

#### 2.4 启动开发服务器 ####

项目创建完成后，进入项目目录：

cd my-vue-app

然后，运行以下命令启动开发服务器：

npm run serve

这将启动一个本地开发服务器，并在浏览器中打开项目的默认页面。您可以通过访问 `http://localhost:8080` 来查看您的 Vue 3 应用程序。

### 第三部分：其他安装方式 ###

除了使用 Vue CLI 创建项目，您还可以通过其他方式安装 Vue 3。以下是两种常见的使用情况：

#### 3.1 使用预编译版本 ####

如果您希望直接使用 Vue 3 的预编译版本而不是使用 Vue CLI 创建项目，可以在 HTML 文件中引入以下脚本：

<script src="https://unpkg.com/vue@next"></script>

这将直接从 unpkg（一个用于提供 CDN 引用的服务）加载 Vue 3，您可以在项目中使用全局的 `Vue` 对象来编写 Vue 3 代码。

#### 3.2 单文件组件 ####

在 Vue 3 中，推荐使用单文件组件（`.vue` 文件）编写 Vue 组件。要使用单文件组件，您需要配置构建工具，例如 webpack，以编译和处理这些文件。您可以参考 Vue 官方文档中关于使用不同构建工具的指南。

### 结语 ###

Vue 3 是一款强大的前端框架，通过详细的安装步骤，您现在应该已经能够成功安装 Vue 3 并配置好开发环境。您可以通过 Vue CLI 快速创建新的 Vue 3 项目，也可以使用预编译版本或单文件组件的方式进行开发。

[ff5508cffb355ad5cbd37b836edd7f43.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/da2665ae97b24f39b590c6168477dcab.png

发表评论取消回复

表情：

评论列表（有 0 条评论，69人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue cli3配置生产环境，开发环境，和测试环境

目录 1、先在package.json文件中添加： 2、在项目目录下建立 .env文件和.env.test文件 3、配置api变量 3.1、配置axios的b

╰半橙微兮°/ 2024年04月07日 11:54/ 0 赞/ 91 阅读

相关如何安装 Vue 3 并配置开发环境

Vue.js 是一款流行的 JavaScript 前端框架，用于构建交互式的用户界面。Vue 3 是 Vue.js 的最新版本，带来了许多改进和新特性。在本文中，我们将详细介绍

秒速五厘米/ 2024年03月17日 21:05/ 0 赞/ 70 阅读

相关如何安装 TypeScript，并配置开发环境以便开始使用

TypeScript 是一种由微软开发的静态类型编程语言，它可以作为 JavaScript 的超集使用，并且可以在编译时进行类型检查。TypeScript 提供了更强大的工具和

悠悠/ 2023年10月13日 21:06/ 0 赞/ 7 阅读

相关 vue3脚手架配置开发环境和生产环境的url

项目目录结构 ![在这里插入图片描述][8fb074864b324c44b109517fd00ea218.png] 在项目根目录下新建.env.developm

末蓝、/ 2023年10月11日 17:46/ 0 赞/ 64 阅读

相关 Vue开发环境安装并集成element-ui示例

此文为转载，原文链接：https://blog.csdn.net/weixin\_44670973/article/details/88871106 在此对原文中部分内容进行

小咪咪/ 2023年08月17日 16:12/ 0 赞/ 107 阅读

相关安装NodeJs并配置迁移vue项目的环境

1.将NodeJs安装到自己选定的文件夹，环境变量中默认会添加至PATH ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_tex

雨点打透心脏的1/2处/ 2023年03月06日 08:17/ 0 赞/ 2 阅读

相关 ubuntu/Deepin安装sublime3并配置python3环境

（一）安装sublime3 terminal中安装sublime3步骤为: 添加sublime text3的仓库 sudo add-apt-reposi

不念不忘少年蓝@/ 2023年02月11日 10:19/ 0 赞/ 12 阅读

相关 Vue环境安装配置

> <table> > <tbody> > <tr> > <td><strong><a href="https://libusi.blog.csdn.net/

柔情只为你懂/ 2022年11月27日 03:25/ 0 赞/ 313 阅读

相关 vue 配置生产环境开发环境

prod API\_ROOT: ‘“生产环境”’ 'use strict' module.exports = { NODE_E

深藏阁楼爱情的钟/ 2022年11月24日 14:26/ 0 赞/ 219 阅读

相关如何安装vue-router并构建开发版

1、安装vue-router C:\Users\Administrator.USER-0GUONPPBHK>npm install vue-router np

曾经终败给现在/ 2022年05月29日 13:21/ 0 赞/ 249 阅读