Vue 脚手架环境配置

一、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\npm

Path 环境变量

%NODE_HOME_24% %NPM_HOME_24%

验证安装

node -v # npm 验证 npm -v

node 安装成功，开始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_cache

c. 查看配置详情

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 的脚手架!!