Javaweb之前端工程化的详细解析

3 前端工程化

3.1 前端工程化介绍

我们目前的前端开发中,当我们需要使用一些资源时,例如:vue.js,和axios.js文件,都是直接再工程中导入的,如下图所示:

但是上述开发模式存在如下问题:

  • 每次开发都是从零开始,比较麻烦

  • 多个页面中的组件共用性不好

  • js、图片等资源没有规范化的存储目录,没有统一的标准,不方便维护

所以现在企业开发中更加讲究前端工程化方式的开发,主要包括如下4个特点

  • 模块化:将js和css等,做成一个个可复用模块

  • 组件化:我们将UI组件,css样式,js行为封装成一个个的组件,便于管理

  • 规范化:我们提供一套标准的规范的目录接口和编码规范,所有开发人员遵循这套规范

  • 自动化:项目的构建,测试,部署全部都是自动完成

所以对于前端工程化,说白了,就是在企业级的前端项目开发中,把前端开发所需要的工具、技术、流程、经验进行规范化和标准化。从而提升开发效率,降低开发难度等等。接下来我们就需要学习vue的官方提供的脚手架帮我们完成前端的工程化。

3.2 前端工程化入门

3.2.1 环境准备

我们的前端工程化是通过vue官方提供的脚手架Vue-cli来完成的,用于快速的生成一个Vue的项目模板。Vue-cli主要提供了如下功能:

  • 统一的目录结构

  • 本地调试

  • 热部署

  • 单元测试

  • 集成打包上线

我们需要运行Vue-cli,需要依赖NodeJS,NodeJS是前端工程化依赖的环境。所以我们需要先安装NodeJS,然后才能安装Vue-cli

  • NodeJS安装和Vue-cli安装

    详细安装步骤,请参考资料/NodeJS安装文档/NodeJS安装文档.md文件

3.2.2 Vue项目简介

环境准备好了,接下来我们需要通过Vue-cli创建一个vue项目,然后再学习一下vue项目的目录结构。Vue-cli提供了如下2种方式创建vue项目:

  • 命令行:直接通过命令行方式创建vue项目

    vue create vue-project01

  • 图形化界面:通过命令先进入到图形化界面,然后再进行vue工程的创建

    vue ui

    图形化界面如下:

3.2.2.1 创建vue项目

此处我们通过第二种图形化界面方式给大家演示。

首先,我们再桌面创建vue文件夹,然后双击进入文件夹,来到地址目录,输入cmd,然后进入到vue文件夹的cmd窗口界面,如下图所示:

然后进入如下界面:

然后再当前目录下,直接输入命令vue ui进入到vue的图形化界面,如下图所示:

然后我门选择创建按钮,在vue文件夹下创建项目,如下图所示:

然后来到如下界面,进行vue项目的创建

然后预设模板选择手动,如下图所示:

然后再功能页面开启路由功能,如下图所示:

然后再配置页面选择语言版本和语法检查规范,如下图所示:

然后创建项目,进入如下界面:

最后我们只需要等待片刻,即可进入到创建创建成功的界面,如下图所示:

到此,vue项目创建结束

3.2.2.2 vue项目目录结构介绍

我们通过VS Code打开之前创建的vue文件夹,打开之后,呈现如下图所示页面:

vue项目的标准目录结构以及目录对应的解释如下图所示:

其中我们平时开发代码就是在src目录

3.2.2.3 运行vue项目

那么vue项目开发好了,我们应该怎么运行vue项目呢?主要提供了2种方式

  • 第一种方式:通过VS Code提供的图形化界面 ,如下图所示:(注意:NPM脚本窗口默认不显示,可以参考本节的最后调试出来)

  • 点击之后,我们等待片刻,即可运行,在终端界面中,我们发现项目是运行在本地服务的8080端口,我们直接通过浏览器打开地址
  • 最终浏览器打开后,呈现如下界面,表示项目运行成功
  • 其实此时访问的是 src/App.vue这个根组件,此时我们打开这个组件,修改代码:添加内容Vue
  • 只要我们保存更新的代码,我们直接打开浏览器,不需要做任何刷新,发现页面呈现内容发生了变化,如下图所示:
  • 这就是我们vue项目的热更新功能

    对于8080端口,经常被占用,所以我们可以去修改默认的8080端口。我们修改vue.config.js文件的内容,添加如下代码:

    devServer:{port:7000
    }

    如下图所示,然后我们关闭服务器,并且重新启动,

