JavaWeb——前端工程化（1/3）：介绍、环境准备（Vue-cli、安装NodeJS）

目录

前端工程化

环境准备

Vue-cli

安装NodeJS

---

小白眼中的前端开发

        在小白看来，这可能就像是一个混乱的“手工作坊”。开发者可能只是随意地创建文件，代码的组织没有明显的规律，各种功能的代码可能混杂在一起。他们可能会直接在一个或几个大文件中编写所有的代码，修改和查找特定功能的代码时就像在大海捞针，十分困难。而且，对于代码的复用，可能就是简单地复制粘贴，导致代码冗余且难以维护。每次添加新功能或者修改现有功能，都可能引发一系列意想不到的问题，就好像不小心碰倒了多米诺骨牌，整个项目变得摇摇欲坠。 

实际的前端开发

前端工程化-介绍

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

环境准备

Vue-cli

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

安装NodeJS

• 下载好安装包之后打开
• 选择安装到一个，没有中文，没有空格的目录下（新建一个文件夹NodeJS）

• 点击下一步，最后安装，等待即可

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

• 配置npm的全局安装路径。使用管理员身份运行命令行，在命令行中，执行如下指令：

npm config set prefix "E:\Programme\JavaWeb\NodeJS"

注意：E:\Programme\JavaWeb\NodeJS 这个目录是NodeJS的安装目录

• 切换npm的淘宝镜像。使用管理员身份运行命令行，在命令行中，执行如下指令：

npm config set registry https://registry.npmmirror.com

• 安装Vue-cli。使用管理员身份运行命令行，在命令行中，执行如下指令：

npm install -g @vue/cli

这个过程中，会联网下载，可能会耗时几分钟，耐心等待。

执行成功：

---

END

---

学习自：黑马程序员——JavaWeb课程