经常忘记网址？将Vue项目一键打包为桌面客户端十分钟让你解决烦恼

冷不防 2023-09-24 15:13 14阅读 0赞

> **作者主页**：[Designer 小郑][Designer]  
> **作者简介**：软件工程师一枚，来自浙江宁波，负责开发管理公司OA项目，专注软件前后端开发（Vue、SpringBoot和微信小程序）、系统定制、远程技术指导。CSDN学院、蓝桥云课认证讲师，全栈领域优质创作者，在校期间参加PAT乙级考试获得满分，三年ACM竞赛经验，斩获国奖两项，省奖五项。热爱技术、专注业务、开放合作、乐于分享，期待你我共同成长！  
> **主打方向**：Vue、SpringBoot、微信小程序

不知各位朋友是否有以下的烦恼：

*  管理几十个项目，每个项目的**域名和端口记不住**…
 *  同一套系统在不同浏览器上**展示不一样**…
 *  甲方经常问我项目的网址，其实我也忘记了…
 *  客户习惯使用 C/S 架构的系统，将软件 UI 固化为 WINDOWS 桌面端的应用程序，将一个 Vue 项目摆在他的面前，他看不惯！

![在这里插入图片描述][6150de2373b049548cc72e285543a1ba.png_pic_center]

解决这类问题的方案之一，就是**将项目包装为桌面客户端**，就像双击 Excel 那样，就可以进入项目。

那么我们如何去实现呢？

接下来就切入正题！

--------------------

## 一、使用 NW.js 打包 ##

> NW.js基于Chromium和Node.js。它允许您直接从浏览器调用Node.js代码和模块，并在应用程序中使用Web技术。此外，您可以轻松地将web应用程序打包为本机应用程序。

**官网**：[NW.js 官网][NW.js]

**优点**：免开发、门槛低、体积小

![在这里插入图片描述][8bc153eba15d4d629109711bccb9cdef.png_pic_center]

### 1.1 下载、解压 NW.js ###

#### 1.1.1 下载 NW.js ####

进入 `NW.js` 官网，点击下载最新版，如下图所示。

![在这里插入图片描述][035c747107b342378ac36d1b7d50ca9f.png_pic_center]  
下载的是一个普通压缩包，如下图所示。

![在这里插入图片描述][62c8d585d2a74bc1863a33995e4544f2.png_pic_center]

#### 1.1.2 解压 NW.js ####

接着我们将压缩包解压到指定目录，解压成功后如下图所示。

![在这里插入图片描述][2509af05f64441a79ee8e8037f3caeb7.png_pic_center]

![在这里插入图片描述][d20811fc24154b148e6372d8bd803dab.png_pic_center]

### 1.2 配置被打包的项目 ###

#### 1.2.1 新建 package.json ####

在 1.1 步的目录内新建 `package.json` 文件。

> 提示：可以新建一个空白 txt 文档，然后重命名哦！

![在这里插入图片描述][44703836c2bf480b992b96583a1e50cf.png_pic_center]  
并将 `package.json` 文件的内容编辑为：

{
        
    	"main": "index.html",
    	"name": "我的 CSDN 博客"
    }

其中 `main` 字段为接下来新建的 `html` 文件名称，`name` 字段可以根据需要自定义，完整的配置会在下面提供。

#### 1.2.2 新建 index.html ####

接着再新建一个 `index.html` 文件，如下图所示。

> 提示：可以新建一个空白 txt 文档，然后重命名哦！

![在这里插入图片描述][b683a70bf6584b2ea5b1e3ce62e10f80.png_pic_center]  
并将 `index.html` 文件的内容编辑为：

<!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    <script language="javascript" type="text/javascript">
            window.location.href='https://blog.csdn.net/qq_41464123';
    </script>
    </body>
    </html>

#### 1.2.3 压缩 ####

然后将 1.2.1 和 1.2.2 步做的 `package.json` 和 `index.html` 压缩，如下图所示。

> 提示：请注意压缩包内不要有文件夹哦！包内应该直接两个文件

![在这里插入图片描述][2fe3cb5482e040a69f90589d6fd49aa6.png_pic_center]

#### 1.2.4 更改后缀名 ####

最后将压缩包后缀名，由 `zip` 改为 `nw`，如下图所示。

