Vue:vue的工程化

news2024/12/28 20:00:04

Vue前端工程化

前后端分离开发

即前端人员开发前端工程,将开发好的前端工程打包部署在前端服务器上

后端开发人员开发后端工程,再将后端工程打包部署在后端服务器上,这种模式称为前后端分离开发

而前后端要顺利对接的关键就是要遵循一定的开发规范

请添加图片描述

开发规范

这种开发规范定义在一份文档中,即为接口文档.

在接口文档中规定了每一个功能前端需要传递什么参数,

后端需要返回什么样的结果,请求方式,请求路径等等.

前后端只需要根据接口文档进行开发即可.

开发流程

开发项目时,具体的开发流程如下所示:

请添加图片描述

1,需求分析:

根据产品经理提供的产品原型,以及需求文档来分析需求,熟悉业务.

2,接口定义:

根据需求文档及需求梳理定义接口文档(前后端均有).

3,前后端并行开发:

前后端开发人员依据接口文档,进行并行开发,在开发时,需要严格遵循接口文档中的规范说明.

4,测试:

前后端工程功能开发完毕后,自行测试.前端在测试时,需要通过模拟数据测试.

5,前后端联调测试:

前后端都开发完毕后,进行联调测试.

Yapi

一个高效,易用,功能强大的api管理平台,旨在为开发,产品,测试人员提供更加优雅的接口管理服务.

1,api接口管理:管理项目的api接口

2,mock测试数据:自动生成mock数据(模拟数据),供前端人员进行功能测试.

前端工程化

前端开发存在着大量不同的技术栈和业务实现方式,存在很多的弊端

因此,需要一个前端脚手架来使前端开发工程化.

Vue-cli

Vue官方提供的一个脚手架,用于快速生成一个工程化的Vue模版

Vue-cli功能

1,同一目录结构

2,本地调试

3,热部署

4,单元测试

5,集成打包上线

依赖环境:NodeJs

NodeJs

一个基于Chrome V8引擎的JavaScript运行环境,是一个让js运行在服务端的开发平台,NodeJs对JS有巨大的提升,对于前端来说,就是js代码的运行环境,类似于jdk之于java.

Vue项目

Vue创建

打开ui界面

vue ui

打开项目管理器

请添加图片描述

创建项目

请添加图片描述
请添加图片描述
请添加图片描述

目录结构

node_modules
//存放项目依赖包
public
//存放项目静态资源文件
src
//存放项目的源代码
package.json
//模块基本信息,项目开发所需模块,版本信息
vue.config.js
//保存vue的配置文件,如:代理,端口配置等
src目录

请添加图片描述

assets
//静态资源
components
//可重用的组件
router
//路由配置
views
//视图组件(页面)
App.vue
//入口页面(根组件)
main.js
//入口js文件

项目启动

npm run serve

ElementUI

一套基于Vue2.0的桌面端组件库

组件库安装
npm install element-ui@2.15.3
引入ElementUI组件库
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
使用
Table 表格
Pagination 分页
Dialog 对话框
Form 表单
.......

Vue路由

Vue Router是Vue的官方路由

前端路由:

URL中的hash地址与组件之间的对应关系

组成:
VueRouter:

路由器类,根据路由请求在路由视图中动态渲染选中的组件,路由表中就是路径和视图的对应关系.

router-link:

请求链接组件,浏览器会解析成

<a>
router-view:

动态视图组件,用来渲染展示与路由路径对应的组件

请添加图片描述

打包部署

npm run build

NGINX

一个轻量级的前端服务器,占用内存少,并发能力强.

项目

部门加员工管理系统:

主页面插入组件

