【Vue】Vue-CLI（脚手架）

一、简介

• Vue-CLI（Vue Command Line Interface，Vue命令行界面）是Vue.js官方提供的一个全局模块包，用于快速生成Vue工程化项目的工具。
• 它基于webpack，开箱即用，零配置，且功能丰富且易于扩展，支持创建Vue 2和Vue 3的项目。

二、Vue-CLI的特点

1. 开箱即用：Vue-CLI提供了默认的项目结构和配置，使得开发者可以快速开始一个新项目，无需从头搭建项目结构。
2. 基于webpack：Vue-CLI内部集成了webpack，并提供了合理的默认配置，同时也允许开发者通过配置文件自定义webpack配置。
3. 功能丰富且易于扩展：Vue-CLI支持多种功能，如路由、状态管理、CSS预处理器等，并且可以通过插件进行扩展，以满足不同的开发需求。
4. 支持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的步骤如下：

1. 打开命令行工具（如cmd、Terminal或PowerShell）。
2. 使用npm或yarn来全局安装Vue-CLI。如果使用npm，可以运行以下命令：npm install -g @vue/cli。如果使用yarn，可以运行：yarn global add @vue/cli。注意，-g参数表示全局安装，这样你就可以在任何目录下使用vue命令了。
3. 安装完成后，你可以通过运行vue --version来检查Vue-CLI是否成功安装以及其版本号。

四、Vue-CLI的使用

1. 创建Vue项目

使用Vue-CLI创建Vue项目的步骤如下：

1. 打开命令行工具并切换到你想创建项目的目录。
2. 使用vue create命令创建项目。运行以下命令，其中<project-name>是你想要创建的项目名称：vue create <project-name>。
3. 执行该命令后，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的配置。