Vue3.0 CLI - 1 - npm 安装与初始化的入门教程

什么是 Vue CLI

Vue CLI 是一个官方发布的 Vue.js 项目脚手架，提供了快速初始化项目、快速开发等功能，大大提高了前端开发效率。Vue CLI 内置了许多插件和功能，例如代码格式化、组件生成、调试等，同时也允许用户在创建项目时选择需要的插件和功能，定制自己的项目模版。

安装 Node.js 和 npm

使用 Vue CLI 之前，需要安装最新版本的 Node.js 和 npm。在官网 https://nodejs.org/en/ 上下载并安装即可。

安装 Vue CLI

通过 npm 安装 Vue CLI，打开命令行工具，运行以下命令：

npm install -g @vue/cli

创建 Vue 项目

安装完成 Vue CLI 后，可以使用该工具创建新的 Vue 项目。运行以下命令：

vue create my-project

其中，my-project 为你要创建的项目名称。这个命令会自动完成项目初始化，并安装好一些基础类库和插件。

运行 Vue 项目

验证项目创建成功后，可以通过以下命令在本地启动项目：

cd my-project
npm run serve

该命令会在本地启动一个 Web 服务器，你可以通过浏览器地址栏输入 http://localhost:8080 访问你的 Vue 项目。

使用 Vue CLI 插件

Vue CLI 的插件让你可以通过命令行轻松添加各种功能和库到你的项目中。需要先安装插件，然后在项目中使用。例如，添加 Vue Router 插件，运行以下命令：

npm install -g @vue/cli-plugin-router
vue add router

这个命令会自动添加 Vue Router 到你的项目并不需要修改 main.js 文件。

配置 Vue CLI

Vue CLI 可以通过配置文件自定义项目中的构建行为。当在项目根目录下执行 vue inspect > output.js 的时候，在项目目录下运行此命令，将会输出该 Vue 项目的构建配置到 output.js 文件中。

简单示例

这里提供一个简单的示例说明：

创建一个名为 my-project 的 Vue 项目。

vue create my-project

安装 Vuex 插件。

npm install -g @vue/cli-plugin-vuex
vue add vuex

运行项目。

cd my-project
npm run serve

可以看到终端输出：“App running at: http://localhost:8080/”

总结

通过以上步骤，我们成功安装 Vue CLI，并使用其快速创建了一个 Vue 项目，并添加了 Vuex 插件，最后运行了该项目。Vue CLI 的丰富插件和功能可以大大提高我们的开发效率，是前端开发必备的利器。