Vue CLI 3创建项目详解

Vue CLI已升级至3.x版本，相较于2.x有了诸多优化。如今脚手架配置更加灵活便捷，本文将通过详细图解，逐步解析每个步骤的具体含义，帮助大家更好地理解和使用。

1、 安装vue-cli前需确保Node.js版本不低于8.9，推荐使用最新稳定版以获得更好兼容性支持。

2、 打开命令提示符或 PowerShell，运行命令：npm install -g @vue/cli，全局安装 Vue CLI 工具。

3、 若采用 yarn 包管理工具，可执行命令：yarn global add @vue/cli 来全局安装 Vue CLI。

4、 安装完毕后，执行 npm -V 命令可验证安装是否成功，并查看 vue-cli 的版本号。

5、 今天开始，我们将通过vue-cli3脚手架搭建一个全新的项目。

6、 创建名为 yichen-admin 的 Vue 项目。

7、 请将示例中的项目名 yichen-admin 更换为各自实际的项目名称，确保配置正确无误。

8、 系统将提示你选择配置方式，可选默认或手动设置。

9、 若此前已配置且本次无需更改，可直接选择第一项；但通常情况下，仍需手动进行相应设置以确保项目正常运行。

10、 因此选第二个选项

11、 手动配置时可自定义选项，按空格选中或取消，a键全选，i键反向选择。

12、 选用Babel转换器、Router路由、Vuex状态管理、CSS预处理器及ESLint代码风格检查工具，构建高效稳定的前端项目架构。

13、 各项具体功能可自行查阅网络资料，本次内容不作详细说明。

14、 回车后还需确认若干选项。其中一项询问是否启用路由的历史模式，输入 Y 启用 history 模式，输入 n 则采用默认的 hash 模式。两种模式的区别在 Vue 官方文档中有详细说明。通常情况下，默认使用 hash 模式即可，若服务器支持，推荐使用 history 模式以获得更友好的 URL 结构。

15、 我选用hash模式，并决定使用CSS预处理器。由于项目将采用基于Less开发的iView作为UI组件库，因此预处理器也相应选择了Less，以确保样式兼容与开发效率。

16、 接下来选择 ESLint 配置，我选了标准配置，下一项设置为保存时自动进行代码检查。

17、 接下来需确定Babel、PostCSS、ESLint等工具的配置存放位置。若项目规模较小，可将配置写入package.json；但为统一规范，建议优先采用第一种方式，即将配置独立存放于专用配置文件中，便于维护与管理。

18、 询问是否将本次配置设为默认，以便下次直接使用。建议选择否，因不同项目需求各异，统一默认设置可能不适用后续项目。

19、 输入完成后按回车键，系统开始加载，在网络良好的情况下，几分钟内即可完成创建。

20、 至此，一个基本的项目结构已成功建立。