第五章：前端工程化

最新推荐文章于 2024-08-22 17:10:53 发布
最新推荐文章于 2024-08-22 17:10:53 发布
阅读量400 收藏 6
点赞数 12
分类专栏： JAVAWEB2 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72232218/article/details/135686178
版权
本文详细介绍了前端工程化的概念，包括使用YAPI管理接口文档、环境准备（如淘宝镜像和Node.js安装）、Vue项目创建与配置（如VueCLI、端口设置），以及Vue项目的基本开发流程，涉及HTML、JS和CSS的结构定义。
摘要由CSDN通过智能技术生成

第五章：前端工程化

1.前端工程化

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

YAPI是用来管理接口文档的
添加项目
在这里插入图片描述

添加分类
在这里插入图片描述

添加接口
在这里插入图片描述

2.环境准备

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

验证有没有设置成功
在这里插入图片描述

切换淘宝镜像是为了方便资源下载
在这里插入图片描述

上面我们的nodejs就准备好了
下面再安装vue_cli
在这里插入图片描述

执行下面的指令来确认是否执行成功
在这里插入图片描述

3.Vue项目

在这里插入图片描述
在这里插入图片描述

我们新建一个文件夹vue
然后在这个文件夹进入cmd
在这里插入图片描述
在这里插入图片描述

回车后会自动的调出vue的图形化界面
在这里插入图片描述
在这里插入图片描述

项目文件夹中填写的是项目名称
在这里插入图片描述

下一步
这里选择预设的模版
我们选择手动
在这里插入图片描述

下一步
这里选择插件的功能
这里我们多选一个Router即可
在这里插入图片描述

下一步
选择使用的vue版本和语法选择规范
在这里插入图片描述
在这里插入图片描述
这时我们的磁盘中就会出现一个vue-project
这个就是我们新创建的vue项目
在这里插入图片描述
此时我们图形化界面中也展示出了这个项目的基本信息
在这里插入图片描述
在这里插入图片描述

下面我们通过vscode来打开这个新创建的项目
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

这里的vue项目使用的端口是8080
8080也是是Tomcat的
下面我们学习一下如何改变前端vue项目的端口
在这里插入图片描述
在这里插入图片描述

这里我们修改了端口，使用ctrl+s保存
我们要将以前的服务清掉，再重新启动
我们点击ctrl+c，再输入y
在这里插入图片描述
在这里插入图片描述

我们点击跟踪链接，再浏览器中打开页面
在这里插入图片描述
这个界面是public下vue自带的页面
在这里插入图片描述

4.vue项目开发流程

在这里插入图片描述
在这里插入图片描述

下面我们改变他默认的页面
Template是用来定义html代码的
Script是用来定义js代码的，其中主要定义了vue中的数据模型和方法
Style中定义的是css中的样式
在这里插入图片描述
在这里插入图片描述

