当前位置: 首页 > article >正文

嵌入式学习 D31:系统编程--Framebuf帧缓冲

(1)framebuf帧缓冲  :linux提供的显示设备驱动的接口。

设备路径 : 设备/dev/fb0

*        分辨率:像素点是w * h。
每个像素点色深 RGB:0-255  红绿蓝各3字节(byte)即可描述色深。
访问的显存默认左上角为坐标原点。

*        xres yres真实分辨率
        xres_vitrual虚拟分辨率:

        一般可访问显存小一些,即虚拟分辨率,真实分辨率就是打开设置查看得到的分辨率。

*        每个像素点色深RGB用三字节描述,即3*8bit,用十六进制就是0x00rrggbb,具体颜色对应16进制可以搜索w3cschool,在里面的htmlyanse查看。

*        文件解压:tar -xvf 压缩包.tar.xz

*        ctrl alt f3文字终端,没有图形界面。
ctrl alt f1图形界面,伪终端即图形界面打开的终端。
ctrl alt鼠标出现
直接操作硬件运行时sudo ./out

*        简单的操作像素点,比如画直线等,可以通过简单的循环控制xy坐标就能实现,但汉字图像等需要的像素点坐标就比较复杂了。

*        文字可以通过字模工具获取要操作的像素点坐标数组,也可以通过字库进行操作,最原始的图像是位图,文件信息中前54字节是头信息,包含图像的大小等参数,剩下的就是连续了BGRBGR像素点数据,我们可以循环取三字节,再倒序就得到RGB参数了,然后输出。

(2)利用帧缓存点亮第一个点。

*        步骤:open打开设备-》ioctl获取屏幕信息-》mmap映射:获得显存 -》draw根据坐标操作像素点 -》unmap显存回收

#include <stdio.h>   
#include <stdlib.h>   
#include <string.h>   
#include <unistd.h>   
#include <fcntl.h>   
#include <sys/ioctl.h>   
#include <sys/mman.h>   
#include <linux/fb.h>   
#include <math.h>
   
// 颜色定义   
#define RGB888_FMT 32   
#define RGB565_FMT 16   
#define WHITE     0x00FFFFFF   
#define BLACK     0x00000000   
#define RED       0x00FF0000   
#define GREEN     0x0000FF00   
#define BLUE      0x000000FF   
#define YELLOW    0x00FFFF00   
#define PURPLE    0x00FF00FF   
#define CYAN      0x0000FFFF
   
// 全局变量   
struct fb_var_screeninfo vinf;   
void *pmem = NULL;
   
// 函数声明   

#ifndef __FRAMEBUFFER_H__
#define __FRAMEBUFFER_H__

#include "utf.h"

#define RGB888_FMT 32
#define RGB565_FMT 16


extern int init_fb(char *devname);
extern void draw_point(int x,int y, unsigned int col);
extern void uninit_fb(int fd);
extern void draw_clear(unsigned int col);

extern void draw_h_line(int x, int y, int len, unsigned int col);
extern void draw_s_line(int x, int y, int len, unsigned int col);
extern void draw_rectangle(int x, int y, int w, int h, unsigned int col);
extern void draw_x_line(int x1, int y1, int x2, int y2, unsigned int col);
extern void draw_circle(int x0, int y0, int r, unsigned int col);
extern void draw_bmp(int x, int y, char *picname, int w, int h);
extern void draw_word(int x, int y, unsigned char *word, int w, int h, unsigned int col);
extern int draw_utf8(UTF8_INFO *info, int x, int y, char* zi, unsigned int col, unsigned int col1);
extern int draw_utf8_str(UTF8_INFO *info, int arg_x, int arg_y,  char* zi, unsigned int col, unsigned int col1);

#endif

