初识前端工程化

news2024/11/16 21:22:34

前端工程化

    • 一、接口文档管理 YAPI
    • 二、前端工程化
      • 1、前端工程化介绍
      • 2、环境准备
    • 三、Vue 项目创建&简介
      • 1、Vue 项目创建
      • 2、Vue 项目简介
      • 3、运行 Vue 项目
    • 四、Vue 组件库 Element UI
      • 1、Elment UI 简介
      • 2、Element UI 入门
    • 五、Vue 项目中使用 axios
    • 六、Vue 路由
      • 1、Vue 路由简介
      • 2、Vue 路由使用
    • 七、Vue 打包部署
      • 1、前端工程打包
      • 2、通过nginx服务器发布前端工程

一、接口文档管理 YAPI

在项目开发中,主要存在两种开发模式,一种是前后端混合开发,另一种是前后端分离开发。由于混合开发沟通成本较高、不便管理、且项目不利于维护和拓展,所以目前主流的开发模式是前后端分离开发:

我们将原先的工程分为前端工程和后端工程这2个工程,然后前端工程交给专业的前端人员开发,后端工程交给专业的后端人员开发。前端页面需要数据,可以通过发送异步请求,从后台工程获取。

在前后端分离的开发模式中,由于前端和后端是分离开发的,所以在数据交互时,前端工程师需要知道后台返回的数据格式,后端工程师需要知道前端需要的数据格式,因此需要前后台统一套规范,这就是接口文档。接口文档的内容通常是后台开发者根据产品经理提供的产品原型和需求文档所撰写出来的。

下面介绍一款高效、易用、功能强大的 api 管理平台——YAPI
YAPI 官网地址:https://yapi.pro/

两大核心功能:

  1. API接口管理:根据需求撰写接口,包括接口的地址,参数,响应等等信息。
  2. Mock服务:模拟真实接口,生成接口的模拟测试数据,用于前端的测试。

二、前端工程化

1、前端工程化介绍

在工程化之前,我们再进行前端开发时,当我们需要使用一些资源时,例如:vue.js,和axios.js文件,都是直接在工程中导入的。这就导致每次开发都是从零开始,比较麻烦,js、图片等资源没有规范化的存储目录,没有统一的标准,不方便维护,并且,多个页面中的组件共用性不好。

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

  1. 模块化:将js和css等,做成一个个可复用模块
  2. 组件化:我们将UI组件,css样式,js行为封装成一个个的组件,便于管理
  3. 规范化:我们提供一套标准的规范的目录接口和编码规范,所有开发人员遵循这套规范
  4. 自动化:项目的构建,测试,部署全部都是自动完成

所以,所谓的前端工程化,说白了就是把前端开发所需要的工具、技术、流程、经验进行规范化和标准化。

2、环境准备

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

  1. 统一的目录结构
  2. 本地调试
  3. 热部署
  4. 单元测试
  5. 集成打包上线

(1)按照 NodeJs

运行Vue-cli,需要依赖NodeJS,NodeJS是前端工程化依赖的环境。

(2)配置 npm 全局安装路径

管理员身份运行命令行:

npm config set prefix "D:\NodeJs"

注:"D:\NodeJs"为node的安装路径

(3)切换 npm 淘宝镜像

使用管理员身份运行命令行:

npm config set registry https://registry.npmmirror.com

(4)安装 Vue-cli

使用管理员身份运行命令行:

npm install -g @vue/cli


出现上述问题可使用如下命令解决:

set-ExecutionPolicy RemoteSigned

在 Windows 中,默认情况下,PowerShell 的脚本执行策略是 Restricted(限制)。这意味着系统只允许执行由本地计算机管理员签名的脚本,其他脚本都会被阻止执行,以确保系统安全。

Set-ExecutionPolicy RemoteSigned 将执行策略设置为 RemoteSigned(远程签名)。这意味着本地计算机上编写的脚本可以自由执行,但是从远程下载的脚本必须具有数字签名,以确保脚本的完整性和来源可信。

三、Vue 项目创建&简介

1、Vue 项目创建

Vue-cli提供了如下2种方式创建vue项目:

(1)命令行:直接通过命令行方式创建vue项目