![在这里插入图片描述][bf30cd2b9a394c92907c8fd67b3c8fef.png_pic_center]  
![在这里插入图片描述][d20811fc24154b148e6372d8bd803dab.png_pic_center]

### 1.3 合成桌面客户端 ###

#### 1.3.1 合成客户端 ####

前面两个步骤完成后，第三步就要**合成桌面客户端**了。

打开 `cmd` 窗口，进入当前目录，如下图所示。

> 提示：Win + R 键打开 “运行” 窗口，然后输入 “cmd” 按回车就可以打开黑框框了哦！

![在这里插入图片描述][c0d6862ad76c4ed2a694bd948179f822.png_pic_center]

接着直接输入以下命令，开始合成。

copy /b nw.exe+nw.nw app.exe

运行结果如下图所示。

![在这里插入图片描述][c2e428392a9243b7b7098dcd559ec8dc.png_pic_center]

运行后，回到之前的目录，可以发现多了个 `app.exe` 文件，如下图所示。

![在这里插入图片描述][7415b95b634e4fa48376953caac1a043.png_pic_center]

双击即可打开，如下图所示。

![在这里插入图片描述][349a545869a54beda31ab8716a8c2f79.png_pic_center]

#### 1.3.2 更换图标 ####

右键刚刚生成的 `app.exe` 文件，将快捷方式发送到桌面，操作过程如下图所示。  
![在这里插入图片描述][143c0c4c315e4342b571ca7c050d020a.png_pic_center]

生成之后如下图所示。

![在这里插入图片描述][c1cc5596b04a48b8bb9ca0af2018a4ad.png_pic_center]

接着右键快捷方式，点击属性，操作界面如下图所示。

![在这里插入图片描述][1ca9c4e42b3247a28d117a9c61745ee0.png_pic_center]

点击浏览，选择 `ico` 图标后，点击确认，如下图所示。

> 提示：若您手上是 png 或 jpg 图片，需要转换为 ico 格式，网上有很多在线转换工具。

![在这里插入图片描述][29d2a3bcaf714a8d8e397b396aff5302.png_pic_center]  
最后重命名快捷方式后，就大功告成啦！

最终效果如下图所示。  
![在这里插入图片描述][64049d5da69a4f3e978131c1e8543ff5.png_pic_center]

当然如果需要完整功能，比如窗口大小、是否全屏、顶部图标、是否固定任务栏等，可以参考如下的配置文件，并在 1.2.1 步骤配置。

{
        
    	/**指定程序的起始页面。*/
    	"main": "index.html",
    	/**字符串必须是小写字母或者数字，可以包含.或者_或者-不允许带空格。name必须全局唯一。*/
    	"name": "Blog",
    	/**程序描述*/
    	"description": "我的 CSDN 博客",
    	/**程序版本号*/
    	"version": "1.0.0",
    	/**关键字*/
    	"keywords": ["demo","node-webkit"],
    	/**bool值，如果设置为false，将禁用webkit的node支持。*/
    	"nodejs": true,
    	/**
    	* 指定一个node.js文件，当程序启动时，该文件会被运行，启动时间要早于node-webkit加载html的时间。
    	* 它在node上下文中运行，可以用它来实现类似后台线程的功能。
    	* （不需要可注释不用）
    	*/
    	//"node-main": "js/node.js",
    	/**
    	* bool值。默认情况下，如果将node-webkit程序打包发布，那么只能启动一个该应用的实例。
    	* 如果你希望允许同时启动多个实例，将该值设置为false。
    	*/
    	"single-instance": true,
    	/**窗口属性设置 */
    	"window": {
        
    		/**字符串，设置默认title。*/
    		"title": "我的技术博客",
    		/**窗口的icon。*/
    		"icon": "img/tubiao.ico.png",
    		/**bool值。是否显示导航栏。*/
    		"toolbar": false,
    		/**bool值。是否允许调整窗口大小。*/
    		"resizable": true,
    		/**是否全屏*/
    		"fullscreen": false,
    		/**是否在win任务栏显示图标*/
    		"show_in_taskbar": false,
    		/**bool值。如果设置为false，程序将无边框显示。*/
    		"frame": true,
    		/**字符串。窗口打开时的位置，可以设置为“null”、“center”或者“mouse”。*/
    		"position": "center",
    		/**主窗口的的宽度。*/
    		"width": 1920,
    		/**主窗口的的高度。*/
    		"height": 1080,
    		/**窗口的最小宽度。*/
    		"min_width": 400,
    		/**窗口的最小高度。*/
    		"min_height": 335,
    		/**窗口显示的最大宽度，可不设。
    		"max_width": 800,*/
    		/**窗口显示的最大高度，可不设。
    		"max_height": 670,*/
    		/**bool值，如果设置为false，启动时窗口不可见。*/
    		"show": true,
    		/**是否在任务栏显示图标。*/
    		"show_in_taskbar":true,
    		/**
    		 * bool值。是否使用kiosk模式。如果使用kiosk模式，
    		 * 应用程序将全屏显示，并且阻止用户离开应用。
    		 * */
    		"kiosk": false
    	},
    	/**webkit设置*/
    	"webkit": {
        
    		/**bool值，是否加载插件，如flash，默认值为false。*/
    		"plugin": true,
    		/**bool值，是否加载Java applets，默认为false。*/
    		"java": false,
    		/**bool值，是否启用页面缓存，默认为false。*/
    		"page-cache": false
    	}
    }