#include "framebuffer.h"
#include <linux/fb.h>
#include <stdlib.h>
#include <sys/mman.h>
#include <sys/ioctl.h>
#include <unistd.h>
#include <fcntl.h>
#include <sys/types.h>
#include <sys/stat.h>
#include <stdio.h>
#include <math.h>void *pmem;
struct fb_var_screeninfo vinf;int init_fb(char *devname)
{//1. 打开显示设备int fd = open(devname, O_RDWR);	if (-1 == fd){perror("fail open fb");return -1;}//2、获取显示设备相关参数 分辨率 位深度int ret = ioctl(fd, FBIOGET_VSCREENINFO, &vinf);if (-1 ==ret){perror("fail ioctl");return -1;}printf("xres = %d, yres = %d\n", vinf.xres, vinf.yres);printf("xres_virtual = %d, yres_virtual = %d\n", vinf.xres_virtual, vinf.yres_virtual);printf("bits_per_pixel : %d\n", vinf.bits_per_pixel);size_t len = vinf.xres_virtual * vinf.yres_virtual * vinf.bits_per_pixel/8;//3, 建立显存和用户空间的映射关系pmem = mmap(NULL, len, PROT_READ|PROT_WRITE, MAP_SHARED, fd, 0);if ((void *)-1 == pmem){perror("fail mmap");return -1;}return fd;
}void draw_point(int x, int y, unsigned int col)
{if (x >= vinf.xres || y >= vinf.yres){return ;}if (vinf.bits_per_pixel == RGB888_FMT){unsigned int *p = pmem;*(p + y * vinf.xres_virtual + x) = col;}else if (vinf.bits_per_pixel == RGB565_FMT){unsigned short *p  = pmem;	*(p + y * vinf.xres_virtual + x) = col;}return ;
}void uninit_fb(int fd)
{size_t len = vinf.xres_virtual * vinf.yres_virtual * vinf.bits_per_pixel/8;munmap(pmem, len);close(fd);
}void draw_clear(unsigned int col)
{for (int j = 0; j < vinf.xres; j++){for (int i = 0; i < vinf.yres; i++){draw_point(i, j, col);}}
}void draw_h_line(int x, int y, int len, unsigned int col)
{for (int i = x; i < x+len; i++){draw_point(i, y, col);}
}
void draw_s_line(int x, int y, int len, unsigned int col)
{for (int i = y; i < y+len; i++){draw_point(x, i, col);}
}void draw_rectangle(int x, int y, int w, int h, unsigned int col)
{draw_h_line(x, y, w, col);draw_s_line(x, y, h, col);draw_s_line(x+w, y, h, col);draw_h_line(x, y+h, w, col);
}void draw_x_line(int x1, int y1, int x2, int y2, unsigned int col)
{int x = 0;int y = 0;if (x1 == x2){if (y2 > y1){draw_s_line(x1, y1, y2-y1, col);}else{draw_s_line(x2, y2, y1-y2, col);		}}double k = (double)(y2-y1)/(double)(x2-x1);double b = y1 - k*x1;for (int x = (x1 > x2 ? x2 : x1); x <= (x1 > x2 ? x1 : x2); x++){y = x * k + b;draw_point(x, y, col);}return ;
}void draw_circle(int x0, int y0, int r, unsigned int col)
{int x = 0;int y = 0;for (double si = 0; si <= 360; si+=0.01){x = r * cos(2 * 3.14159/360 *si) + x0;y = r * sin(2 * 3.14159/360 *si) + y0;draw_point(x, y, col);draw_point(x-1, y, col);draw_point(x+1, y, col);draw_point(x, y-1, col);draw_point(x, y+1, col);}}void draw_bmp(int x, int y, char *picname, int w, int h)
{int fd = open(picname, O_RDONLY);if (-1 == fd){perror("fail open bmp");return ;}lseek(fd, 54, SEEK_SET);unsigned char r, g, b;unsigned char *buff = malloc(w*h*3);read(fd, buff, w*h*3);unsigned char *p = buff;for (int j = h-1; j >= 0; j--){for (int i = 0; i < w; i++){b = *p; p++;g = *p; p++;r = *p; p++;if (vinf.bits_per_pixel == RGB888_FMT){unsigned int col = (r << 16) | (g << 8) | (b << 0);draw_point(i+x, j+y, col);}else if (vinf.bits_per_pixel == RGB565_FMT){unsigned short col = ((r >> 3) << 11) | ((g >> 2) << 5) | ((b >> 3) << 0);draw_point(i+x, j+y, col);}}}free(buff);close(fd);
}void draw_word(int x, int y, unsigned char *word, int w, int h, unsigned int col)
{for (int j = 0; j < h; j++){for (int i = 0; i < w; i++){unsigned char tmp = word[i+j*w];for (int k = 0; k < 8; k++){if (tmp & 0x80){draw_point(i*8+k+x, j+y, col);}else{//文字的背景色}tmp = tmp << 1;}}}
}int draw_utf8(UTF8_INFO *info, int x, int y, char* zi, unsigned int col, unsigned int col1)
{unsigned long  out = 0 ;int ret = enc_utf8_to_unicode_one((unsigned char*)zi,&out);unsigned char* data = get_utf_data(info,out);unsigned char temp = 0 ;unsigned int i,j,k;unsigned int num = 0;for(i=0;i<info->height;i++){for(j=0;j<info->width/8;j++){temp = data[num++];for(k=0;k<8;k++){if(0x80&temp){draw_point( x+k+j*8, y+i, col);}else{//   draw_point( x+k+j*8, y+i, col1);}temp= temp<<1;}}}return ret;
}int draw_utf8_str(UTF8_INFO *info, int arg_x, int arg_y,  char* zi, unsigned int col, unsigned int col1)
{char* temp = zi;unsigned int x = arg_x ;unsigned int y =  arg_y;while(*temp != '\0'){int ret = draw_utf8(info, x, y, temp, col, col1);x += info->width;if(x > vinf.xres){x = 0;y += info->height;if(y > vinf.yres){y = 0;}}temp += ret;}return 0;
}
#include <stdio.h>
#include "framebuffer.h"// unsigned char pu[29*32/8] = {
// /*--  文字:  普  --*/// /*--  幼圆22;  此字体下对应的点阵为:宽x高=31x29   --*/
// /*--  宽度不是8的倍数,现调整为:宽度x高度=32x29  --*/
// 0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xF0,0x00,0x00,0x00,0xF0,0x00,
// 0x3F,0xFF,0xFF,0xF8,0x7F,0xFF,0xFF,0xF8,0x7B,0xC0,0xF0,0x00,0x7B,0xC0,0xF0,0x00,
// 0x7B,0xFF,0xFF,0xF0,0x7B,0xFF,0xFF,0xE0,0x7B,0xDF,0xFF,0xC0,0x7B,0xFF,0xFF,0xE0,
// 0x7B,0xFC,0x01,0xE0,0x7B,0xF8,0x01,0xE0,0x7B,0xF8,0x00,0xE0,0x7B,0xFF,0xFF,0xE0,
// 0x7B,0xFF,0xFF,0xE0,0x7B,0xCF,0x07,0x00,0x7B,0xFF,0xFF,0xF8,0x7B,0xFF,0xFF,0xFC,
// 0x7B,0xFF,0xFF,0xF8,0x7B,0xFF,0xFF,0xE0,0x7B,0xFF,0xFF,0xF0,0x7B,0xF8,0x00,0xF0,
// 0x7F,0xF8,0x00,0xF0,0x7F,0xF8,0x00,0xF0,0x00,0x78,0x00,0xF0,0x00,0x3F,0xFF,0xF0,
// 0x00,0x3F,0xFF,0xE0,// };int main(int argc, const char *argv[])
{//初始化utf8字库UTF8_INFO utf8_info;bzero(&utf8_info, sizeof(UTF8_INFO));strcpy(utf8_info.path, ZIKUK_FILE_BIG);utf8_info.width = 32;utf8_info.height = 32;init_utf8(&utf8_info);int fb_fd = init_fb("/dev/fb0");if (-1 == fb_fd){return -1;}draw_clear(0x00000000);draw_point(400, 300, 0x00ff0000);draw_rectangle(100,100, 100,200, 0x00ff0000);draw_x_line(200, 200, 300, 300, 0x0000ffff);draw_x_line(200, 200, 300, 100, 0x0000ffff);draw_x_line(300, 300, 100, 100, 0x00ff00ff);draw_circle(200,200, 200, 0x00ffffff);// 	sleep(2);// 	draw_bmp(0, 0, "./res/1.bmp", 800, 600);// draw_word(100, 100, pu, 32/8, 29, 0x00ff0000);draw_utf8_str(&utf8_info, 100, 100, "水产品养殖远程监控系统", 0x00ff0000, 0x00ffffff);// 	uninit_fb(fb_fd);return 0;
}

相关文章:

嵌入式学习 D31:系统编程--Framebuf帧缓冲

&#xff08;1&#xff09;framebuf帧缓冲 &#xff1a;linux提供的显示设备驱动的接口。 设备路径 &#xff1a; 设备/dev/fb0 * 分辨率&#xff1a;像素点是w * h。 每个像素点色深 RGB&#xff1a;0-255 红绿蓝各3字节&#xff08;byte&#xff09;即可描述色深。…...

黑马点评完整代码(RabbitMQ优化)+简历编写+面试重点 ⭐

简历上展示黑马点评 完整代码地址 项目描述 黑马点评项目是一个springboot开发的前后端分离项目&#xff0c;使用了redis集群、tomcat集群、MySQL集群提高服务性能。类似于大众点评&#xff0c;实现了短信登录、商户查询缓存、优惠卷秒杀、附近的商户、UV统计、用户签到、好…...

Java 大视界 -- Java 大数据在智能安防视频监控中的异常事件快速响应与处理机制(273)

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…...

【数据库】安全性

数据库安全性控制的常用方法&#xff1a;用户标识和鉴定、存取控制、视图、审计、数据加密。 1.用户标识与鉴别 用户标识与鉴别(Identification & Authentication)是系统提供的最外层安全保护措施。 2.存取控制 2.1自主存取控制(简称DAC) (1)同一用户对于不同的数据对…...

【图像处理入门】4. 图像增强技术——对比度与亮度的魔法调节

摘要 图像增强是改善图像视觉效果的核心技术。本文将详解两种基础增强方法&#xff1a;通过直方图均衡化拉伸对比度&#xff0c;以及利用伽马校正调整非线性亮度。结合OpenCV代码实战&#xff0c;学会处理灰度图与彩色图的不同增强策略&#xff0c;理解为何彩色图像需在YUV空间…...

D2-基于本地Ollama模型的多轮问答系统

本程序是一个基于 Gradio 和 Ollama API 构建的支持多轮对话的写作助手。相较于上一版本&#xff0c;本版本新增了对话历史记录、Token 计数、参数调节和清空对话功能&#xff0c;显著提升了用户体验和交互灵活性。 程序通过抽象基类 LLMAgent 实现模块化设计&#xff0c;当前…...

HALCON 深度学习训练 3D 图像的几种方式优缺点

HALCON 深度学习训练 3D 图像的几种方式优缺点 ** 在计算机视觉和工业检测等领域&#xff0c;3D 图像数据的处理和分析变得越来越重要&#xff0c;HALCON 作为一款强大的机器视觉软件&#xff0c;提供了多种深度学习训练 3D 图像的方式。每种方式都有其独特的设计思路和应用场…...

123网盘SDK-npm包已发布

前言 大家好&#xff01;今天想和大家分享一个我最近开源的项目&#xff1a;123 网盘 SDK。这个项目已经在 GitHub 开源&#xff0c;最近已经发布到 NPM&#xff0c;可以通过 npm i ked3/pan123-sdk 直接安装使用。 项目背景&#xff1a;为什么要开发这个 SDK&#xff1f; 在…...

强制卸载openssl-libs导致系统异常的修复方法

openssl升级比较麻烦&#xff0c;因为很多软件都会依赖它&#xff0c;一旦强制卸载(尤其是openssl-libs.rpm)&#xff0c;就可能导致很多命令不可用&#xff0c;即使想用rpm命令重新安装都不行。 所以&#xff0c;除非万不得已&#xff0c;否则不要轻易去卸载openssl-libs。而且…...

乐播视频v4.0.0纯净版体验:高清流畅的视听盛宴

先放软件下载链接:夸克网盘下载 探索乐播视频v4.0.0纯净版&#xff1a;畅享精彩视听之旅 乐播视频v4.0.0纯净版为广大用户带来了优质的视频观看体验&#xff0c;是一款值得关注的视频类软件。 这款软件的资源丰富度令人惊喜&#xff0c;涵盖了电影、电视剧、综艺、动漫等多种…...

Linux 命令全讲解:从基础操作到高级运维的实战指南

Linux 命令全讲解&#xff1a;从基础操作到高级运维的实战指南 前言 Linux 作为开源操作系统的代表&#xff0c;凭借其稳定性、灵活性和强大的定制能力&#xff0c;广泛应用于服务器、云计算、嵌入式设备等领域。对于开发者、运维工程师甚至普通用户而言&#xff0c;熟练掌握…...

FreeRTOS的简单介绍

一、FreeRTOS介绍 FreeRTOS并不是实时操作系统&#xff0c;因为它是分时复用的 利用CubeMX快速移植 二、快速移植流程 1. 在 SYS 选项里&#xff0c;将 Debug 设为 Serial Wire &#xff0c;并且将 Timebase Source 设为 TIM2 &#xff08;其它定时器也行&#xff09;。为何…...

DeepSeek模型安全部署与对抗防御全攻略

引言 随着DeepSeek模型在企业关键业务中的深入应用,模型安全已成为不可忽视的重要议题。本文将从实际攻防对抗经验出发,系统剖析DeepSeek模型面临的安全威胁,提供覆盖输入过滤、输出净化、权限控制等环节的立体防御方案,并分享红蓝对抗中的最佳实践,助力企业构建安全可靠…...

Docker容器使用手册

Docker是一种轻量级、可移植、自给自足的软件运行环境&#xff0c;用于打包和运行应用程序。它允许开发者将应用及其所有依赖打包成一个镜像&#xff08;Image&#xff09;&#xff0c;然后基于这个镜像创建出容器&#xff08;Container&#xff09;来运行。与虚拟机相比不需要…...

深入解析C++引用:从别名机制到函数特性实践

1.C引用 1.1引用的概念和定义 引用不是新定义⼀个变量&#xff0c;而是给已存在变量取了⼀个别名&#xff0c;编译器不会为引用变量开辟内存空间&#xff0c;它和它引用的变量共用同⼀块内存空间。比如四大名著中林冲&#xff0c;他有一个外号叫豹子头&#xff0c;类比到C里就…...

Fuse.js:打造极致模糊搜索体验

Fuse.js 完全学习指南&#xff1a;JavaScript模糊搜索库 &#x1f3af; 什么是 Fuse.js&#xff1f; Fuse.js 是一个轻量、强大且无依赖的JavaScript模糊搜索库。它提供了简单而强大的模糊搜索功能&#xff0c;可以在任何 JavaScript 环境中使用&#xff0c;包括浏览器和 Nod…...

MyBatis分页插件(以PageHelper为例)与MySQL分页语法的关系

MyBatis分页插件&#xff08;以PageHelper为例&#xff09;与MySQL分页语法关系总结 MyBatis的分页插件&#xff08;如PageHelper&#xff09;底层实现依赖于数据库的分页语法。对于MySQL数据库来说&#xff0c;其分页逻辑最终会转化为LIMIT语句&#xff0c;下面展开详细说明&…...

CentOS 7.9 安装 宝塔面板

在 CentOS 7.9 上安装 宝塔面板&#xff08;BT Panel&#xff09; 的完整步骤如下&#xff1a; 1. 准备工作 系统要求&#xff1a; CentOS 7.x&#xff08;推荐 7.9&#xff09;内存 ≥ 1GB&#xff08;建议 2GB&#xff09;硬盘 ≥ 20GBroot 权限&#xff08;需使用 root 用户…...

使用Redis作为缓存优化ElasticSearch读写性能

在现代数据密集型应用中&#xff0c;ElasticSearch凭借其强大的全文搜索能力成为许多系统的首选搜索引擎。然而&#xff0c;随着数据量和查询量的增长&#xff0c;ElasticSearch的读写性能可能会成为瓶颈。本文将详细介绍如何使用Redis作为缓存层来显著提升ElasticSearch的读写…...

项目交付后缺乏回顾和改进,如何持续优化

项目交付后缺乏回顾和改进可通过建立定期回顾机制、实施反馈闭环流程、开展持续学习和培训、运用数据驱动分析、培养持续改进文化来持续优化。 其中&#xff0c;实施反馈闭环流程尤其重要&#xff0c;它能够确保反馈信息得到有效传递、处理与追踪&#xff0c;形成良好的改进生态…...

从0开始学习R语言--Day15--非参数检验

非参数检验 如果在进行T检验去比较两组数据差异时&#xff0c;假如数据里存在异常值&#xff0c;会把数据之间的差异拉的很大&#xff0c;影响正常的判断。那么这个时候&#xff0c;我们可以尝试用非参数检验的方式来比较数据。 假设我们有A&#xff0c;B两筐苹果&#xff0c…...

Linux或者Windows下PHP版本查看方法总结

确定当前服务器或本地环境中 PHP 的版本,可以通过以下几种方法进行操作: 1. 通过命令行检查 这是最直接且常用的方法,适用于本地开发环境或有 SSH 访问权限的服务器。 方法一:php -v 命令 php -v输出示例:PHP 8.1.12 (cli) (built: Oct 12 2023 12:34:56) (NTS) Copyri…...

EC2 实例详解:AWS 的云服务器怎么玩?☁️

弹性计算、灵活计费、全球可用&#xff0c;AWS EC2 全攻略 在 AWS 生态中&#xff0c;有两个核心服务是非常关键的&#xff0c;一个是 S3&#xff08;对象存储&#xff09;&#xff0c;另一个就是我们今天的主角 —— Amazon EC2&#xff08;Elastic Compute Cloud&#xff09…...

第三发 DSP 点击控制系统

背景 ​ 在第三方 DSP 上投放广告&#xff0c;需要根据 DP Link 的点击次数进行控制。比如当 DP Link 达到 5000 后&#xff0c;后续的点击将不能带来收益&#xff0c;但是后续的广告却要付出成本。因此需要建立一个 DP Link 池&#xff0c;当 DP Link 到达限制后&#xff0c;…...

saveOrUpdate 有个缺点,不会把值赋值为null,解决办法

针对 MyBatis-Plus 的 saveOrUpdate 方法无法将字段更新为 null 的问题&#xff0c;这是因为 MyBatis-Plus 默认会忽略 null 值字段。以下是几种解决方案&#xff1a; 方案 1&#xff1a;使用 update(entity, wrapper) 手动指定更新条件 原理&#xff1a;通过 UpdateWrapper …...

Java面试:企业协同SaaS中的技术挑战与解决方案

Java面试&#xff1a;企业协同SaaS中的技术挑战与解决方案 面试场景 在一家知名互联网大厂&#xff0c;面试官老王正在对一位应聘企业协同SaaS开发职位的程序员谢飞机进行技术面试。 第一轮提问&#xff1a;基础技术 老王&#xff1a;谢飞机&#xff0c;你好。首先&#xf…...

【笔记】在 MSYS2 MINGW64 环境中降级 NumPy 2.2.6 到 2.2.4

&#x1f4dd; 在 MSYS2 MINGW64 环境中降级 NumPy 到 2.2.4 ✅ 目标说明 在 MSYS2 的 MINGW64 工具链环境中&#xff0c;将 NumPy 从 2.2.6 成功降级到 2.2.4。 &#x1f9f0; 环境信息 项目内容操作系统Windows 11MSYS2 终端类型MINGW64&#xff08;默认终端&#xff09;Py…...

前端限流如何实现,如何防止服务器过载

前端限流是一种控制请求频率的技术&#xff0c;旨在防止过多的请求在同一时间段内发送到服务器&#xff0c;避免造成服务器过载或触发反爬虫机制。实现前端限流的方法有很多&#xff0c;下面介绍几种常见的策略和技术&#xff1a; 1. 时间窗口算法 时间窗口算法是最简单的限流…...

基于大模型的慢性硬脑膜下血肿预测与诊疗系统技术方案

目录 一、术前阶段二、并发症风险预测三、手术方案制定四、麻醉方案生成五、术后护理与康复六、系统集成方案七、实验验证与统计分析八、健康教育与随访一、术前阶段 1. 数据预处理与特征提取 伪代码: # 输入:患者多模态影像数据(CT/MRI)、病史、生理指标 def preproce…...

vue入门环境搭建及demo运行

提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 vue简介&#xff1a;第一步&#xff1a;安装node.jsnode简介第二步&#xff1a;安装vue.js第三步&#xff1a;安装vue-cli工具第四步 &#xff1a;安装webpack第五步…...