黑马JavaWeb开发笔记08——(保姆级Vue项目全部安装配置步骤)Vue-cli脚手架安装、NodeJS环境搭建、Vue项目的创建、运行、端口修改、Vue开发流程

---

前言

本篇文章是2023年最新黑马JavaWeb企业级开发笔记08：Vue-cli脚手架安装、NodeJS环境搭建、Vue项目的创建、运行、端口修改、Vue开发流程的总结，帮助需要学习Web开发的朋友温故而知新。

本篇文章重点是安装步骤，细化了每一个步骤，对于可能遇到的问题均补充了解决办法。

1. Vue-cli脚手架介绍
2. Vue-cli脚手架安装(详细步骤）
3. Vue项目创建、介绍、运行
4. Vue项目开发流程

---

前端工程化

现在企业开发中更加讲究前端工程化方式的开发，主要包括如下4个特点：

1. 模块化：将js和css等，做成一个个可复用模块
2. 组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理
3. 规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
4. 自动化：项目的构建，测试，部署全部都是自动完成

在企业级的前端项目开发中，把前端开发所需要的工具、技术、流程、经验进行规范化和标准化

需要学习vue的官方提供的脚手架帮我们完成前端的工程化

1. Vue-cli脚手架介绍

• vue官方提供脚手架Vue-cli，用于快速的生成一个Vue的项目模板。
• Vue-cli主要提供了如下功能：
  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线
• NodeJS是前端工程化依赖的环境

2. Vue-cli脚手架安装

1. 在nodejs官网里面下载nodejs安装到本地
   
   双击.msi文件安装，选择好安装路径，安装路径不能有中文和空格，它会自动配置
   

2. 验证nodejs环境变量
   NodeJS 安装完毕后，会自动配置好环境变量，我们验证一下是否安装成功 node -v
   

3. 配置npm的全局安装路径
   使用管理员身份运行命令行
   
   在命令行中，执行如下指令：npm config set prefix "你自己的nodejs安装路径"
   比如我安装在E盘的node.js文件夹中&#