一、简介
- Vue-CLI（Vue Command Line Interface，Vue命令行界面）是Vue.js官方提供的一个全局模块包，用于快速生成Vue工程化项目的工具。
- 它基于webpack，开箱即用，零配置，且功能丰富且易于扩展，支持创建Vue 2和Vue 3的项目。
二、Vue-CLI的特点
- 开箱即用：Vue-CLI提供了默认的项目结构和配置，使得开发者可以快速开始一个新项目，无需从头搭建项目结构。
- 基于webpack：Vue-CLI内部集成了webpack，并提供了合理的默认配置，同时也允许开发者通过配置文件自定义webpack配置。
- 功能丰富且易于扩展：Vue-CLI支持多种功能，如路由、状态管理、CSS预处理器等，并且可以通过插件进行扩展，以满足不同的开发需求。
- 支持Vue 2和Vue 3：Vue-CLI允许开发者选择创建Vue 2或Vue 3的项目，以适应不同的项目需求。
三、Vue-CLI的安装
在使用Vue-CLI之前，需要先确保开发环境中已经安装了Node.js和npm（Node Package Manager）。Node.js的安装通常会附带npm。你可以通过运行node -v和npm -v来检查它们是否已安装及其版本。
安装Vue-CLI的步骤如下：
- 打开命令行工具（如cmd、Terminal或PowerShell）。
- 使用npm或yarn来全局安装Vue-CLI。如果使用npm，可以运行以下命令：
npm install -g @vue/cli。如果使用yarn，可以运行：yarn global add @vue/cli。注意，-g参数表示全局安装，这样你就可以在任何目录下使用vue命令了。 - 安装完成后，你可以通过运行
vue --version来检查Vue-CLI是否成功安装以及其版本号。
四、Vue-CLI的使用
1. 创建Vue项目
使用Vue-CLI创建Vue项目的步骤如下：
- 打开命令行工具并切换到你想创建项目的目录。
- 使用
vue create命令创建项目。运行以下命令，其中<project-name>是你想要创建的项目名称：vue create <project-name>。 - 执行该命令后，Vue-CLI会提供一系列选项让你选择，包括预设配置（preset）、Vue版本、路由、状态管理、CSS预处理器等。你可以根据自己的需求进行选择。
2. 进入项目目录并启动项目
创建项目后，使用cd命令切换到项目目录，然后运行以下命令来启动项目：
- 如果你使用的是npm，可以运行：
npm run serve。 - 如果你使用的是yarn，可以运行：
yarn serve。
命令执行后，Vue-CLI会使用webpack-dev-server来启动一个热重载的开发服务器。通常，它会在浏览器中自动打开一个新标签页，展示你的Vue应用。
五、Vue-CLI的项目结构
Vue-CLI创建的项目通常包含以下文件和目录：
node_modules：包含项目依赖的所有npm包。public：包含项目的静态资源文件，如index.html入口文件和favicon.ico图标文件。src：包含项目的源代码文件。assets：存放静态资源文件，如图片、字体等。components：存放Vue组件。App.vue：主组件文件，通常是所有页面组件的父组件。main.js：入口文件，用于创建Vue实例并挂载到DOM上。
.gitignore：Git版本控制忽略文件。babel.config.js：Babel配置文件，用于将ES6+代码转换为向后兼容的JavaScript代码。package.json：项目配置文件，包含项目的依赖、脚本等信息。README.md：项目描述文件。vue.config.js（可选）：配置文件，用于覆盖webpack的配置。