![在这里插入图片描述][d20811fc24154b148e6372d8bd803dab.png_pic_center]

## 二、发布 Vue 项目 ##

聪明的同学已经发现，本篇博客的标题为 **《经常忘记网址？将Vue项目一键打包为桌面客户端 十分钟让你解决烦恼》**。

第一章都在讲**将一个网址打包为桌面客户端**。

但我们手上的不是网址，是一个 localhost（本地版） 的 Vue 项目！

第二章就主要讲解，**如何将这个 Vue 项目转换为网址**！

![在这里插入图片描述][c8ec32d34b0e44648a33cd7a9242ad1b.png_pic_center]

### 2.1 选择 Vue 项目 ###

如果你的手上有 Vue 项目，可以忽略本小节；如果没有可以从下面的代码仓库中进行下载，同学们可以挑选自己喜欢的 Vue 项目进行打包。

#### 2.1.1 Vue和SpringBoot的前后端分离开发模板 ####

博客：[博客介绍][Link 1]  
源代码：[GitEE][]、[GitHub][]、[GitCode][]

![在这里插入图片描述][f17ddcb0559141be9a4d93dd5bc0fb06.png_pic_center]  
![在这里插入图片描述][5a69c4eedb214592babdc17312f6e5a3.png_pic_center]

![在这里插入图片描述][2f02b070c520470eb2d425ff81b547c7.png_pic_center]

#### 2.1.2 基于 Vue 的大病保险管理系统 ####

博客：[博客介绍][Link 2]  
源代码：[GitEE][GitEE 1]、[GitHub][GitHub 1]、[GitCode][GitCode 1]

![在这里插入图片描述][106b5f46326d449ab1d2cb8ec20c51b0.png_pic_center]

![在这里插入图片描述][c25aeb13074b4621b167a690a3c92667.png_pic_center]

![在这里插入图片描述][1fc2983db5a9484fa00bce560a0b47fc.png_pic_center]

#### 2.1.3 基于 Vue 的假日旅社管理系统 ####

博客：[博客介绍][Link 3]  
教学课程：[CSDN 学院教学课程][CSDN]  
源代码：[GitEE][GitEE 2]、[GitHub][GitHub 2]、[GitCode][GitCode 2]

![在这里插入图片描述][6a1a51cddb324fc7bde03398d5388fca.png_pic_center]

![在这里插入图片描述][74f858232dc042658d1d333c5e2071b5.png_pic_center]

![在这里插入图片描述][b633af40b13246afad25d037b012b00a.png_pic_center]

#### 2.1.4 基于 Vue 的医院门诊预约挂号系统 ####

博客：[博客介绍][Link 4]  
源代码：[GitEE][GitEE 3]、[GitHub][GitHub 3]、[GitCode][GitCode 3]

![在这里插入图片描述][818822f08ef94718ae389abae8b8969e.png_pic_center]

![在这里插入图片描述][5c21f941d2c04d348a185e04608f3cf8.png_pic_center]

![在这里插入图片描述][2a99270247b443e48eb884d0c6e17d6e.png_pic_center]

