Vue-前端工程化

news2024/9/23 17:18:52

前后端开发模式

早期开发是前后端混合开发
即前后端代码写在一个工程中
前端写完给后端,后端发现问题反映给前端,后端就需要懂全栈
在这里插入图片描述

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

YAPI(接口在线管理平台)

一个接口管理和编辑平台
现在已经没有在维护了

在这里插入图片描述

在这里插入图片描述
还有mock服务
就是根据你编写的来生成一个网址,然后你访问的话
会进行对应数据的返回
如图
在这里插入图片描述
在这里插入图片描述

前端工程化

很多小白理解的前端工程就是这样
资源没有同一管理
js内部,代码复用性不高
在这里插入图片描述

在这里插入图片描述

环境准备

vue项目提供了一个脚手架
可以快速生成vue模板
在这里插入图片描述

首先准备nodejs的环境
找个nodejs安装博客或视频进行安装以及环境配置
在这里插入图片描述
在这里插入图片描述

Vue项目

在想创建Vue项目的文件夹下
开命令行
输入vue ui即可使用图形化界面来创建Vue工程
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
经历一系列的选择后
创建出来这个项目
再用vscode打开就行
在这里插入图片描述
这是具体每个文件对应但是干嘛的
在这里插入图片描述

在这里插入图片描述
可以通过这个文件来改端口号
在这里插入图片描述

开发流程

1.我们main里面导入App.vue组件成为App
再建一个vue对象,render是创建虚拟dom元素,并且把vue对象实例挂载到#app
而这个区域就是index.html的div区域
所以我们打开默认首页才会有页面
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

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

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

相关文章

leetcode 912.排序数组

