Vue CLI 3 安装介绍

LVKUU • 2025-01-20 14:11 • 编程

Vue CLI 3 是一个实现自动化的 Vue.js 项目工具，它为 Vue.js 开发提供了丰富有用的功能，可以快速初始化项目或者配置各种插件等功能。Vue CLI 3 使用了 webpack 4 构建解决方案，通过脚手架，我们可以快速搭建一个基于 Vue.js 的完整的开发环境。在本文中，我们将从以下几个方面对 `vue-cli-service` 安装进行详细介绍。

一、前置条件

使用 `vue-cli-service` 前，你必须先安装 Node.js 和 npm 或者 yarn。

在终端中输入以下命令检查你是否已经安装了 Node.js 和 npm 或 yarn：

node -v  // 检测 Node.js 版本
npm -v   // 检测 npm 版本
yarn -v  // 检测 yarn 版本

如果你还没有安装 Node.js 或 npm 或 yarn，请先从官网下载并安装。

二、安装 Vue CLI 3

默认情况下，Vue CLI 3 使用 npm 进行安装。你可以在终端中使用以下命令进行全局安装：

npm install -g @vue/cli

也可以使用 yarn 进行全局安装：

yarn global add @vue/cli

安装完成后，在命令行中输入 `vue –version` 检查是否安装成功。如果有对应的版本号显示，说明安装成功。

如果你需要升级脚手架的版本，请使用以下命令：

npm install -g @vue/cli-service-global

三、创建项目

安装完成后，你可以通过以下命令（其中 `my-project` 是项目名称）来创建一个新的 Vue 项目：

vue create my-project

在执行上述命令后，Vue CLI 3 会在当前目录创建一个名为 `my-project` 的新项目。紧接着，会提示你选择项目特性。选择适当的特性后，你就可以使用 `cd my-project` 进入到项目目录并启动开发服务器了。

四、Vue UI

Vue CLI 3 中提供了图形化的界面——Vue UI。它支持创建、管理和构建 Vue 项目。你可以通过以下命令启动它：

vue ui

在浏览器中打开 `http://localhost:8000`，你将看到操作界面。在这里，你可以通过 UI 界面创建、管理、构建项目，还可以查看项目依赖、插件、配置等相关信息。

五、插件的安装/卸载

Vue CLI 3 允许你在项目中灵活地添加和移除插件，而无需手动修改配置文件。你可以使用以下命令来安装和卸载插件：

vue add plugin-name // 安装插件
vue invoke plugin-name // 安装插件（官方弃用 add 命令后推出）
vue remove plugin-name // 卸载插件

例如，通过以下命令来安装 `vue-router` 和 `vuex`：

vue add router
vue add vuex

以上就是对于 `vue-cli-service` 安装介绍的详细内容。根据你的需求，你可以进行安装和卸载插件、使用 Vue UI 界面、创建项目等操作，为你的 Vue.js 项目提供更便利的开发环境。

原创文章，作者：LVKUU，如若转载，请注明出处：https://www.506064.com/n/331649.html