.png)
Node.js安装
一 前端工程化介绍
我们目前的前端开发中，当我们需要使用一些资源时，例如： vue.js，和axios.js文件，都是直接再工程 中导入的，如下图所示：
但是上述开发模式存在如下问题：
每次开发都是从零开始，比较麻烦
多个页面中的组件共用性不好
js、图片等资源没有规范化的存储目录，没有统一的标准，不方便维护
所以现在企业开发中更加讲究前端工程化方式的开发，主要包括如下4个特点：
模块化：将js和css等，做成一个个可复用模块
组件化：我们将UI组件， css样式， js行为封装成一个个的组件，便于管理
规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范 自动化：项目的构建，测试，部署全部都是自动完成
所以对于前端工程化，说白了，就是在企业级的前端项目开发中，把前端开发所需要的工具、技术、流 程、经验进行规范化和标准化。从而提升开发效率，降低开发难度等等。接下来我们就需要学习vue的 官方提供的脚手架帮我们完成前端的工程化。
二 前端工程化入门 1. 环境准备
我们的前端工程化是通过vue官方提供的脚手架Vue-cli来完成的，用于快速的生成一个Vue的项目模板。 Vue-cli主要提供了如下功能：
统一的目录结构
本地调试
热部署
单元测试
集成打包上线
我们需要运行Vue-cli，需要依赖NodeJS ， NodeJS是前端工程化依赖的环境。所以我们需要先安装 NodeJS，然后才能安装Vue-cli
1.1. node.js安装
1.1.1. 下载软件 根据需求下载适合自己的版本,下载地址： https://nodejs.org/zh-cn/download/
1.1.2. 安装步骤
1. 双击安装包， 一直点击【下一步】
2. 点击change按钮，更换到自己的指定安装位置，点击【下一步】
3. 一直点击【下一步】，最后安装成功即可
1.1.4. 验证是否成功
打开命令窗口，输入以下命令验证是否安装成功
node -v
npm -vnode -v 显示安装的nodejs版本 npm -v 显示安装的npm版本
1.1.5. 修改全局模块下载路径
将全模块所在路径和缓存路径放在nodejs的安装目录下面，创建两个文件夹： node_global、 node_cache
在命令行窗口执行发下命令：
npm config set prefix "C:\Project\node\node_global"
npm config set cache "C:\Project\node\node_cache"
#prefix:创建的node_global文件所在路径
#cache:创建的node_cache文件夹所在路径经过以上的步骤， nodejs下载的模块会自己下载到我们自定义的目录。
在命令行窗口输入以下命令进行验证： npm install express -g(-g是全局安装的意思，不加-g就是默认下 载到当前目录)
1.1.6. 更换npm源为淘宝镜像
npm默认的registry，也就是npm下载的包是从国外的服务器下载，在国内会很慢，我们一般都会将 npm源指向淘宝。
1.查看初始npm源：
npm config get registry2.更换为淘宝镜像：
npm config set registry https://registry.npm.taobao.org/3.验证是否更换成功
npm config get registry1.2. 安装vue和脚手架
使用管理员身份运行命令行，在命令行中，执行如下指令：
vue create [项目名称]2.2. vue项目目录结构
基于Vue脚手架创建出来的工程，有标准的目录结构，如下：
PS D:\Project\VsCode\learnvue> node -v
v20.10.0
PS D:\Project\VsCode\learnvue> npm create vue@latest
Need to install the following packages:
create-vue@3.9.2
Ok to proceed? (y) y
<p>Vue.js - The Progressive JavaScript Framework</p>
<p>√ 请输入项目名称： ... learnvue
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是 #建议y
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是</p>
<p>正在构建项目 D:\Project\VsCode\learnvue\learnvue...</p>
<p>项目构建完成，可执行以下命令：</p>
<p>cd learnvue
npm install
npm run dev</p>
<p>PS D:\Project\VsCode\learnvue> cd .\learnvue<br />
#项目下载
PS D:\Project\VsCode\learnvue\learnvue> npm install</p>
<p>added 27 packages in 4s
#项目启动
PS D:\Project\VsCode\learnvue\learnvue> npm run dev</p>
<p>> learnvue@0.0.0 dev
> vite</p>
<p>VITE v5.1.5 ready in 1386 ms</p>
<p>➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help2.4. vue项目开发流程
Vue的组件文件以 .vue结尾，每个组件由三个部分组成： template 、script、style。 3. vue组件库Element 3.1. Element简介
Element：是饿了么团队研发的， 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端 组件库。
组件：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等。 官网： https://element.eleme.cn/#/zh-CNListener
3.2. 快速入门
安装ElementUI组件库 （在当前工程的目录下），在命令行执行指令
npm i element-ui -S在main.js引入ElementUI组件库
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
评论区