#### 2.1.5 基于 Vue 的资产出入库管理系统 ####

博客：[博客介绍][Link 5]  
源代码：[GitEE][GitEE 4]、[GitHub][GitHub 4]、[GitCode][GitCode 4]

![在这里插入图片描述][6f0ccdb8f92746e9a9424f3f17f74567.png_pic_center]

![在这里插入图片描述][77c22b858da0406dbadc77fd5feab0f8.png_pic_center]

![在这里插入图片描述][f767745f8991482689c4106f2d86ac9a.png_pic_center]

#### 2.1.6 更多… ####

更多题材的 Vue 系统可在文章底部评论区互动！

![在这里插入图片描述][d20811fc24154b148e6372d8bd803dab.png_pic_center]

### 2.2 编译 Vue 项目 ###

#### 2.2.1 获取项目源代码 ####

选定待打包的 Vue 项目后，先把项目源代码克隆到本地，克隆命令为 `git clone 仓库地址`，如下所示。

git clone git@gitee.com:yyzwz/template.git

![在这里插入图片描述][e0a470cb474c491392099a0cf12832ca.png_pic_center]

代码下载完成后，打开项目文件夹，如下图所示。  
![在这里插入图片描述][3c75ddd344654c5a83c8a016048dd366.png_pic_center]

#### 2.2.2 安装依赖、编译项目 ####

若你的电脑没有配置 node.js 和 Vue 脚手架，或者不知道如何安装 VsCode，可以移步 [Vue 环境配置讲解][Vue]。

使用 VsCode 打开项目的 front 文件夹。  
![在这里插入图片描述][ac79949e218940b18630121a201cd8c8.png_pic_center]  
运行 npm i 命令。  
![在这里插入图片描述][fe56b1b822764b6aa58b0b3b05b727bb.png_pic_center]

安装完成后，界面如下图所示。  
![在这里插入图片描述][e4a4d30f4b6a4cf688fdf14bd3715948.png_pic_center]  
接着使用 `npm run build` 命令，生成编译文件，编译成功后如下图所示。

![在这里插入图片描述][5422b2c69667404294f78ef3534a04bf.png_pic_center]  
可以发现在项目根目录多了个 dist 文件夹，如下图所示，这里面就是存放了 Vue 项目的待部署文件。  
![在这里插入图片描述][4563a164d57e4419ac817832eaadc485.png_pic_center]

#### 2.2.3 Nginx 配置 ####

Nginx 和 Tomcat 一样，是一个轻量级的应用服务器，官网下载页面是：[Nginx 下载][Nginx]。

同学们可以下载最新稳定版的 Nginx，如下图所示。

![在这里插入图片描述][9407b52a25164c738b11c44a51155c02.png_pic_center]

下载完成后解压到指定目录，如下图所示。

![在这里插入图片描述][65e87788a2f44c7682f27c5cae5af27e.png_pic_center]

打开 conf 目录下的 `nginx.conf` 配置文件，编译为如下所示。

如果你没有域名，可以使用下面的配置

#worker角色的工作进程的个数 设置为CPU逻辑数量的两倍
    worker_processes  1;
    
    events {
        
        #每一个worker进程能并发处理（发起）的最大连接数
        worker_connections  2048;
    }
    
    http {
        
        #开启高效文件传输模式
        sendfile        on;
        #长连接超时时间，单位是秒
        keepalive_timeout  65;
        #用于指定响应客户端的超时时间
        send_timeout  30;
        #允许客户端请求的最大单文件字节数。
        client_max_body_size 100m;
        #缓冲区代理缓冲用户端请求的最大字节数
        client_body_buffer_size 128k;
        #导入外部配置文件 文件扩展名与文件类型映射表
        include       mime.types;
        #让浏览器认为响应是普通的文件流，并提示用户下载文件 如 图片 pdf等
        default_type  application/octet-stream;
        charset   utf-8;
        tcp_nopush     on;
    
        gzip on;
        #压缩最小文件阀值
        gzip_min_length 1k;
        #缓冲区大小
        gzip_buffers 4 16k;
        #http协议版本
        gzip_http_version 1.0;
        #IE版本1-6不支持gzip压缩，关闭
        gzip_disable 'MSIE[1-6].';
        #压缩级别
        gzip_comp_level 6;
        #需要压缩的文件格式
        gzip_types text/css text/javascript application/javascript image/jpeg image/png image/gif;
        #告知客户端能否缓存
        gzip_vary on;
        #反向代理时使用
        gzip_proxied off;
    
        #负载均衡
        upstream zwz {
        
            server 127.0.0.1:8081 weight=1;
        }
    
        server {
        
            listen       8080;
            server_name  localhost;
            # server_name  artskyhome.com;
            client_max_body_size 100m;
            # 设置解决大json返回不完整问题
            proxy_buffers 16 1024k;
            proxy_buffer_size 1024k;
            #保留代理之前的真实客户端ip
            proxy_set_header X-Real-IP $remote_addr; 
            #在多级代理的情况下，记录每次代理之前的客户端真实ip
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            charset utf-8;
    
            location / {
        
                root   html;
                index  index.html index.htm;
                add_header 'Access-Control-Allow-Origin' '*';
            }
            location /zwz {
        
                proxy_pass  http://zwz;
            }
    
            error_page 404 /404.html;
        }
    }

