一、Vue 脚手架
1.1、什么是 vue 脚手架
Vue 脚手架（核心为 Vue CLI，Vue Command Line Interface）是 Vue 官方提供的标准化项目构建工具，本质是封装了 webpack、babel、eslint 等底层工具链的命令行工具，核心作用是快速搭建 Vue 项目的基础工程结构，无需开发者手动配置繁琐的构建环境，是 Vue 项目开发的标配工具。
1.2、主要作用
1. 一键初始化项目：通过简单命令（如vue create 项目名）生成规范的目录结构（如
src/components、src/views、public 等）、配置文件（如 package.json、vue.config.js），
省去从零搭建的繁琐；
2. 内置工具链：开箱即用 webpack（代码打包）、babel（ES6+ 转 ES5）、devServer
（开发服务器，支持热更新）、eslint（代码校验）等，无需单独配置；
3. 可定制化：支持选择预设（默认 / 手动），比如是否集成 vue-router、vuex，是否使用
TypeScript 等，也可通过vue.config.js自定义端口、打包规则等；
4. 插件化扩展：通过 Vue CLI 插件快速集成第三方功能（如 Element UI、PWA 等），降低
集成成本。
二、脚手架安装
2.1、安装简述
1.安装 nodejs (里面包含 npm, 安装脚手架时用到)
2.配置 npm 仓库路径到系统环境变量
3.配置 npm 镜像地址
4.安装 vue-cli 到全局仓库
2.2、下载并解压
下载网址
https://nodejs.org/en/download将 node 解压到D:\space目录下, 解压之后不能存在重复目录, 根目录下必须看见
nodejs 的主要文件。
**2.3、环境变量配置
# 配置两个环境变量 # 指向 node 的解压目录 NODE_HOME_24 D:\space\node-v24.12.0-win-x64 # 指向资源仓库位置 （习惯于将仓库配置为 **D:\space\npm**）中 NPM_HOME_24 D:\space\npmPath 环境变量
%NODE_HOME_24% %NPM_HOME_24%验证安装
node -v # npm 验证 npm -vnode 安装成功，开始npm 设置**
a. 镜像地址
设置 npm 镜像地址
npm config set registry https://registry.npmmirror.com/b. 全局仓库
设置 npm 本地全局仓库 npm config set prefix D:\space\npm 设置 npm 缓存目录 npm config set cache D:\space\npm_cachec. 查看配置详情
npm config list安装 vue 脚手架**
# 安装新版vue-cli -g 代表全局安装 npm install -g @vue/cli vue-cli 其实是 @vue/cli 的前身，旧版本的Vue CLI 的包名叫 vue-cli npm install -g vue-cli查看安装
npm list -g --depth=0、创建 vue 项目**
注意: 执行此步骤之前, 必须完成上一项。
初始化 VUE 工程
a.创建工作空间D:xuexi
b.使用命令行进入该目录cd D:xuexi
c.执行以下指令
# @vue/cli版本使用命令 vue create 项目名 # 旧版本 使用命令 vue init webpack mypro2选择 Vue2 (创建 Vue2 的工程)
出现 Successfully 表示创建成功
按照蓝色提示符,
# 进入项目目录 cd aaa # 启动项目 npm run serve
浏览器打开网址访问,
恭喜成功搭建Vue 的脚手架!!