重新启动如下图所示:

端口更改成功,可以通过浏览器访问7000端口来访问我们之前的项目

  • 第二种方式:命令行方式

    直接基于cmd命令窗口,在vue目录下,执行输入命令npm run serve即可,如下图所示:

补充:NPM脚本窗口调试出来

第一步:通过设置/用户设置/扩展/MPM更改NPM默认配置,如下图所示

然后重启VS Code,并且双击打开package.json文件,然后点击资源管理器处的3个小点勾选npm脚本选项,如图所示

然后就能都显示NPM脚本小窗口了。

3.2.3 Vue项目开发流程

那么我们访问的首页是index.html,但是我们找到public/index.html文件,打开之后发现,里面没有什么代码,但是能够呈现内容丰富的首页:如下图所示:

我们自习观察发现,index.html的代码很简洁,但是浏览器所呈现的index.html内容却很丰富,代码和内容不匹配,所以vue是如何做到的呢?接下来我们学习一下vue项目的开发流程。

对于vue项目,index.html文件默认是引入了入口函数main.js文件,我们找到src/main.js文件,其代码如下:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
​
Vue.config.productionTip = false
​
new Vue({router,render: h => h(App)
}).$mount('#app')
​

上述代码中,包括如下几个关键点:

  • import: 导入指定文件,并且重新起名。例如上述代码import App from './App.vue'导入当前目录下得App.vue并且起名为App

  • new Vue(): 创建vue对象

  • $mount('#app');将vue对象创建的dom对象挂在到id=app的这个标签区域中,作用和之前学习的vue对象的le属性一致。

  • router: 路由,详细在后面的小节讲解

  • render: 主要使用视图的渲染的。

来到public/index.html中,我们删除div的id=app属性,打开浏览器,发现之前访问的首页一片空白,如下图所示,这样就证明了,我们main.js中通过代码挂在到index.html的id=app的标签区域的。

此时我们知道了vue创建的dom对象挂在到id=app的标签区域,但是我们还是没有解决最开始的问题:首页内容如何呈现的?这就涉及到render中的App了,如下图所示:

那么这个App对象怎么回事呢,我们打开App.vue,注意的是.vue结尾的都是vue组件。而vue的组件文件包含3个部分:

  • template: 模板部分,主要是HTML代码,用来展示页面主体结构的

  • script: js代码区域,主要是通过js代码来控制模板的数据来源和行为的

  • style: css样式部分,主要通过css样式控制模板的页面效果得

如下图所示就是一个vue组件的小案例:

此时我们可以打开App.vue,观察App.vue的代码,其中可以发现,App.vue组件的template部分内容,和我们浏览器访问的首页内容是一致的,如下图所示:

接下来我们可以简化模板部分内容,添加script部分的数据模型,删除css样式,完整代码如下:

<template><div id="app">{{message}}</div>
</template>
​
<script>
export default {data(){return {"message":"hello world"}}
}
</script>
<style>
​
</style>

保存直接,回到浏览器,我们发现首页展示效果发生了变化,如下图所示:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/167839.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

git的使用:本地git下载、sshkey的添加、github仓库创建及文件上传

一、github创建账号 即github注册账号&#xff0c;登录github官网&#xff0c;根据提示注册即可 github官网 二、git客户端下载安装 已有很多git下载安装的博文了&#xff0c;在此就不赘述 三、sshkey的生成与添加 1、sshkey的生成以及查看 // sshkey的生成命令&#xff…

OSS+CDN的资费和安全