![在这里插入图片描述][138dc444637843ff9d6bb8bff054eb0a.png_pic_center]

如果你有域名，并且有 SSL 证书，可以使用如下的配置，其中 `1.pem` 和 `1.key` 是 SSL 的证书文件。

#worker角色的工作进程的个数 设置为CPU逻辑数量的两倍
    worker_processes  1;
    
    events {
        
        #每一个worker进程能并发处理（发起）的最大连接数
        worker_connections  2048;
    }
    
    http {
        
        #开启高效文件传输模式
        sendfile        on;
        #长连接超时时间，单位是秒
        keepalive_timeout  65;
        #用于指定响应客户端的超时时间
        send_timeout  30;
        #允许客户端请求的最大单文件字节数。
        client_max_body_size 100m;
        #缓冲区代理缓冲用户端请求的最大字节数
        client_body_buffer_size 128k;
        #导入外部配置文件 文件扩展名与文件类型映射表
        include       mime.types;
        #让浏览器认为响应是普通的文件流，并提示用户下载文件 如 图片 pdf等
        default_type  application/octet-stream;
        charset   utf-8;
        tcp_nopush     on;
    
        gzip on;
        #压缩最小文件阀值
        gzip_min_length 1k;
        #缓冲区大小
        gzip_buffers 4 16k;
        #http协议版本
        gzip_http_version 1.0;
        #IE版本1-6不支持gzip压缩，关闭
        gzip_disable 'MSIE[1-6].';
        #压缩级别
        gzip_comp_level 6;
        #需要压缩的文件格式
        gzip_types text/css text/javascript application/javascript image/jpeg image/png image/gif;
        #告知客户端能否缓存
        gzip_vary on;
        #反向代理时使用
        gzip_proxied off;
    
        #负载均衡
        upstream zwz {
        
            server 127.0.0.1:8081 weight=1;
        }
    
        server {
        
            listen       8080 ssl;
            server_name  localhost;
            # server_name  artskyhome.com;
            client_max_body_size 100m;
            # 设置解决大json返回不完整问题
            proxy_buffers 16 1024k;
            proxy_buffer_size 1024k;
            #保留代理之前的真实客户端ip
            proxy_set_header X-Real-IP $remote_addr; 
            #在多级代理的情况下，记录每次代理之前的客户端真实ip
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    
            ssl_certificate   ssl/1.pem;
            ssl_certificate_key  ssl/1.key;
            ssl_session_timeout 5m;
            ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
            ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
            ssl_prefer_server_ciphers on;
            charset utf-8;
    
            location / {
        
                root   html;
                index  index.html index.htm;
                add_header 'Access-Control-Allow-Origin' '*';
            }
            location /zwz {
        
                proxy_pass  http://zwz;
            }
    
            error_page 404 /404.html;
        }
    }

接着将 2.2.2 步骤生成的 `dist` 文件夹内容复制到 `nginx` 的 `html` 目录下，如下图所示。

![在这里插入图片描述][ccefa93708c74937aa97a9914363681c.png_pic_center]

#### 2.2.4 Nginx 发布 ####

将上一步完整的 `nginx` 文件夹复制到服务器的硬盘上，如下图所示。

