1. 核心作用

• 一键初始化 Vue 项目（支持 Vue 2/Vue 3 切换）；
• 内置成熟的工程化配置（无需手动配置 Webpack、Babel、ESLint、热更新等）；
• 提供统一的开发命令（启动、打包、测试、部署一站式）；
• 支持插件扩展（如添加 Vue Router、Vuex、TypeScript 等，自动配置依赖和代码结构）。

2.内置命令

• vue create 项目名：创建新 Vue 项目（你之前创建 vue2 项目用的命令）；
• npm run serve：启动本地开发服务器（热更新、实时预览）；
• vue --version：查看 Vue CLI 版本；
• npm install -g @vue/cli：全局安装 Vue CLI（你之前安装/卸载过）。

3. 核心优势

• 标准化：避免“每个人的项目结构、配置都不一样”，团队协作更高效；
• 零配置上手：新手不用懂 Webpack、Babel 等工具，也能快速启动项目；
• 可扩展：支持自定义配置（修改 vue.config.js），满足复杂项目需求；
• 官方维护：与 Vue 框架深度兼容，更新同步，稳定性有保障。

1. 先想：现实中的建筑脚手架是什么？

盖房子时，工人不会先从“砌墙”开始——而是先搭建一套「临时的框架结构」（脚手架）：

• 提供基础支撑：让工人能安全站在上面施工；
• 规定基本轮廓：跟着脚手架的框架，房子的墙体、楼层结构不会乱；
• 省去重复工作：不用每次盖房子都从零搭支撑结构，直接复用脚手架模板。

2. 类比到 Vue CLI：开发 Vue 项目的“代码脚手架”

开发 Vue 项目时，你就像“盖房子的工人”，Vue CLI 就是为你搭好的「代码脚手架」：

• 提供基础结构：创建项目后，自动生成 src（源码目录）、package.json（依赖配置）、vue.config.js（项目配置）等固定目录和文件，不用你手动创建；
• 内置“支撑工具”：预先配置好 Webpack（打包）、Babel（兼容旧浏览器）、ESLint（代码检查）、热更新（开发实时预览）等“施工工具”，不用你逐个安装配置；
• 规定开发规范：项目结构、文件命名、依赖管理都遵循 Vue 官方标准，避免你“乱搭结构”导致后续维护困难；
• 专注核心工作：你不用关心“基础框架怎么搭、工具怎么配”，就像工人不用关心“脚手架怎么搭”，只需专注于「业务代码开发」（比如写组件、写逻辑）——这就是脚手架的核心价值。

一句话总结命名逻辑：

Vue CLI 就像“开发 Vue 项目的标准化脚手架”，它帮你搭好项目的“基础框架和工具环境”，让你不用从零处理繁琐的配置和结构，直接聚焦核心的业务开发，效率翻倍。

Vue CLI 本质是「Vue 项目的工程化工具链」，而“脚手架”的命名是对其核心功能的精准比喻——它不是帮你“写业务代码”，而是帮你“搭好写代码的基础框架”，让开发过程更标准化、更高效，尤其适合新手快速入门和团队协作。

在VScode中配置git终端

1
"terminal.integrated.profiles.windows": {
2
  "Git Bash": {
3
    "path": "C:\\Program Files\\Git\\bin\\bash.exe",  // Git安装路径
4
    "args": ["--login"]  // 确保加载配置文件
5
  }
6
},
7
"terminal.integrated.defaultProfile.windows": "Git Bash"  // 设置为默认终端

1
// Windows（Git Bash）
2
"terminal.integrated.profiles.windows": {
3
  "Git Bash": {
4
    "path": "C:\\Program Files\\Git\\bin\\bash.exe",
5
    "args": ["--login", "-i", "-c", "source ~/.bashrc && exec bash"]  // 关键：自动加载bash配置
6
  }
7
}

检查nvm镜像源配置：

检查你用的 NVM 是否还在使用旧的淘宝镜像地址 http://npm.taobao.org/mirrors/node/，但这个地址早就被淘宝废弃了（现在官方镜像域名是 npmmirror.com），导致请求 SHASUMS256.txt 文件时返回 404 找不到，安装失败。

核心解决思路：把 NVM 的 Node 镜像源换成淘宝新镜像（或官方镜像），再重新执行安装命令。

一、Windows 系统（用的是 nvm-windows）

步骤 1：找到 NVM 的配置文件 settings.txt

• 默认路径：C:\Users\你的用户名\AppData\Roaming\nvm\settings.txt（比如 C:\Users\Admin\AppData\Roaming\nvm\settings.txt）；
• 若找不到：打开 NVM 安装目录（安装时自定义的路径），直接找到 settings.txt。

步骤 2：修改配置文件，添加新镜像源

用记事本打开 settings.txt，在文件末尾添加以下 2 行（替换旧镜像）：

1
node_mirror: https://npmmirror.com/mirrors/node/
2
npm_mirror: https://npmmirror.com/mirrors/npm/

保存并关闭文件。

##### 步骤 3：重新安装 Node xx版本

打开新的终端（必须重启终端，让配置生效），执行：

1
nvm install 18.16.0（选择当前合适的版本）

