致前端最全的离线部署UI详解

今天教你们离线部署UI组件库

 还记得3年前我还是个刚入行的小白，当时公司外派我去国企上班，里面只有内网，不能用手机，就连要用到的Element组件，都是必须要部署在本地的。当时刚入行，对服务这一块认识浅薄，我平时都是在线上看的，现在能离线看，本着好奇心问了一下旁边的老员工，我说：这是怎么部署的，他回了一句，你可以看看http部署是怎么部署的，然后就没了。这对于刚入职的我来说简直就是~ ，另外个老员工就更离谱，问他技术问题，直接会呵斥。
 3年后的今天，我就把之前的技术缺陷补上，同时公开该技术，为以后的IT后背种一棵纳凉树。

第一便是利用vsCode部署啦

首先当然是要准备你的资源啦

1. 下载Element 直接百度到element UI 进入官网，进入github下载源码。
   
   下载下来的源码目录如下：
   
   进入项目目录执行： pnpm install 如下：

之后执行启动命令：pnpm run docs:dev

打开页面是这样的：表示启动成功

如上图所示没有问题。这种方式你就可以复制粘贴上面的组件代码

下载终端命令在终端运行

1. 在浏览器里面输入如图网址，点击框选部分
   
2. 克隆或者下载他，得到资源：
   
3. 进入到项目里面你会看到 启动文件
   

把项目放到vsCode里面打开index.html 3文件，右键用vsCode的live server插件启动。如图：

利用http-server部署

全局安装 http-server 插件,之后进入项目目录，用dos命令启动:

复制地址在浏览器中打开：

如果你比较牛皮 ，想用tomCat部署或者是Nginx部署，私信我！手把手教你。