![在这里插入图片描述][2185a450d59f49b2a96b3168b2587dcb.png_pic_center]

运行 cmd，输入以下命令，如下图所示。

cd 项目目录
    start nginx

![在这里插入图片描述][d9be3515f1c54b9ba81d22763785f166.png_pic_center]

接着就可以在云服务器上看到部署的 Vue 项目了哦！也就是**将 Vue 项目转换为了网址**。

![在这里插入图片描述][7613d1fb609d44d0861b1d81bcb3652a.png_pic_center]

如果你没有云服务器，也可以在电脑本地运行，执行以下cmd 命令。

cd C:\java\git\template\nginx
    start nginx

接着打开 `localhost:8080` 就可以了，如下图所示。

也就是将 Vue 项目转换为了 `localhost:8080` 这个网址。

![在这里插入图片描述][15b0af29bc104e8994716bff0e25f684.png_pic_center]

## 三、总结 ##

本文讲解了如何将一个 Vue 项目打包为桌面客户端，实现像 Excel 一样双击运行，适用于管理较多项目且经常忘记网址的场景。本文还讲解了 Vue 项目从下载依赖、打包和 Nginx 部署的全过程，可以给 Vue 初学者参考学习。

![在这里插入图片描述][3a01dc60e62c415b812015851343f1c0.png_pic_center]