文章目录 花费OSSCDNOSS CDN 安全OSS防盗链跨域设置CORS数据加密 CDN防盗链URL鉴权Cookie鉴权远程鉴权IP黑白名单UA黑白名单 回源服务自定义私有参数IP黑白名单数据加密 花费 OSS 存储费用 &#xff1a;0.12元/GB/月下行流量费用 &#xff1a;0.5元/GB请求费用 &#xff1a;…

java全局异常处理(springboot)

介绍&#xff1a; 在日常项目开发中&#xff0c;异常是常见的&#xff0c;但是如何更高效的处理好异常信息&#xff0c;让我们能快速定位到BUG&#xff0c;是很重要的&#xff0c;不仅能够提高我们的开发效率&#xff0c;还能让你代码看上去更舒服&#xff0c;SpringBoot的项目…

C语言你爱我么?(ZZULIOJ 1205:你爱我么?)

题目描述 LCY买个n束花准备送给她暗恋的女生&#xff0c;但是他不知道这个女生是否喜欢他。这时候一个算命先生告诉他让他查花瓣数&#xff0c;第一个花瓣表示"爱"&#xff0c;第二个花瓣表示"不爱"&#xff0c;第三个花瓣表示"爱"..... 为了使最…

某60区块链安全之未初始化的存储指针实战二学习记录

系列文章目录 文章目录 系列文章目录未初始化的存储指针实战二实验目的实验环境实验工具实验原理实验内容实验过程EXP利用 未初始化的存储指针实战二 实验目的 学会使用python3的web3模块 学会分析以太坊智能合约未初始化的存储指针漏洞 找到合约漏洞进行分析并形成利用 实验…

机器学习之自监督学习(四)MoCo系列翻译与总结(二)

MoCo中相关工作的对比分析 去噪自动编码器&#xff08;Denoising Autoencoder&#xff09;是一种用于学习数据表示的神经网络模型。它的主要目标是通过去除输入数据中的噪声&#xff0c;学习到输入数据的有用表示&#xff0c;从而提高模型对干净数据的鲁棒性。下面是对去噪自动…

Flink 常用物理分区算子(Physical Partitioning)

Flink 物理分区算子(Physical Partitioning) 在Flink中&#xff0c;常见的物理分区策略有&#xff1a;随机分配(Random)、轮询分配(Round-Robin)、重缩放(Rescale)和广播(Broadcast)。 接下来&#xff0c;我们通过源码和Demo分别了解每种物理分区算子的作用和区别。 (1) 随机…

win10安装pytorch(py39)

cuda≤11.6&#xff0c;观察控制面板 观察torch对应cuda版本 https://download.pytorch.org/whl/torch/ 安装cuda11.6.0 CUDA Toolkit Archive | NVIDIA Developer cmd输入nvcc -V 编辑国内镜像源 .condarc anaconda prompt输入 查看环境 conda env list 安装py3.9…

uniapp视频倍速播放插件,uniapp视频试看插件——sunny-video使用文档

sunny-video视频倍速播放器 组件名&#xff1a;sunny-video 效果图 img1img2img3img4 平台差异说明 目前已应用到APP&#xff08;安卓、iOS&#xff09;、微信&#xff08;小程序、H5&#xff09;其它平台未测试 安装方式 本组件符合easycom规范&#xff0c;HBuilderX 2.5…

emoji

图标的网址&#xff1a; webfx emojipedia 1.可以直接复制粘贴 2.按照其格式文本表示&#xff08;Shortcodes&#xff09; &#x1f680; &#x1f604; &#x1f92b; ✍️ &#x1f480; 还有关于通过链接引用shield.io中的图标&#xff0c;没有深究&#xff0c;不…

第六十三周周报

学习目标&#xff1a; 项目 实验和论文 学习时间&#xff1a; 2023.11.18-2023.11.24 学习产出&#xff1a; 论文 对论文进行了润色和修改 实验 1、上周DiffusionRelative的结果无法再次复现&#xff0c;新跑的FID与以前实验跑的结果相差不大&#xff0c;上周的结果应…