<template>
    <el-container>
        <el-header>智能学习辅助系统</el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu :default-openeds="['1']">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
                        <el-menu-item-group>
                            <router-link to="/dept">
                                部门管理
                            </router-link>
                            <hr>
                            <router-link to="/emp">
                                员工管理
                            </router-link>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <el-table :data="tableData">
                    <el-table-column prop="id" label="id" width="180">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="180">
                    </el-table-column>
                    <el-table-column prop="gender" label="性别" width="180">
                        <scope slot-scope="scope">
                            {{ scope.row.gender == 1 ? "男" : "女" }}
                        </scope>
                    </el-table-column>
                    <el-table-column prop="job" label="职位" width="180">
                    </el-table-column>
                    <el-table-column prop="entrydate" label="日期" width="180">
                    </el-table-column>
                    <el-table-column prop="updatetime" label="最后修改时间" width="180">
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-container>
</template>

设置样式

<style>
.el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
}

.el-aside {
    color: #333;
}
</style>

获取后端数据返回给页面

<script>
import axios from 'axios';

export default {
    data() {
        const tableData = [];
        return {
            tableData: Array(10).fill(tableData)
        }
    },
    methods: {

    },
    mounted() {
        axios.get("http://yapi.eehp.cn/mock/61/user/findAll").then((result) => {
            this.tableData = result.data.data;
        })
    }
}
</script>

路由跳转部门管理页面

<template>
    <el-container>
        <el-header>智能学习辅助系统</el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu :default-openeds="['1']">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
                        <el-menu-item-group>
                            <router-link to="/dept">
                                部门管理
                            </router-link>
                            <hr>
                            <router-link to="/emp">
                                员工管理
                            </router-link>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <p>成啦兄弟!</p>
            </el-main>
        </el-container>
    </el-container>
</template>
<style>
.el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
}

.el-aside {
    color: #333;
}
</style>
<script>
import axios from 'axios';

export default {
    data() {
        const tableData = [];
        return {
            tableData: Array(10).fill(tableData)
        }
    },
    methods: {

    },
    mounted() {
        axios.get("http://yapi.eehp.cn/mock/61/user/findAll").then((result) => {
            this.tableData = result.data.data;
        })
    }
}
</script>

路由配置

初始重定向到员工管理页面

{
    path: '/',
    name: 'home',
    redirect:"../views/ContainerView.vue"
  },
  {
    path: '/emp',
    name: 'emp',
    component: () =>import('../views/ContainerView.vue')
  },
  {
    path: '/dept',
    name: 'dept',
    component: () =>import('../views/DeptView.vue')
  },

刷新路由

在app.vue中刷新路由

<router-view></router-view>

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

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

相关文章

STC8H8K64U I2C主机模式相关寄存器

STC8H8K64U I2C主机模式相关寄存器

STC8H8K64U I2C主机模式相关寄存器 STC8H8K64U-TSSOP20 I2CCFG I2C配置寄存器 I2CMSCR I2C主机控制寄存器 I2CMSST I2C主机状态寄存器 I2CMSAUX I2C主机辅助控制寄存器 I2CTXD I2C数据发送寄存器 I2CRXD I2C数据接收寄存器 I2CCFG I2C配置寄存器 B7ENI2C ENI2C&#xff1a…
阅读更多...
【题解】NowCoder DP4 最小花费爬楼梯

【题解】NowCoder DP4 最小花费爬楼梯

题目来源&#xff1a;牛客 DP4 最小花费爬楼梯 题目描述&#xff1a; 给定一个整数数组 cost &#xff0c; 其中 cost[i] 是从楼梯第 i 个台阶向上爬需要支付的费用&#xff0c;下标从 0 开始。一旦你支付此费用&#xff0c;即可选择向上爬一个或者两个台阶。 你可以选择从…
阅读更多...
Bayes判别示例数据：鸢尾花数据集

Bayes判别示例数据：鸢尾花数据集

使用Bayes判别的R语言实例通常涉及使用朴素贝叶斯分类器。朴素贝叶斯分类器是一种简单的概率分类器&#xff0c;基于贝叶斯定理和特征之间的独立性假设。在R中&#xff0c;我们可以使用e1071包中的naiveBayes函数来实现这一算法。下面&#xff0c;我将通过一个简单的示例展示如…
阅读更多...
多目标果蝇算法及其MATLAB实现