[Designer]: https://blog.csdn.net/qq_41464123
[6150de2373b049548cc72e285543a1ba.png_pic_center]: https://img-blog.csdnimg.cn/6150de2373b049548cc72e285543a1ba.png#pic_center
[NW.js]: https://nwjs.io/
[8bc153eba15d4d629109711bccb9cdef.png_pic_center]: https://img-blog.csdnimg.cn/8bc153eba15d4d629109711bccb9cdef.png#pic_center
[035c747107b342378ac36d1b7d50ca9f.png_pic_center]: https://img-blog.csdnimg.cn/035c747107b342378ac36d1b7d50ca9f.png#pic_center
[62c8d585d2a74bc1863a33995e4544f2.png_pic_center]: https://img-blog.csdnimg.cn/62c8d585d2a74bc1863a33995e4544f2.png#pic_center
[2509af05f64441a79ee8e8037f3caeb7.png_pic_center]: https://img-blog.csdnimg.cn/2509af05f64441a79ee8e8037f3caeb7.png#pic_center
[d20811fc24154b148e6372d8bd803dab.png_pic_center]: https://img-blog.csdnimg.cn/d20811fc24154b148e6372d8bd803dab.png#pic_center
[44703836c2bf480b992b96583a1e50cf.png_pic_center]: https://img-blog.csdnimg.cn/44703836c2bf480b992b96583a1e50cf.png#pic_center
[b683a70bf6584b2ea5b1e3ce62e10f80.png_pic_center]: https://img-blog.csdnimg.cn/b683a70bf6584b2ea5b1e3ce62e10f80.png#pic_center
[2fe3cb5482e040a69f90589d6fd49aa6.png_pic_center]: https://img-blog.csdnimg.cn/2fe3cb5482e040a69f90589d6fd49aa6.png#pic_center
[bf30cd2b9a394c92907c8fd67b3c8fef.png_pic_center]: https://img-blog.csdnimg.cn/bf30cd2b9a394c92907c8fd67b3c8fef.png#pic_center
[c0d6862ad76c4ed2a694bd948179f822.png_pic_center]: https://img-blog.csdnimg.cn/c0d6862ad76c4ed2a694bd948179f822.png#pic_center
[c2e428392a9243b7b7098dcd559ec8dc.png_pic_center]: https://img-blog.csdnimg.cn/c2e428392a9243b7b7098dcd559ec8dc.png#pic_center
[7415b95b634e4fa48376953caac1a043.png_pic_center]: https://img-blog.csdnimg.cn/7415b95b634e4fa48376953caac1a043.png#pic_center
[349a545869a54beda31ab8716a8c2f79.png_pic_center]: https://img-blog.csdnimg.cn/349a545869a54beda31ab8716a8c2f79.png#pic_center
[143c0c4c315e4342b571ca7c050d020a.png_pic_center]: https://img-blog.csdnimg.cn/143c0c4c315e4342b571ca7c050d020a.png#pic_center
[c1cc5596b04a48b8bb9ca0af2018a4ad.png_pic_center]: https://img-blog.csdnimg.cn/c1cc5596b04a48b8bb9ca0af2018a4ad.png#pic_center
[1ca9c4e42b3247a28d117a9c61745ee0.png_pic_center]: https://img-blog.csdnimg.cn/1ca9c4e42b3247a28d117a9c61745ee0.png#pic_center
[29d2a3bcaf714a8d8e397b396aff5302.png_pic_center]: https://img-blog.csdnimg.cn/29d2a3bcaf714a8d8e397b396aff5302.png#pic_center
[64049d5da69a4f3e978131c1e8543ff5.png_pic_center]: https://img-blog.csdnimg.cn/64049d5da69a4f3e978131c1e8543ff5.png#pic_center
[c8ec32d34b0e44648a33cd7a9242ad1b.png_pic_center]: https://img-blog.csdnimg.cn/c8ec32d34b0e44648a33cd7a9242ad1b.png#pic_center
[Link 1]: https://blog.csdn.net/qq_41464123/article/details/126660971
[GitEE]: https://gitee.com/yyzwz/template
[GitHub]: https://github.com/yyzwz/template
[GitCode]: https://gitcode.net/qq_41464123/template
[f17ddcb0559141be9a4d93dd5bc0fb06.png_pic_center]: https://img-blog.csdnimg.cn/f17ddcb0559141be9a4d93dd5bc0fb06.png#pic_center
[5a69c4eedb214592babdc17312f6e5a3.png_pic_center]: https://img-blog.csdnimg.cn/5a69c4eedb214592babdc17312f6e5a3.png#pic_center
[2f02b070c520470eb2d425ff81b547c7.png_pic_center]: https://img-blog.csdnimg.cn/2f02b070c520470eb2d425ff81b547c7.png#pic_center
[Link 2]: https://blog.csdn.net/qq_41464123/article/details/122507971
[GitEE 1]: https://gitee.com/yyzwz/medicineSystem
[GitHub 1]: https://github.com/yyzwz/medicineSystem
[GitCode 1]: https://gitcode.net/qq_41464123/medicine-system
[106b5f46326d449ab1d2cb8ec20c51b0.png_pic_center]: https://img-blog.csdnimg.cn/106b5f46326d449ab1d2cb8ec20c51b0.png#pic_center
[c25aeb13074b4621b167a690a3c92667.png_pic_center]: https://img-blog.csdnimg.cn/c25aeb13074b4621b167a690a3c92667.png?#pic_center
[1fc2983db5a9484fa00bce560a0b47fc.png_pic_center]: https://img-blog.csdnimg.cn/1fc2983db5a9484fa00bce560a0b47fc.png#pic_center
[Link 3]: https://blog.csdn.net/qq_41464123/article/details/126778475
[CSDN]: https://edu.csdn.net/course/detail/38002
[GitEE 2]: https://gitee.com/yyzwz/holiday-hotel
[GitHub 2]: https://github.com/yyzwz/holiday-hotel
[GitCode 2]: https://gitcode.net/qq_41464123/holiday-hotel
[6a1a51cddb324fc7bde03398d5388fca.png_pic_center]: https://img-blog.csdnimg.cn/6a1a51cddb324fc7bde03398d5388fca.png#pic_center
[74f858232dc042658d1d333c5e2071b5.png_pic_center]: https://img-blog.csdnimg.cn/74f858232dc042658d1d333c5e2071b5.png#pic_center
[b633af40b13246afad25d037b012b00a.png_pic_center]: https://img-blog.csdnimg.cn/b633af40b13246afad25d037b012b00a.png#pic_center
[Link 4]: https://blog.csdn.net/qq_41464123/article/details/126984679
[GitEE 3]: https://gitee.com/yyzwz/order-register
[GitHub 3]: https://github.com/yyzwz/order-register
[GitCode 3]: https://gitcode.net/qq_41464123/order-register
[818822f08ef94718ae389abae8b8969e.png_pic_center]: https://img-blog.csdnimg.cn/818822f08ef94718ae389abae8b8969e.png#pic_center
[5c21f941d2c04d348a185e04608f3cf8.png_pic_center]: https://img-blog.csdnimg.cn/5c21f941d2c04d348a185e04608f3cf8.png#pic_center
[2a99270247b443e48eb884d0c6e17d6e.png_pic_center]: https://img-blog.csdnimg.cn/2a99270247b443e48eb884d0c6e17d6e.png#pic_center
[Link 5]: https://blog.csdn.net/qq_41464123/article/details/127493981
[GitEE 4]: https://gitee.com/yyzwz/asset-stock
[GitHub 4]: https://github.com/yyzwz/asset-stock
[GitCode 4]: https://gitcode.net/qq_41464123/asset-stock
[6f0ccdb8f92746e9a9424f3f17f74567.png_pic_center]: https://img-blog.csdnimg.cn/6f0ccdb8f92746e9a9424f3f17f74567.png#pic_center
[77c22b858da0406dbadc77fd5feab0f8.png_pic_center]: https://img-blog.csdnimg.cn/77c22b858da0406dbadc77fd5feab0f8.png#pic_center
[f767745f8991482689c4106f2d86ac9a.png_pic_center]: https://img-blog.csdnimg.cn/f767745f8991482689c4106f2d86ac9a.png#pic_center
[e0a470cb474c491392099a0cf12832ca.png_pic_center]: https://img-blog.csdnimg.cn/e0a470cb474c491392099a0cf12832ca.png#pic_center
[3c75ddd344654c5a83c8a016048dd366.png_pic_center]: https://img-blog.csdnimg.cn/3c75ddd344654c5a83c8a016048dd366.png#pic_center
[Vue]: https://zwz99.blog.csdn.net/article/details/115490056
[ac79949e218940b18630121a201cd8c8.png_pic_center]: https://img-blog.csdnimg.cn/ac79949e218940b18630121a201cd8c8.png#pic_center
[fe56b1b822764b6aa58b0b3b05b727bb.png_pic_center]: https://img-blog.csdnimg.cn/fe56b1b822764b6aa58b0b3b05b727bb.png#pic_center
[e4a4d30f4b6a4cf688fdf14bd3715948.png_pic_center]: https://img-blog.csdnimg.cn/e4a4d30f4b6a4cf688fdf14bd3715948.png#pic_center
[5422b2c69667404294f78ef3534a04bf.png_pic_center]: https://img-blog.csdnimg.cn/5422b2c69667404294f78ef3534a04bf.png#pic_center
[4563a164d57e4419ac817832eaadc485.png_pic_center]: https://img-blog.csdnimg.cn/4563a164d57e4419ac817832eaadc485.png#pic_center
[Nginx]: http://nginx.org/en/download.html
[9407b52a25164c738b11c44a51155c02.png_pic_center]: https://img-blog.csdnimg.cn/9407b52a25164c738b11c44a51155c02.png#pic_center
[65e87788a2f44c7682f27c5cae5af27e.png_pic_center]: https://img-blog.csdnimg.cn/65e87788a2f44c7682f27c5cae5af27e.png#pic_center
[138dc444637843ff9d6bb8bff054eb0a.png_pic_center]: https://img-blog.csdnimg.cn/138dc444637843ff9d6bb8bff054eb0a.png#pic_center
[ccefa93708c74937aa97a9914363681c.png_pic_center]: https://img-blog.csdnimg.cn/ccefa93708c74937aa97a9914363681c.png#pic_center
[2185a450d59f49b2a96b3168b2587dcb.png_pic_center]: https://img-blog.csdnimg.cn/2185a450d59f49b2a96b3168b2587dcb.png#pic_center
[d9be3515f1c54b9ba81d22763785f166.png_pic_center]: https://img-blog.csdnimg.cn/d9be3515f1c54b9ba81d22763785f166.png#pic_center
[7613d1fb609d44d0861b1d81bcb3652a.png_pic_center]: https://img-blog.csdnimg.cn/7613d1fb609d44d0861b1d81bcb3652a.png#pic_center
[15b0af29bc104e8994716bff0e25f684.png_pic_center]: https://img-blog.csdnimg.cn/15b0af29bc104e8994716bff0e25f684.png#pic_center
[3a01dc60e62c415b812015851343f1c0.png_pic_center]: https://img-blog.csdnimg.cn/3a01dc60e62c415b812015851343f1c0.png#pic_center