幸运小新
关注
专栏目录
什么是前端工程化？
weixin_47450807的博客
04-21 984
一、什么是前端工程化 虽然前端工程化的概念兴起还没几年的时间，但是对于“工程化”这个词并不是一个新鲜词了，在其他软件开发的领域很早就已经有了高度的工程化，例如Web服务端开发。只不过那个时候，前端工程师并没有工程化的意识，也没有必要对前端进行工程化的操作，毕竟在那个时期，前端的开发工作只能算是整个项目开发过程中的“附属品”。那为什么这几年，前端工程化的概念又突然成为了热点话题了呢？要想讲好前端工程化其实并不容易，我就从下面几个方面入手，对前端工程化的概念做个简单的讲解，仅仅是个人理解，希望大家多多交流讨论。
前端工程化之模块化基础
老司机的后备箱
11-10 816
浏览器与服务器之间采用HTTP协议通信，用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出HTTP请求。1999年，微软公司发布 IE 浏览器5.0版，第一次引入新功能：允许JavaScript脚本向服务器发起HTTP请求。这个功能当时并没有引起注意，直到2004年Gmail发布和2005年Google Map发布，才引起广泛重视。2005年2月，Ajax() 这个词第一次正式提出，指的是通过JavaScript的异步通信，从服务器获取XML。
前端的工程化
weixin_33670786的博客
01-21 114
背景 前端这个职位的诞生也有短短的十年。而在十年之前，我不认识你，那会还叫网页制作，用着一个Adobe非常牛逼的软件叫Dreamweaver。这是一个神奇的软件，绚丽多彩的网页通过它，拖拖拽拽，就这么梦幻般的生成了。网页制作师们，像一群织梦的妇人，心灵手巧，耐苦耐劳，从不抱怨。 直到有一天。 有位妇人（第一位妇人）站出来说： ...
前端架构，前端工程化
热门推荐
MK.Gao Blog
01-31 3万+
前端架构： 1.前端工程化 web应用复杂度的增加，特别是单页面应用的风靡。组件化，工程化，自动化成了前端发展的趋势。或者说一线的互联网公司就是这么做的。 每个前端团队都在打造自己的前端开发体系，这通常是一个东拼西凑，逐渐磨合的过程，在技术发展日新月异的今天，这样的过程真的是不可抽象和复制的么？本文希望能够通过系统的拆解前端开发体系为大家提供体系设计思路参考。 前端工程的3个阶段
前端宝典十一：前端工程化稳定性方案
最新发布
franktaoge的博客
08-22 732
什么是前端工程化 - 前端工程化 = 前端 + 软件工程； - 前端工程化 = 将工程方法系统化地应用到前端开发中； - 前端工程化 = 系统、严谨、可量化的方法开发、运营和维护前端应用程序； - 前端工程化 = 基于业务诉求，梳理出最符合当前需要的架构设计； 软件工程：将工程方法系统化地软件工程应用到软件开发中； 工程方法：以系统、严谨、可量化的方法开发、运营和维护软件；
《前端工程化》
杨晓风 迷迭香的记忆
08-20 532
任何事情都不是一帆风顺的，我们要直面这件事情，有问题就是解决问题喽。请随小编看看吧
前端工程化
m_review的博客
04-25 183
前端工程化 要解决的问题：如何提高整个系统的生产效率； 即：系统化、模块化、规范化的过程 制定各种规范 前后端接口规范，其他文档规范 接口命名规范，采用驼峰命名 接口修改及时更新文档 正确严格get post使用 使用 resful api 使用 Markdown 写周报 统一团队编码规范 目录结构、文件命名 好的文件名称，方法名称 代码风格规范，编码规范 ESLint检查...
study:前端工程师研究
06-19
在“study:前端工程师研究”这个项目中，我们可以看到一位前端工程师的学习轨迹，特别是对于AngularJS框架的深入学习。在二月份，这位工程师的主要学习焦点是AngularJS，这是一个由Google维护的JavaScript框架，用于...
模块化相关规范
weixin_43563864的博客
03-17 233
一. 模块化相关规范 1. 模块化概述 传统开发模式的主要问题: 命名冲突 文件依赖 通过模块化解决上述问题 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成 员，也可以依赖别的模块 模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护 2.大一统的模块化规范 – ES6模块化 在 ES6 模块化规范诞生之前，Javascript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。 但是，这些社区提出的模块化
前端工程化的理解
Emoji的博客
02-02 9145
很久没写过博客沉淀下，最近看了几篇前端工程化的文章，结合自己实践所学，阐述下什么是前端工程化。 大前端其实分为很多种 移动应用开发的前端 web前端 本篇主要是说下web前端的工程化 什么是前端工程化 在回答前端工程化这个问题之前，我们应该先考虑另外一个问题：前端开发中会不会涉及到业务？再详细一点，就是前端工程师到底需不需要了解服务端的业务逻辑，再或者说，要不要将一部分服务端的业务逻辑放到前端来实现。这个问题没有标准的答案，实际上应该属于工程协作问题，就是谁该干什么的问题。 最早的前端开发就是实
分层语义化模板实践：前端开发的MVC架构
本文主要探讨了在Web开发中实施分层语义化模板的实践方法，由前端工程师张克军在WebRebuild北京第一届交流会上分享。分层语义化模板是一种将前端架构设计与语义化HTML相结合的技术，旨在提高开发效率，增强可维护性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值