1
# Windows/macOS/Linux 通用
2
NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node/ nvm install 18.16.0

1
# 切换到 18.16.0 版本
2
nvm use 18.16.0
3

4
# 验证版本（显示 v18.16.0 即成功）
5
node -v
6
npm -v  # 会自动配套更新 npm 版本（比如 v9.5.1）

关键说明

• 淘宝旧镜像 npm.taobao.org 已停止维护，所有镜像服务迁移到 npmmirror.com，这是核心问题；
• 修改镜像源后必须重启终端（或执行 source 命令），否则配置不生效，仍会用旧地址报错；
• 若仍报错 404，检查镜像地址是否拼写正确（注意是 https，不是 http）。

1.全局安装（一次）

1
yarn global add @vue/cli 或 npm i @vue/cli -g

这是因为版本不正确，出现了高危漏洞

下载更高版本的Vue建议下载18+nodejs版本，这里我下载的时5.0.9版本的重新安装nodejs18+版本，高危漏洞就没有了。

上面的报错简单说：全局 Vue CLI 是“工具”，项目本地的插件是“项目依赖”，两者版本必须一致，才能同步更新依赖链里的 webpack-dev-server。

如果实在想修复这些漏洞，且不想接受「破坏性更新」，按以下步骤彻底同步 Vue CLI 版本（从根源解决漏洞）：

1
npm uninstall -g @vue/cli

1
npm install -g @vue/cli@latest

1
# 更新项目核心插件（@vue/cli-service 是关键，会带动 webpack-dev-server 更新）
2
npm install @vue/cli-service@latest @vue/cli-plugin-babel@latest @vue/cli-plugin-eslint@latest --save-dev

1
# 删除 node_modules 文件夹和 package-lock.json
2
rm -rf node_modules package-lock.json  # Windows 用：rd /s/q node_modules package-lock.json

2.查看Vue版本：

1
vue --version

3.创建项目架子：

1
vue create project-name（项目名- 不能用中文）

会有一个下载Vue2 或者 Vue3 的判断，使用上下箭头来控制下载的版本，这里我使用的时下载Vue2版本。

4.启动项目

1
yarn serve 或 npm run serve （找package.json）

npm run serve 是 Vue 项目的启动命令，必须在 项目根目录（即包含 package.json 文件的文件夹）下执行。

如何升级 npm 到最新版？（1 行命令）

打开终端，执行以下命令（全局升级，所有项目都能用）：

1
npm install -g npm@latest

• 解释：-g 表示「全局安装」，npm@latest 表示「安装 npm 的最新稳定版」（会自动安装 11.6.2）。

1
npm -v

补充注意事项：

1. 升级 npm 不会影响你的 Node.js 版本（两者是独立工具，npm 是 Node 自带的包管理器，可单独升级）；

2. 若升级后某个旧项目报错（极少数情况），可回滚到原来的 npm 版本：

   1
   npm install -g npm@9.5.1  # 回滚到之前的 9.5.1 版本

3. 如果你用的是 yarn 包管理器（而非 npm），这个提示可以忽略，无需升级 npm。

安装完成之后既可以进行组件化开发了

1.项目结构和核心文件解析

2.入口文件main.js

1
import Vue from "vue";
2
import App from "./App.vue";
3

4
//2.提示当前处于什么环境（生产环境/开发环境）
5
Vue.config.productionTip = false;
6

7
//3.Vue 实例化 提供render 方法 → 基于App.vue创建结构渲染index.html
8
new Vue({
9
  //el: '#app' 作用： 和$mount('选择器') 作用一致 用于指定Vue所管理的容器·
10
  // render: h => h(App),
11
  render: (createElement) => {
12
    // 基于
13
    return createElement(App);
14
  },
15
}).$mount("#app");

3.根组件App.vue

1
//三部分组成： //template:结构 //script:js逻辑 //style:样式（可支持less
2
需要安装包）
3

4
<template>
5
  <div id="app">
6
    <img alt="Vue logo" src="./assets/logo.png" />
7
    <HelloWorld msg="Welcome to Your Vue.js App" />
8
  </div>
9
</template>
10

11
<script>
12
import HelloWorld from "./components/HelloWorld.vue";
13

14
export default {
15
  name: "App",
16
  components: {
17
    HelloWorld,
18
  },
19
};
20
</script>
21

22
<style>
23
#app {
24
  font-family: Avenir, Helvetica, Arial, sans-serif;
25
  -webkit-font-smoothing: antialiased;
26
  -moz-osx-font-smoothing: grayscale;
27
  text-align: center;
28
  color: #2c3e50;
29
  margin-top: 60px;
30
}
31
</style>

1.普通组件的注册使用

步骤：

（1）创建.vue文件 （包含 template script style三部分）

（2）在使用该组件的父组件中，通过import导入组件

（3）在父组件中 components 选项中注册组件

（4）在发父组件中的template中直接使用组件标签

2.全局组件的注册使用

步骤：

（1）在入口文件main.js中导入组件

（2）通过Vue.component(‘组件名’，组件对象)注册；

（3）在任意组建的template中直接使用组件标签

一般都是局部注册，如果发现是全局注册，再抽离出来