多目标果蝇算法及其MATLAB实现

果蝇算法最早的文献是由台湾华夏科技大学的潘文超教授于2011年提出来的。该算法是基于果蝇觅食行为的仿生学原理而提出的一种新兴群体智能优化算法&#xff0c;被称为果蝇优化算法(Fruit Fly Optimization Algorithm, FOA)。通过模拟果蝇利用敏锐的嗅觉和视觉进行捕食的过程&am…
阅读更多...
JTS：Java Topology Suit

JTS：Java Topology Suit

接口文档：org.locationtech.jts:jts-core 1.19.0 API。 开发文档：JTS | Documentation。 概述 JTS提供了平面线性几何（planar and linear geometry）与相关的基础几何处理函数（a set of fundamental geometric functions.）。 JTS遵循OGC发布的简单几何规范（Simple Featu…
阅读更多...
docker 基本命令

docker 基本命令

目录 一、docker 镜像操作命令 1.1.查询软件镜像 1.2.docker pull&#xff1a;下载镜像 1.3.docker push&#xff1a;上传镜像 1.4.docker images&#xff1a;查看本地镜像 1.5.docker inspect &#xff1a;获取镜像详细信息 1.6.docker tag&#xff1a;添加镜像标签 …
阅读更多...
attempt to compare nil with number -- 黑马点评出现问题

attempt to compare nil with number -- 黑马点评出现问题

问题情况 : 主要问题 : 调用lua执行redis时&#xff0c;有一个值会接受nil&#xff08;因为redis中没有该数据&#xff09;或者数值&#xff0c;当该值为nil时执行报错&#xff0c;因为会用到将该值与其他数字比较&#xff0c;故报错attempt to compare nil with number 当然…
阅读更多...
【uniapp】引入uni-ui组件库

【uniapp】引入uni-ui组件库

&#xff08;1&#xff09;新建项目的时候选择 uni-ui项目 &#xff08;2&#xff09;已经创建好的项目去官网单独安装 跳转单独安装组件 https://uniapp.dcloud.net.cn/component/uniui/quickstart.html#%E9%80%9A%E8%BF%87-uni-modules-%E5%8D%95%E7%8B%AC%E5%AE%89%E8%A3%8…
阅读更多...
详细分析mysqlslap的基本知识 | 压力测试（附Demo）

详细分析mysqlslap的基本知识 | 压力测试（附Demo）

目录 前言1. 基本知识2. 参数解读2.1 auto-generate-sql2.2 only-print2.3 iterations2.4 并发处理参数 前言 对数据库进行压力测试&#xff0c;对此补充这方面的详细知识点 1. 基本知识 mysqlslap 是 MySQL 自带的用于模拟数据库负载的压力测试工具 可以模拟多个客户端并发…
阅读更多...
基于51单片机的矩阵按键扫描的proteus仿真

基于51单片机的矩阵按键扫描的proteus仿真

文章目录 一、按键按键按键消抖 二、独立按键仿真图仿真程序 三、矩阵按键仿真图仿真程序 四、总结 一、按键 按键 按键通常指的是电子设备上的一种输入装置&#xff0c;用于在按下时发送信号&#xff0c;以便设备执行相应的操作。按键可以分为独立按键和矩阵按键两种类型。 …
阅读更多...
10.Java集合汇总

10.Java集合汇总

文章目录 1. Java集合概述1.1 Java集合框架概述1.2 Collection接口继承树1.3 Map接口继承树 2. Collection接口2.1 Collection接口方法 3 Iterator迭代器接口3.1 Iterator接口的方法3.2 foreach循环 4 List接口4.1 List接口方法4.1 ArrayList4.2 LinkedList4.3 Vector4.4 面试题…
阅读更多...
free 命令示例

free 命令示例