vue create 项目名

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

vue ui

创建完成:

2、Vue 项目简介

打开项目目录:

3、运行 Vue 项目

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

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    port:9090 // 端口号
  }
})

运行方式一:命令行

npm run serve

运行方式二:npm 脚本窗口按钮

四、Vue 组件库 Element UI

1、Elment UI 简介

  • Element:是饿了么团队研发的,一套为开发者、设计师和产品经理准备的基于 Vue2.0 的桌面端组件库。
  • 组件:组成网页的部件,例如超链接、按钮、图片、表格、表单、分页条等等。
  • 官网:https://element.eleme.cn/#/zh-CN

2、Element UI 入门

(1)安装ElementUI组件库(在当前工程的目录下),在命令行执行指令:

npm install element-ui@2.15.3 

(2)在main.js这个入口js文件中引入ElementUI的组件库

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

(3)创建 Vue 组件,访问官网,复制组件代码,调整



对于其他的 Element UI 组件的使用也是和上面一样,最重要的还是阅读 Element UI 给出的官方文档进行调整:

https://element.eleme.cn/#/zh-CN

五、Vue 项目中使用 axios

在vue项目中,对于 axios 的使用,分为如下2步:

  1. 安装 axios: npm install axios
  2. 安装完成后重启项目
  3. 需要使用 axios 时,导入axios: import axios from 'axios';


六、Vue 路由

1、Vue 路由简介

