前端工程化

最新推荐文章于 2024-11-11 13:33:27 发布

不会变大小写

最新推荐文章于 2024-11-11 13:33:27 发布

阅读量1.4k

点赞数 49

文章标签：前端

本文链接：https://blog.csdn.net/g40585/article/details/136465600

版权

本文介绍了企业级前端开发中的工程化实践，包括前后端分离开发模式、YAPIAPI管理平台、Vue-cli快速搭建Vue项目、ElementUI组件库的应用、VueRouter路由管理以及打包部署和Nginx的部署流程。

摘要由CSDN通过智能技术生成

前端工程化

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

前后端混合开发：沟通成本高，分工不明确，不便管理，不变维护扩展。

前后端分离开发：依据接口文档分离开发。

需求分析->接口定义->前后端并行开发->测试->联合测试

YAPI

功能强大的API管理平台，提供优雅的接口管理功能。

API接口管理
Mock服务

模拟真实接口，生成接口的模拟测试数据，用于前端功能测试。

环境准备

vue-cli

介绍： Vue-cli 是Vue官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板。
Vue-cli提供了如下功能：
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
依赖环境：NodeJS

安装NodeJS

参考资料吧

Vue项目-创建

命令行：vue create vue-project01
图形化界面：vue ui

Vue项目的目录

在这里插入图片描述

Vue项目-配置端口

在这里插入图片描述

Vue项目开发流程

app.vue解读

在这里插入图片描述

Vue组件库Element

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

快速入门

安装ElementUI组件库（在当前工程的目录下），在命令行执行指令：
```
npm install element-ui@2.15.3
```

引入ElementUI组件库

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

Vue.use(ElementUI);

加入在main.js

访问官网，复制组件代码，调整

常见组件

上官网查

Vue路由

前端路由

URL中的hash（#号）与组件之间的对应关系。

Vue路由

Vue Router介绍

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

在这里插入图片描述

Vue 使用

安装（创建Vue项目时已选择）

npm install vue-router@3.5.1

定义路由

1、定义资源路径

在这里插入图片描述

const routes = [
  {
    path: '/dept', //第一个虚拟路径
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  },
  {
    path: '/emp',//第二个
    name: 'emp',
    component: () => import('../views/tlias/EmpView.vue')
  },
  {
    path: '/',
    redirect: '/dept'//重定向，定向到dept
  }
]

2、绑定资源

在这里插入图片描述
Fassets%2F1709557709290.png&pos_id=img-94cJLiiL-1709564329355)

  <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>
              
              
              
              
  //原本是  <el-menu-item index="1-2">员工管理 </el-menu-item>
  //加上了<router-link to="/emp">    <router-link>
  //就是绑定成功了
  //哦耶!