vue-cli

1、什么是 vue-cli

• vue-cli（俗称：vue 脚手架）是 vue 官方提供的、快速生成 vue 工程化项目的工具。
• 特点：
  ① 开箱即用
  ② 基于 webpack
  ③ 功能丰富且易于扩展
  ④ 支持创建 vue2 和 vue3 的项目

2、安装 vue-cli

• vue-cli 是基于 Node.js 开发出来的工具，因此需要使用 npm 将它安装为全局可用的工具：
  

2.1 解决 Windows PowerShell 不识别 vue 命令的问题

• 默认情况下，在PowerShell 中执行 vue --version 命令会提示如下的错误消息：
  
• 解决方案如下：
  ① 以管理员身份运行 PowerShell
  ② 执行 set-ExecutionPolicy RemoteSigned 命令
  ③ 输入字符 Y ，回车即可
  

3、创建项目

• vue-cli 提供了创建项目的两种方式：
  

4、基于 vue ui 创建 vue 项目

• 步骤1：在终端下运行vue ui 命令，自动在浏览器中打开创建项目的可视化面板：
  

  

• 步骤2：在详情页面填写项目名称：
  

  

• 步骤3：在预设页面选择手动配置项目：
  

  

• 步骤4：在功能页面勾选需要安装的功能（Choose Vue Version、Babel、CSS 预处理器、使用配置文件）：
  

  
  

• 步骤5：在配置页面勾选 vue 的版本和需要的预处理器：
  

  
  

• 步骤6：将刚才所有的配置保存为预设（模板），方便下一次创建项目时直接复用之前的配置：
  

  

• 步骤7：创建项目并自动安装依赖包：
  

  

• vue ui 的本质：通过可视化的面板采集到用户的配置信息后，在后台基于命令行的方式自动初始化项目：
  

  

• 项目创建完成后，自动进入项目仪表盘：
  

  

5、基于命令行创建 vue 项目

• 步骤1：在终端下运行vue create demo2 命令，基于交互式的命令行创建 vue 的项目：
  
• 步骤2：选择要安装的功能：
  
• 步骤3：使用上下箭头选择 vue 的版本，并使用回车键确认选择：
  
• 步骤4：使用上下箭头选择要使用的 css 预处理器，并使用回车键确认选择：
  
• 步骤5：使用上下箭头选择如何存储插件的配置信息，并使用回车键确认选择：
  
• 步骤6：是否将刚才的配置保存为预设：
  
• 步骤7：选择如何安装项目中的依赖包：
  
• 步骤8：开始创建项目并自动安装依赖包：
  
• 步骤9：项目创建完成：
  

6、梳理 vue2 项目的基本结构

7、 分析 main.js 中的主要代码

8、在 vue2 的项目中使用路由

• 在 vue2 的项目中，只能安装并使用3.x 版本的 vue-router。
• 版本 3 和版本 4 的路由最主要的区别：创建路由模块的方式不同

8.1 回顾：4.x 版本的路由如何创建路由模块

8.2 学习：3.x 版本的路由如何创建路由模块

• 步骤1：在 vue2 的项目中安装 3.x 版本的路由：
  
• 步骤3：在 src 目录下创建 router -> index.js 路由模块：
  
• 步骤4：在 main.js 中导入路由模块，并通过 router 属性进行挂载：
  
• 步骤5：在 App.vue 根组件中，使用 <router-view> 声明路由的占位符：