目录 ⛳️推荐 前言 Linux 中如何使用 free 命令 1、以人类可读的形式显示信息 2、连续显示统计数据 3、定义显示统计数据的次数 4、指定输出数据类型 5、获取物理内存和交换内存的总和 总结 ⛳️推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&am…
阅读更多...
[MYSQL索引优化] 分页查询优化

[MYSQL索引优化] 分页查询优化

这里一共介绍两种常见的分页索引优化技巧,let go! 示例表: CREATE TABLE t_product (id int(0) NOT NULL,pname varchar(200) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL,price double(7, 2) NULL DEFAULT 0.00,promoteSales varchar(200) CHARA…
阅读更多...
5分钟搞懂词向量生成技术：Word2Vec

5分钟搞懂词向量生成技术：Word2Vec

大家好啊&#xff0c;我是董董灿。 今天我们来简单聊一个在自然语言处理&#xff08;NLP&#xff09;中非常有用的技术——Word2Vec。 之前曾经写过一些关于文本处理的基础知识&#xff0c;包括判断两个文本是否相似&#xff0c;可以使用余弦相似度&#xff0c;但在此之前&am…
阅读更多...
C++多态(个人笔记)

C++多态(个人笔记)

C多态 1.多态的定义以及实现1.1多态的构成条件1.2虚函数1.3虚函数的重写1.4override和final1.5函数重载&#xff0c;覆盖&#xff08;重写&#xff09;&#xff0c;隐藏&#xff08;重定义&#xff09;区别 2.抽象类2.1接口继承和实现继承的区别 3.多态原理3.1虚函数表3.2多态的…
阅读更多...
PHP定期给自己网站目录做个特征镜像供快速对比

PHP定期给自己网站目录做个特征镜像供快速对比

效果图 上代码&#xff1a; <style> h1{font-size:24px;line-height:180%;font-weight:600;margin:1px 2px;color:#0180cf;} h2{font-size:20px;line-height:140%;font-weight:600;margin:2px 4px;color:green;} h3{font-size:16px;line-height:140%;font-weight:600;m…
阅读更多...
冯喜运：4.24-4.25黄金原油双双跳水、今日走势分析

冯喜运：4.24-4.25黄金原油双双跳水、今日走势分析

【黄金消息面解析】&#xff1a;随着全球经济不确定性继续影响市场&#xff0c;黄金价格面临关键时刻。在最近的下跌之后&#xff0c;黄金价格正在测试关键支撑水平&#xff0c;投资者密切关注美国经济数据&#xff0c;以了解美联储的利率政策路径。让我们深入探讨推动黄金价格…
阅读更多...
密码错误冻结时间，强制修改密码时间，密码强度，首次登录是否修改密码

密码错误冻结时间，强制修改密码时间，密码强度，首次登录是否修改密码

新建单表&#xff0c;各种字段&#xff0c;项目启动时加载到redis缓存中。问题&#xff1a;修改数据后&#xff0c;缓存中数据未修改&#xff1f;是否设置超时时间&#xff0c;每次登录的时候判断缓存中有没有&#xff0c;没有新增一次&#xff0c;有了就用缓存中数据&#xff…
阅读更多...
牛客NC179 长度为 K 的重复字符子串【simple 哈希，滑动窗口 C++、Java、Go、PHP】

牛客NC179 长度为 K 的重复字符子串【simple 哈希，滑动窗口 C++、Java、Go、PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/eced9a8a4b6c42b79c95ae5625e1d5fd 思路 哈希统计每个字符出现的次数。没在窗口内的字符要删除参考答案C class Solution {public:/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c…
阅读更多...
‍ 太空网络攻击

‍ 太空网络攻击

&#x1f9d1;‍&#x1f680; 尤里-加加林成为征服外太空的第一人。他在 1961 年 4 月 12 日的飞行有力地推动了全世界的科技发展。 有趣的事实是&#xff1a;苏联所有首次太空发射&#xff08;包括加加林的飞行&#xff09;的弹道计算都是在苏联第一个计算机中心的电子计算机…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023