Vue 路由也就是前端路由:URL中的hash(#号之后的内容)与组件之间的对应关系。如下图所示:

配置路由之后,当我们点击左侧导航栏时,浏览器的地址栏会发生变化,路由自动更新显示与url所对应的vue组件。

而我们vue官方提供了路由插件Vue Router,其主要组成如下:

  • VueRouter:路由器类,根据路由请求在路由视图中动态渲染选中的组件
  • <router-link>:请求链接组件,浏览器会解析成<a>
  • <router-view>:动态视图组件,用来渲染展示与路由路径对应的组件


原理:

  1. 首先VueRouter根据我们配置的url的hash片段和路由的组件关系去维护一张路由表;

  2. 然后我们页面提供一个<router-link>组件,用户点击,发出路由请求;

  3. 接着我们的VueRouter根据路由请求,在路由表中找到对应的vue组件;

  4. 最后VueRouter会切换<router-view>中的组件,从而进行视图的更新

2、Vue 路由使用

(1)首先我们需要先安装vue-router插件:

npm install vue-router@3.5.1

因为当初我们再创建项目时,已经勾选了路由功能,已经安装好了,所以可以省略此步骤。
(2)在src/router/index.js文件中定义路由表:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: 'dept'
  },
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  },
  {
    path: '/emp',
    name: 'emp',
    component: () => import('../views/tlias/EmpView.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

(3)在main.js中,引入了router功能:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

(4)添加路由链接组件

<el-menu-item index="1-1">
    <router-link to="/dept">部门管理</router-link>
</el-menu-item>
<el-menu-item index="1-2">
    <router-link to="/emp">员工管理</router-link>
</el-menu-item>

(5)添加路由展示组件

<template>
  <div>
    <!-- 添加路由展示组件 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  components: { },
}
</script>

<style>
</style>

七、Vue 打包部署

前端工程开发好了,我们可以通过以下两步进行发布:

1、前端工程打包

2、通过nginx服务器发布前端工程

(1)Ngix 简介
Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少,并发能力强,在各大型互联网公司都有非常广泛的使用。

Nginx 下载地址:https://nginx.org/en/download.html

当然除了部署静态资源, Nginx 功能还有很多,如反向代理、负载均衡等……

(2)部署


nginx服务器的端口号是80,所以启动成功之后,我们浏览器直接访 http://localhost:80 即可,其中80端口可以省略:

PS:如果80端口被占用,我们需要通过conf/nginx.conf配置文件来修改端口号:

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

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

相关文章

一种基于优化信息频带的旋转机械故障诊断方法(MATLAB)

特征提取是滚动轴承故障诊断及状态监测的关键&#xff0c;直接关系到轴承状态预示及故障识别的准确性&#xff0c;也是轴承故障诊断中的研究热点。考虑到轴承故障冲击会导致振动信号的形态改变&#xff0c;进而引起相关统计参数的变化&#xff0c;所以通过振动信号计算的统计量…

上海高考志愿填报小程序开发的主要功能

6月毕业季&#xff0c;高考学子刚经历了激烈的高考角逐&#xff0c;又迎来了志愿填报的大关。面对影响一生的高考志愿&#xff0c;如何填报显得尤为重要&#xff0c;面对广大学子的填报需求&#xff0c;上海高考志愿填报小程序为高考学子带来了福音。 一&#xff0e; 上海高考…

低空经济:新蓝海的启航与eVTOL动力系统测试的前瞻探索

引言&#xff1a;低空经济的新时代篇章 ​在2023年的全国两会上&#xff0c;“低空经济”首次跃然于政府工作报告之中&#xff0c;标志着这一新兴产业正式步入国家发展战略的核心舞台。工业和信息化部、科学技术部、财政部与中国民用航空局联合发布的《通用航空装备创新应用实…

小区物业管理收费系统源码小程序

便捷、透明、智能化的新体验 一款基于FastAdminUniApp开发的一款物业收费管理小程序。包含房产管理、收费标准、家属管理、抄表管理、在线缴费、业主公告、统计报表、业主投票、可视化大屏等功能。为物业量身打造的小区收费管理系统&#xff0c;贴合物业工作场景&#xff0c;轻…

【微前端-Single-SPA、qiankun的基本原理和使用】

背景 在实际项目中&#xff0c;随着日常跌倒导致的必然墒增&#xff0c;项目会越来越冗余不好维护&#xff0c;而且有时候一个项目会使用的其他团队的功能&#xff0c;这种跨团队不好维护和管理等等问题&#xff0c;所以基于解决这些问题&#xff0c;出现了微前端的解决方案。…

FFmpeg教程-二-代码实现录音

目录 一&#xff0c;实现步骤 二&#xff0c;具体实现 1&#xff0c;注册设备 2&#xff0c;获取输入格式对象 3&#xff0c;打开设备 4&#xff0c;采集数据 一&#xff0c;实现步骤 二&#xff0c;具体实现 1&#xff0c;注册设备 // 初始化libavdevice并注册所有输入…

Java版本Spring Cloud+SpringBoot b2b2c:Java商城实现一件代发设置及多商家直播带货商城搭建

一、产品简介 我们的JAVA版多商家入驻直播带货商城系统是一款全*面的电子商务平台&#xff0c;它允许商家和消费者在一个集成的环境中进行互动。系统采用先进的JAVA语言开发&#xff0c;提供多商家入驻、直播带货、B2B2C等多种功能&#xff0c;帮助用户实现线上线下的无缝对接…

M Farm RPG Assets Pack(农场RPG资源包)

🌟塞尔达的开场动画:风鱼之歌风格!🌟 像素参考:20*20 字体和声音不包括在内 资产包括: 1名身体部位分离的玩家和4个方向动画: 闲逛|散步|跑步|持有物品|使用工具|拉起|浇水 6个带有4个方向动画的工具 斧头|镐|喙|锄头|水壶|篮子 4个NPC,有4个方向动画: 闲逛|散步 �…

理解IP地址与域名:访问网站的基石

在互联网的世界里&#xff0c;每一次点击、每一次浏览都伴随着一个神秘的数字串——IP地址&#xff0c;以及一个易于记忆的字符串——域名。对于普通用户而言&#xff0c;这两者可能只是浏览网页时的“幕后英雄”&#xff0c;但实际上&#xff0c;它们构成了我们访问网站的基石…

人工神经网络是什么,其应用有哪些?

人工神经网络是什么&#xff0c;其应用有哪些&#xff1f; 当你阅读这篇文章时&#xff0c;你身体的哪个器官正在考虑它&#xff1f;当然是大脑&#xff01;但是你知道大脑是如何工作的吗&#xff1f;嗯&#xff0c;它有神经元或神经细胞&#xff0c;它们是大脑和神经系统的主要…

STM32HAL库 -- RS485 开发板通信(速记版)

在本章中&#xff0c; 我们将使用 STM32F429的串口 2 来实现两块开发板之间的 485 通信(半双工)。 RS485 简介 485&#xff08;一般称作 RS485/EIA-485&#xff09;隶属于 OSI 模型物理层&#xff0c;是串行通讯的一种。电气特性规定为 2 线&#xff0c;半双工&#xff0c;多…

java-数据结构与算法-02-数据结构-02-链表

文章目录 1. 概述2. 单向链表3. 单向链表&#xff08;带哨兵&#xff09;4. 双向链表&#xff08;带哨兵&#xff09;5. 环形链表&#xff08;带哨兵&#xff09;6. 习题E01. 反转单向链表-Leetcode 206E02. 根据值删除节点-Leetcode 203E03. 两数相加-Leetcode 2E04. 删除倒数…

匠心铸就服务品质,全视通技术服务获盘锦市中医医院高度认可

一声表扬&#xff0c;万分肯定 寥寥数语&#xff0c;情意深重 承载着荣誉 道出了心声 传达了谢意 倾注了期盼 字里行间的内容 是对全视通技术服务的高度认可 记录了全视通与盘锦市中医医院之间的双向奔赴 盘锦市中医医院表扬信是对全视通技术服务团队工作的高度认可&am…

JAVA进阶学习09

文章目录 一、双列集合Map1.1 双列集合介绍1.2 双列集合Map常见API1.3 Map集合遍历方式1.3.1 通过集合的全部键来遍历集合1.3.2 Map集合遍历方式21.3.3 Map集合遍历方式3 二、Map集合的实现类2.1 HashMap类2.2 LinkedHashMap2.3 TreeMap 三、可变参数四、Collections类五、集合…

【数据分享】《中国文化及相关产业统计年鉴》2013-2022

而今天要免费分享的数据就是2013-2022年间出版的《中国文化及相关产业统计年鉴》并以多格式提供免费下载。&#xff08;无需分享朋友圈即可获取&#xff09; 数据介绍 在过去的十年里&#xff0c;中国的文化及文化产业经历了翻天覆地的变化。随着《中国文化及相关产业统计年鉴…

ETO外汇:日元技术分析,美元/日元、欧元/日元、英镑/日元未来走势如何?

摘要&#xff1a; 根据近期的市场分析&#xff0c;美元/日元、欧元/日元和英镑/日元这三组货币对在未来的走势将受到多方面因素的影响。本文将从技术角度对每一组货币对进行详细分析&#xff0c;帮助投资者了解可能的支撑和阻力位&#xff0c;以及未来的走势预期。通过对关键技…

Python高精度浮点运算库之mpmath使用详解

概要 在科学计算和工程应用中,精确的数学计算至关重要。Python 作为一种灵活而强大的编程语言,提供了多种数学库,其中 mpmath 库因其高精度浮点运算和丰富的数学函数支持而备受关注。mpmath 库不仅适用于基本的高精度计算,还支持复数运算、矩阵运算和特殊函数计算,广泛应…

iptables(12)实际应用举例:策略路由、iptables转发、TPROXY

简介 前面的文章中我们已经介绍过iptables的基本原理,表、链的基本操作,匹配条件、扩展模块、自定义链以及网络防火墙、NAT等基本配置及原理。 这篇文章将以实际应用出发,列举一个iptables的综合配置使用案例,将我们前面所涉及到的功能集合起来,形成一个完整的配置范例。…

前端vue自定义鼠标指针的图标并且单击鼠标时点击的地方会出现烟花特效

//实现在某一个div内鼠标的指针形状呈自定义的图标 。&#xff08;也可以全局定义&#xff0c;当前时在某一个div内的实例&#xff09; //DOM <div class"firework-container" click"createFirework"></div> //js部分 const createFirework …

lodash.js 工具库

lodash 是什么? Lodash是一个流行的JavaScript实用工具库,提供了许多高效、高兼容性的工具函数,能够方便地处理集合、字符串、数值、函数等多种数据类型,大大提高工作效率。 lodash官网 文档参见:Lodash Documentation lodash 在Vue中怎么使用? 1、首先安装 lodash np…