前端工程化

合集 - JavaWeb(22)

1.Web开发2023-07-152.HTML和CSS2023-07-153.JavaScript2023-07-174.Vue2023-07-175.Ajax2023-07-18

6.前端工程化2023-07-18

7.Element2023-07-188.Maven2023-07-199.HTTP2023-07-1910.Tomcat2023-07-1911.请求响应2023-07-2012.分层解耦2023-07-2013.MySQL2023-07-2214.Mybatis2023-07-2415.文件上传2023-07-2516.配置文件2023-07-2617.会话技术2023-07-2718.过滤器与拦截器2023-07-2719.异常处理与事务管理2023-07-2720.AOP2023-07-2821.bean的管理2023-07-2822.自动配置2023-07-31

收起

一、前后端混合开发

1.沟通成本高

2.分工不明确

3.不便于管理

4.不便维护扩展

二、前后端分离开发

1.当前最为主流的开发模式

2.流程

（1）需求分析；

（2）接口定义（API接口文档）；

（3）前后端并行开发（遵守规范）；

（4）测试（前端、后端）；

（5）前后端联调测试。

三、前端工程化

1.前端工程化

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

2.环境准备

（1）NodeJS

（2）Vue-cli

3.创建Vue项目

（1）方式一：命令行 vue create vue-projrct01

（2）方式二：图形化界面 vue ui

4.Vue项目目录结构

（1）node_modules：整个项目的依赖包；

（2）public：存放项目的静态文件；

（3）src：存放项目的源代码；

• assets：静态资源；
• components：可重用的组件；
• router：路由配置；
• views：视图组件（页面）；
• App.vue：入口页面（根组件）；
• main.js：入口js文件。

（4）package.json：模块基本信息，项目开发所需要模块，版本信息；

（5）vue.config.js：保存vue配置的文件，如：代理、端口的配置等。

5.Vue项目启动

（1）方式一：图形化界面

（2）方式二：命令行 项目路径>npm run serve

6.Vue项目配置端口

7.Vue项目开发流程

（1）入口文件：main.js；

（2）根组件：APP.Vue：

（3）Vue的组件文件以.Vue结尾，每个组件由三个部分组成：<template>、<script>、<style>。