Vue3 CLI 是什么？怎么用？

在前端开发领域，Vue3 CLI 是一个备受关注的工具，那 Vue3 CLI 究竟是什么呢？它是 Vue.js 官方提供的一个脚手架工具。

Vue3 CLI 的功能

它的主要功能是帮助开发者快速搭建 Vue3 项目的基础架构，想象一下，当你要开始一个新的 Vue3 项目时，手动去配置各种文件、安装依赖等是很繁琐的，而 Vue3 CLI 可以一键生成包含标准目录结构、基本配置的项目模板，让开发者能更专注于业务逻辑的开发，比如它会自动配置好 webpack 等构建工具的相关设置，处理好代码的打包、编译等流程。

Vue3 CLI 的安装

要使用 Vue3 CLI，首先得安装它，在命令行中输入 `npm install -g @vue/cli` （前提是你已经安装了 Node.js 和 npm），等待安装完成，安装好后，你可以通过 `vue --version` 命令来检查是否安装成功。

创建项目

（一）创建基本项目

安装好 Vue3 CLI 后，就可以创建项目了，使用命令 `vue create 项目名称` ，然后会进入一个交互界面，让你选择项目的配置，比如选择默认配置还是手动配置，如果是新手，默认配置（Default ([Vue 3])）是个不错的选择，它会快速生成一个包含基本功能的 Vue3 项目。

（二）手动配置项目

如果选择手动配置（Manually select features），那就可以更精细地选择项目所需的功能，比如可以选择是否使用路由（Router）、状态管理（Vuex）、CSS 预处理器（如 Sass、Less 等）、单元测试（Unit Testing）、端到端测试（E2E Testing）等，选择好后，按照提示一步步完成配置,最终也能生成一个符合你需求的项目。

项目目录结构

生成的项目有一个清晰的目录结构，`src` 目录是项目的核心，里面包含 `components` （存放组件）、`views` （存放页面级组件）、`router` （路由配置文件）、`store` （如果使用 Vuex 的话，存放状态管理相关代码）等子目录，`public` 目录一般存放静态资源，如 `index.html` （项目的入口页面）、`favicon.ico` 等，`package.json` 记录了项目的依赖和脚本命令等信息。

开发与运行

在项目目录下，通过命令 `npm run serve` （或者 `yarn serve` ，如果使用 yarn 包管理器）就可以启动开发服务器，这时，你可以在浏览器中访问指定的地址（一般是 `http://localhost:8080` ）来查看项目效果，当你修改代码时，开发服务器会自动重新编译并刷新页面,非常方便开发调试。

项目构建与发布

当项目开发完成，需要发布上线时，使用命令 `npm run build` （或 `yarn build` ），它会对项目进行打包优化，压缩代码、处理静态资源等，生成一个 `dist` 目录，这个目录里的文件就是可以部署到服务器上的生产环境代码，你可以将 `dist` 目录中的内容上传到服务器的相应目录，然后通过配置服务器（如 Nginx 等）来让项目在网上正常访问。

插件使用

Vue3 CLI 还支持丰富的插件，`@vue/cli-plugin-babel` 用于处理 ES6+ 语法转换，`@vue/cli-plugin-eslint` 用于代码规范检查等，你可以通过 `vue add 插件名称` 命令来添加插件,进一步扩展项目的功能和优化开发流程。

Vue3 CLI 是 Vue3 开发中非常实用的工具，它简化了项目搭建和开发流程，让开发者能更高效地进行 Vue3 项目的开发，无论是新手快速入门，还是有经验的开发者进行大型项目开发，都能从 Vue3 CLI 中受益，通过不断学习和实践它的各种功能，你能更好地掌握 Vue3 开发,打造出优秀的前端应用。