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