点大商城V2.5.3分包小程序端+小程序上传提示限制分包制作教程

这几天很多播播资源会员反馈点大商城V2.5.3小程序端上传时提示大小超限&#xff0c;官方默认单个包都不能超过2M&#xff0c;总分包不能超20M。如下图提示超了93KB&#xff0c;如果出现超的不多情况下可采用手动删除一些images目录下不使用的图片&#xff0c;只要删除超过100KB…

鸿蒙4.0开发笔记之DevEco Studio如何使用低代码开发模板进行开发的详细流程(六)

鸿蒙低代码开发 一、什么是低代码二、如何进行鸿蒙低代码开发1、 创建低代码开发工程&#xff08;方式壹&#xff09;2、已有工程则创建Visual文件&#xff08;方拾贰&#xff09; 三、低代码开发界面介绍四、低代码实现页面跳转五、低代码开发建议 一、什么是低代码 所谓低代码…

Qt+xml解析

文章目录 一、xml文件介绍1.1 XML 文件结构和基本概念1.2 XML 文件示例二、Qt读取xml文件2.1 Qt读取xml 步骤2.2 基本操作和函数 QXmlStreamReader2.3 错误处理errorString和hasError2.4 Qt读取xml实例三、实际项目一、xml文件介绍 1.1 XML 文件结构和基本概念 XML(可扩展标…

三、ts高级笔记,

文章目录 18、d.ts声明文件19、Mixin混入20、Decorator装饰器的使用21、-高级proxy拦截_Reflect元储存22、-高级写法Partial-Pick23、Readonly只读_Record套对象24、高阶写法Infer占位符25、Inter实现提取类型和倒叙递归26、object、Object、{}的区别27、localStorage封装28、协…

基于 STM32F7 和神经网络的实时人脸特征提取与匹配算法实现

本文讨论了如何使用 STM32F7 和神经网络模型来实现实时人脸特征提取与匹配算法。首先介绍了 STM32F7 的硬件和软件特点&#xff0c;然后讨论了人脸特征提取和匹配算法的基本原理。接下来&#xff0c;我们将重点讨论如何在 STM32F7 上实现基于神经网络的人脸特征提取与匹配算法&…

微机原理_3

一、单项选择题(本大题共15小题,每小题3分,共45分。在每小题给出的四个备选项中,选出一个正确的答案,请将选定的答案填涂在答题纸的相应位置上。) 在 8086 微机系统中&#xff0c;完成对指令译码操作功能的部件是&#xff08;)。 A. EU B. BIU C. SRAM D. DRAM 使计算机执行某…

【机器学习】聚类(一):原型聚类:K-means聚类

文章目录 一、实验介绍1. 算法流程2. 算法解释3. 算法特点4. 应用场景5. 注意事项 二、实验环境1. 配置虚拟环境2. 库版本介绍 三、实验内容0. 导入必要的库1. Kmeans类a. 构造函数b. 闵可夫斯基距离c. 初始化簇心d. K-means聚类e. 聚类结果可视化 2. 辅助函数3. 主函数a. 命令…

ElasticSearch之虚拟内存

查看当前Linux系统中vm.max_map_count变量的值&#xff0c;命令如下&#xff1a; sysctl vm.max_map_count执行结果的样例&#xff0c;如下&#xff1a; vm.max_map_count 65530修改参数vm.max_map_count的值&#xff0c;命令如下&#xff1a; sysctl -w vm.max_map_count2…

数组题目: 665. 非递减数列、453. 最小移动次数使数组元素相等、283. 移动零、189. 旋转数组、396. 旋转函数

665. 非递减数列 题解&#xff1a; 题目要求一个非递减数列&#xff0c;我们可以考虑需要更改的情况&#xff1a; nums {4, 2, 5} 对于这个nums&#xff0c;由于2的出现导致非递减&#xff0c;更改的情况就是要么4调到<2&#xff0c;要么2调到4,5. nums {1, 4, 2, 5} …