Vue工程化

什么是Vue

是用于构建用户界面的渐进式的JavaScript框架。所谓构建界面指的就是，我们可以将服务器端响应给前端的这个数据，渲染成用户所能看到的网页。这个也称为基于数据渲染出用户看到的界面。在Vue中，最核心的就是数据，是针对数据进行操作的，将数据基于Vue的一些指令渲染出对应的姓名。

这里提到的渐进大家可以理解为循序渐进的意思

前端工程化

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

环境准备

介绍：create-vue是Vue官方提供的最新的脚手架工具，用于快速生成一个工程化的Vue项目。

create-vue提供了如下功能：

• 统一的目录结构
• 本地调试
• 热部署
• 单元测试
• 集成打包上线

而要想使用create-vue来创建vue项目，则必须安装依赖环境：NodeJS

Node.js是什么？

是一个免费，开源，跨平台的Javascript运行环境，它让开发人员能够创造服务器，Web应用，命令或工具和脚本

npm是什么？

Node Package Manager，是NodeJS的软件包管理器。

在开发前端项目的过程中，我们需要相关的依赖，就可以直接通过 npm install xxx 命令，直接从远程仓库中将依赖直接下载到本地了

如果我们需要用到某一个软件包，我们就可以直接npm.install，它就会自动的联网下载对应的软件包了，它连接的就是远程仓库

项目结构

使用VS Code打开项目

项目-启动

方式一：命令行

启动项目，我们可以在命令行中执行命令：npm run dev，就可以启动Vue项目了。

默认的访问地址就是http:/localhost:5173/，我们只要访问这个地址就可以访问到前端项目了

命令行一旦关掉，服务停止

方式二：VsCode图形化界面

点击NPM脚本中的dev后的运行按钮，就可以启动项目。

启动起来之后，我们就可以访问前端Vue项目了，访问路径：http://localhost:5173

只要能够看到Vue项目的欢迎页面，那就说明我们Vue项目已经创建并启动成功了，也成功的访问到了