⭐️ 题目描述 🌟 leetcode链接:排序数组 思路: 此题如果使用冒泡插入选择这些时间复杂度 O ( N 2 ) O(N^2) O(N2) 的算法会超时,使用快排 优化也过不去,因为里面有一个测试用例全是 2 即使加了三数取中也会是 O (…

Java I/O模型

目录 一、介绍I/O 二、Java中常见的I/O 1.BIO,同步阻塞IO 2.NIO,同步非阻塞IO 3.AIO,异步I/O 三、三种IO的区别 一、介绍I/O 1.I/O(Input/Output)的即为输入输出。 2.从计算机的角度来看:在冯诺伊曼…

Vector - CAPL - 诊断模块函数(连接配置)

CanTpGetMaximumReceiveLength & CanTpSetMaximumReceiveLength 功能:获取或设置该节点接收数据时可接受的最大长度;如果指示较长数据块的第一帧到达,则溢出 (FC.Ovflw) 流状态流控制帧将被发送回发送器。 注意:CANoe 支持高…

NOsql之MongoDB入门分享

目录 一、MongoDB简介 1、概念理解 2、yum安装部署 3、二进制安装部署 4、配置文件解析 二、MongoDB基本管理 1、登录操作 2、管理命令 3、用户管理 一、MongoDB简介 1、概念理解 关系型数据库(RDBMS:Relational Database Management System) MySql、Ora…

YOLO实战1.2-YOLOV5人脸检测

上个项目实现了车牌的检测和识别,这次实现一个简单的人脸检测(加口罩)项目 一.数据集 使用1200张图片进行训练 400张进行测试 二.各项指标 三.效果

SpringCloud Gateway 在微服务架构下的最佳实践

作者:徐靖峰(岛风) 前言 本文整理自云原生技术实践营广州站 Meetup 的分享,其中的经验来自于我们团队开发的阿里云 CSB 2.0 这款产品,其基于开源 SpringCloud Gateway 开发,在完全兼容开源用法的前提下&a…

云服务器开放端口

文章目录 云服务器开放端口1. 云服务器后台开放端口2. linux系统开放端口2.1 查看防火墙状态2.2 开启防火墙2.3 开放端口(以端口2000为例)2.4 重新载入防火墙2.5 查看已开放的端口2.6 重启防火墙2.7 关闭端口 云服务器开放端口 本篇文章主要以阿里云服务…

Pandas.rank() 函数详解

文章目录 Pandas.rank() 函数详解一、参数解析二、案例分享默认排名降序: ascending Falsemethod minmethod maxmethod firstmethod densena_optionbottompct True Pandas.rank() 函数详解 一、参数解析 method:指定排名时的策略。 默认值为 average&#x…

[python]conda激活环境后pip -V显示在base路径

正常激活环境后pip -V是在激活环境路径,比如 但是我的突然确为 D:\anaconda3\lib\site-packages里面,百思不得其解,后来发现是我在环境变量加了PYTHONHOME环境变量,如果你的环境变量有PYTHONHOME或者PYTHONPATH请删掉试试。 此外…

Java并发系列之二:悲观锁机制

什么是锁 在并发环境下,会出现多个线程对同一个资源进行争抢的情况,假设A线程对资源正在进行修改,此时B线程此时又对资源进行了修改,这就可能会导致数据不一致的问题。为了解决这个问题,很多编程语言引入了锁机制&…

Stephen Wolfram:机器学习与神经网络训练

Machine Learning, and the Training of Neural Nets 机器学习与神经网络训练 We’ve been talking so far about neural nets that “already know” how to do particular tasks. But what makes neural nets so useful (presumably also in brains) is that not only can t…

【前端知识】React 基础巩固(四十六)——自定义Hook的应用

React 基础巩固(四十六)——自定义Hook的应用 一、自定义Hook的应用 自定义Hook本质上只是一种函数代码逻辑的抽取,严格意义上而言,它并不算React的特性。 实现组件创建/销毁时打印日志 import React, { memo, useEffect, useState } from "react…

#P0994. [NOIP2004普及组] 花生采摘

题目描述 鲁宾逊先生有一只宠物猴,名叫多多。这天,他们两个正沿着乡间小路散步,突然发现路边的告示牌上贴着一张小小的纸条:“欢迎免费品尝我种的花生!――熊字”。 鲁宾逊先生和多多都很开心,因为花生正…

java学习路程之篇五、进阶知识、常用API、Object类、Math类、System类、BigDecimal类、包装类

文章目录 1、介绍2、Object类3、Math类4、System类5、BigDecimal类6、包装类 1、介绍 2、Object类 3、Math类 4、System类 5、BigDecimal类 6、包装类

华为云低代码平台Astro Canvas 搭建汽车展示大屏——实验指导手册

实验背景 大屏应用Astro Canvas是华为云低代码平台Astro的子服务之一,是以数据可视化为核心,以屏幕轻松编排,多屏适配可视为基础,用户可通过图形化界面轻松搭建专业水准的数据可视化大屏。例如汽车展示大屏、监控大屏、项目开发大…

【Docker】Docker安装Consul

文章目录 1. 什么是Consul2. Docker安装启动Consul 点击跳转:Docker安装MySQL、Redis、RabbitMQ、Elasticsearch、Nacos等常见服务全套(质量有保证,内容详情) 1. 什么是Consul Consul是HashiCorp公司推出的开源软件,提…

JVM面试题--类加载器

什么是类加载器,类加载器有哪些 类加载子系统,当java源代码编译为class文件之后,由他将字节码装载到运行时数据区 BootStrap ClassLoader 启动类加载器或者叫做引导类加载器,是用c实现的,嵌套在jvm内部,…

站群站点日志优化

需求: 1,每个站点的日志需要记录到请求的域名 2,日志需要自动切割保存前三天的内容,防止日志无限增长 3,日志要有利于二次分析 实现: 1,nginx需要修改两个地方 nginx配置 时间 …

JavaScript(二)函数及对象

函数 函数体中return后面不能再添加任何代码&#xff0c;因为不会执行 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0&quo…

【论文阅读24】Better Few-Shot Text Classification with Pre-trained Language Model

论文相关 论文标题&#xff1a;论文标题&#xff1a;Label prompt for multi-label text classification&#xff08;基于预训练模型对少样本进行文本分类&#xff09; 发表时间&#xff1a;2021 领域&#xff1a;多标签文本分类 发表期刊&#xff1a;ICANN&#xff08;顶级会…