vue打包的assets文件怎么直接运行

大家好，今天跟大家聊一下我最近这两三周做的哪些事情。第一件事情是我把之前 vivo 二点零的项目升级到了 vivo 三点零做的一些优化，相当于框架升级的一些优化。 第二呢，我发现我的后台管理系统呢，不能打包成 usb 文件，我用第三方的插件去把它升级为可以打包成 usb 文件，就是可以直接在我的电脑上面安装成一个 usb 文件， 打开安装不会再基于浏览器去使用，是基于我自己本身的应用去使用的。然后呢我第三呢又去做了自己 一个尝试，就是我们用 voe 去写出来的。嗯，系统呢，就比如说我们都是写一些企业官网，或者说企业应用的时候，会遇到 voe 的那个 seo， 遇到这样的一个 su 处理的时候，我们并不能把它处理的非常好，在这个时候我们会用到一些第三方的去写，比如说一个奈克斯特去搭建出来自己想要的 符合 su 规范的一个一个应用，我们能够更好的去结合，去写出来更好的代码，就这样的， 但是我们已经习惯了这种前后端分离，如果让我们再去回到之前的那种混编模式，比如说我之前做 ppp 开发的时候，这个 ppp 开发就会有我们直接去混编前端，后端都是 ppt 程序员一个人去写，这样子我们现在的应用大多数还是比较大的， 还是会前后端分离。但是 suv 确实是我们比较头疼的一个问题，当然也有非常多的解决方案能去做的一些解决。第三周呢，我自己就做了这些。

vs 前端开发框架的使用介绍二、好代码生成工具的整合呢？我们在做系统开发的时候就非常方便，有时候否则很多代码因为特别是 跟数据库的字段信息有相关的，包括界面呢，后端的配，呃，根据实体的属性啊，这些如果是一一去写很容易出现问题，那我们通过代码的同一规则的 这种啊，快速的生成，第一个效率提高了，第二个减少了出错的问题，否则一个属性的大小写，或者说是呃编码上的写错，那可能就会出现一些啊，问题需要排除，那就很麻烦。 呃，跟他讲了整合开发包括几个部分，一个是发自 api 后端的一个整合的一部分，呃，前端的一个界面生成跟常规跟主从界面的一个生成， 主存界面就是我们刚才也也大概讲了展示了一下它的功能，特别是在那个，呃是报报价单是吧？在那里面有一个录入啊，那个主存表的录入就会更方便一点 啊。发起 a p i 的 增量开发之前也讲了，我们大概这里看一看就可以了啊，有基于这里面，在代码生成工具里面会选择一个发起 a p i 的 原代码生成， 然后生成之后它会选择表，会生成一些映设的文件啊，就是，呃，包括 model 啊， dto 啊，还有一个呃酷路的表，酷路的类啊，以及 api 的 一个控制器的类啊，是吧？就是这几这几个部分啊， 就生成，我们到时候整合到后端里面就可以了。 好呃，锃亮的开发也是很简单的，它生成之后把它对放到对应的目录里面去，那呃，这张可能具体的话呢，我们到时候参考一下 f s a p i 这个 部分的一个介绍吧，我们大概了解一下 f s a p i 就是 整合 switch 提供一个标准的 v p i 接口给其他终端使用啊，大概了解它的界面 啊，代码生成工具的整合。还有就是做 b s 端界面生成的时候，它有两个部分，一个部分是常规界面，还有个组成表的界面，我们专门做了一个定制，就是为了方便那个界面生成的时候可能会有一些变化 啊，特别是你，你看我们常规界面可能会会选择一些叫做呃走车，这这这种有没有塑形结构啊，以及一些路径的一些变化，那生成之后他也是独立的，有几个试图这样子啊， 这里面会选择在查询条件列表展示啊，他的编辑界面就是为了啊，控制一下界面输出的一个这段信息，这样子就不用 啊，再手动就是删除，这样子减少一些工作量啊。其他的还有个右边的这个我看看这位哈，这里面会提供一些自然自然选择，他就一旦碰到这个自然可能就作为下拉列表来展示，就是这样的一个效果啊， 好，还有组成表的生成呢，就是它有个主表重表，然后生成之后就是列表，可能就是展示这种方式，然后编辑界面的时候呢，它就会，呃，之前已经展示了哈，就会有一个编辑的组成表的一个界面。 好，我们呃安装环境呢，其实，呃，这个 b s 端跟 h 五端它其实都差不多的，那开发工具我们讲了前后端跟 h 五端，它都是用 vs code 来进行开发，那我们也需要安装一些插件。 呃，开发环境的准备也大同小异。呃， b s 端的一个项目依赖跟 h 五端的项目依赖也是开发商。呃，准备上也差不多啊，开其他的一些使用的一个工具介绍，大概就是我们这个开发环境的一个概要 好。呃，安装 esco 环境呢？我们首先呃在这里面呃会打有这应该不用怎么详细解吧，介绍吧介绍吧，因为这个安装很容易，这个 fitco 的 也就是为了一个方便的一个 ai 辅助助手，可装可不装啊。 啊努多跟跟这呃 m v m 的 概念要了解，努多就是我们 vs code 里面做 b s 开发或者 h 五开发必须要安装的一个环境，它 它也是我们嗯，这种呃前端的一个核心的一个内库里面了，然后我们这里面要下载它进行安装。第一步先安装那个 windows 版本，你可以找一个比较新的稳定的版本来安装。安装之后呢，我如果你需要，因为我们项目之间 的录的版本可能要求就 m p m 版本可能要求不同，那我们就需要安装一个 m v m 来做一个版本管理的工具。呃，我们这里会讲，就我们前面讲了，就是有 bs 端里面那个环境呢了。要了解这个 mvm， mvm 就是 个对 node 版本的一个管理，如果我们需要安装，安装了 mvm 之后我们就可以进行不同版本的 node 的 一个安装了。我们假如我们这个是二十二点幺六是吧？ 我这个 b s 端或者 h 五端，呃，最低的应该二十二点幺二也可以的。呃，我倾向于目前我装的是二十二点幺六这个版本，那装上去也没问题啊，装上去之后就用这个版本来装，然后呢？ 使用这个版本就就你就这样子使用，然后他你查看当前的版本，就是用这个查，你可以列出当前所有的版本，假如我们来看一看，假如我们这个是 b s 端切 control 键换换到我们这个控制台里面去，我们就列出我这个几个所有的 mpm 的 一个版本，那是吧， mvm 卡了，我们是用哪个？其实这里已经说明用新号，这就是我们当前用的这个二十二点幺六，就通过这个方式来进行了解。 如果我们 mpm 没有安装，怎么查看有没有安装呢？我们在控制台里面啊，就是 第一次，我不知道你们一般你们装通过 word， 如果这个版本已经显示出来，那说明我们这个 node npm 已经安装了，如果没有的话，可能就下载对应的 node js 来进行安装就可以了。然后安装之后呢？可能 是吧，你可以再安装这个 npm， 我 们也可以查跟，我们这个 pmpm 跟跟那个版本是是哪一个？ 十点一点三是吧？这个 n p m， 呃，比这个 p p n p m 都可以，但大多数我们现在的 vivo 都是用 p n p m， 它这个管理的包会更方便更快一点，据说反正差别不大，使用命令也是基本上是一致的啊，我们大概就这个是它它在对比啊，了解一下。 呃， pmpm 可以 用 app 或者用 install 来进行安装，包铃木或者说是按 install 的 方式来安安装。运行那个呃， script 的 时候可以用用 pmpm run 或者直接运 运行它这个 script， 这就是我们经常开发用到的一个命令，这是查看版本，你看我们这里安装依赖是怎么安装呢？首先呃 切换到这个我们的目录上去，是吧？我们打开这个目录，其实就是已经我们当前的这个目录，只要我们不是在这目录下，我们就要切换啊。然后安装这个就是按照所有的依赖，因为我们导出项目的时候，我们可能第一步是没有这个 这个这个目录的，这个目录就是依赖包，它是对应着这个项目来的，所以如果说没有的话，我们第一步首先要要安装它，让它把整个 package j s 的 那里面， j s 里面的一个安装包啊，就是这里面啊，我们可以看到 有个叫做 package package 这包的依赖，这个内容也要讲一讲，这个里面就是我们运行的一个命令啊，就是大多数运行这个是进行运行，然后打包可能是用这个或者是用这个，看你具体选择哪一个 是吧？这个依赖我们就一般就是主要是用这个跟这个，那我们这里面会有很多些包的， 呃，区分有两个，一个是开发环境上的，一个是呃需要部署的时候用到的一个相应的依赖包啊，你可以看到有两个他们之间的命令就差一个参数，你要理解就行了。这个就是其他的一个描述啊，我们大概了解一下。 好，这里面我们呃打包运行的话，呃运行项目就是 pmpm d d e v 是 吧？因为我这里面已经启动了那个发射 api， 这里面已经启动了一个后端，所以 我们我们把前端打开啊，前端这里面打开，切换到 control j， 切换到这个控制台里面去，我我清空一下，然后 pmpm 的 v e v 或者 one deal 这两个都可以，我们习惯用这个，那直接就这样子就跑这个项目起来啊， 它这里会提示我们跑这个项目的一个过程啊，它会有一些提示，是否已经成功啊？成功是访问什么端口啊？它会这个 端口的配置，就是在这里面我们这个启动配置，这个是以这个环境八八四八为一例，那我们它这里面马上就启动起来，那我们这样子打开，打开之后呢，我们就可以看到这里面，是吧？ 他就出现了我们一个前端的一个界面，我们这里默认密码为空。呃，我们是幺九八，就是为了做一个验证。那个 好，可以看到这个后端同时会打印一些登录啊请求的一个接口，那这个成功之后呢，他就就会切换到 切合到这这里面去啊，这里面有包括，呃相关的一个图标的一个功能，是吧？我们跟你讲图标包括各种现状图，还有这里面就是我们基础的业务功能，包括用户管理， 我们这里再把它功能大概展示一下吧，也是一个呃了解的一个机会，包括我们的机构管理，是吧？ 因为我们整个系统可以配置为动态菜单，也可以配置为静态车，我们呃调整之后，如果是动态菜单，它就是以我们这个菜单配置为主啊，这个 以这个为主啊。还有其他的我们就不再一一介绍了，反正这里面基基本上我们前面介绍的那些功能包括什么字典管理啊，是吧？ 以及以及什么业务规则的管理啊？是为了生成编码报价单呢，销售单呢？的编码做用途的，然后只能做一些新闻的资讯的一个维护， 是吧？还有其他的包主报价单啊，特别我们刚才讲的那个。哇，这里这个接口有个错误，回头我调整一下。呃，这里面有有个报价单的组成表的这个概念啊，这就是我们用到的一个主要的功能，包括我们这里面还有些日字，是吧？ 啊，这是暂时正常哈。啊，这里面我们就讲一下，就是这个环境怎么启动起来的，然后以及如果是打包，我们这里还没有讲，最后可能会讲打包，打包直接通过这个命令会生成一个 diss 的 一个目录，把它啊复制到那个 engine x 里面去，那这样子它就启动起来之后它就可以通过啊。 u i l 就 访问啊。 好，前端的环境准备，我们需要安装相应的插件，这个插件有相应的说明，主要就是为了这个，这个好像我看一下我们这个前端项目应该是不是这个的， 我这里可能有稍微调其实，呃，我们这里可能讲一下，可能我需要，如果是说可能我前端这这这种这个原子化 css 的 一个样式更 对，一个插件跟它跟上面那个是类有点类似的。呃，两个选车机，因为我们 h 五端好像选的是这个 b s 端选用的是这个，它两个百分之八九十都差不多的，只是不同的出。呃， 不同的一个公司出的一个东西啊，有两者了解的接相互借鉴啊，我们大概知道就行了。 v o e 的 可能粤语法的一个 一个教验，还有这个 type script 里面的 v o e 的 语法的一个教验啊，这个这些插件我们都都把它装上，有一般我们在呃 p 呃， 就在哪里啊？就是在前端那里面我们会有一些相关的。呃，扩展，这里安装的时候他会自动提示你装不装这个东西，相当我们把这个相应的把它确认，他就会自动安装啊。如果我们确实他没有装的话，我们就按照这个搜索，然后让他装上去就可以了。 大家了解他的插件，插件也就是在我们这里面进行。呃，这这个标签扩展，这里面你可以看到很多，像我这里面因为我做了很多不同的项目开发，所以他这里面的插件可能会有很多啊。哎，刚才讲的这个是吧？然后可能有 有拍摄，我拍摄环境，可能做后端的，他也是在这里展示，还有其他的呃，例如可能 yes 另做一个，他就会自动装哈。这个 还有可能这个对于这个我们做那个多语言的时候会用到，反正插件的时候会他那个推荐那里面会自动装一些，然后我们如果根据需要，我们也会可以手动的添加一些 啊。这里面前端开发刚才讲的这个 pick package， jason 这里面有相应的一个内容，我们就讲了，是吧？如果 pmpm 的 安装的，呃命令要了解一下啊，反正这里就无非就 at 或者 install， 通过这个包这个可以带一个版本， 那个 d 呢？就是代表这个，呃，这个 package 这个里面，呃，我们回头刚才讲的那个， 如果是带一个 d 就是 一个命令，呃这一个选项的话，它就附它就安装到这个 develop 呃 dependence 里面去，如果是我们，呃这个项目需要用到的，我们就，呃就是我们部署环境也需要用到，我们就安装在这里啊，要关注就不用带参数。 好，这个了解一下这个 pmpm 的 一个安装包呃的过程就可以了啊。 然后安装开发环境，我们工具呢？其他工具我们要准备一下，大概两，如果是说我们要维护数据库，肯定做前后端开发的话，肯定涉及到数据库的维护跟导入导出，或者是啊一些相关的一个查看处理。 那如果是基于 micro 啊，或者说其他的，我们就是 networked 肯定是比较好的，我也很喜欢这个，它支持啊 micro 啊， postgraduate 啊这些常规的数据库。 这个我们我这里用的是十七这个版本。设计化啊，如果你说做业务系统的开发的时候，你肯定要做数据库的一个设计， 作为表的设计呢，我们建议用 power designer 来进行设计啊。 api 测试呢，跟大家讲了， api 有 一个 api pose 的 进行一个接口测试，就我们做相应的接口来进行一个测试，就 api pose 的 对大概说一下吧，因为我是我们常见到的一种 接口调试。 好，我们测试一下登录接口吧。呃，首先我们要全机参数，看里面里面有没有传参数，我们第一，因为我这里面有一个这个参数名，一定要注意这个就是我们那个令牌的一个头部的一个标记， 呃，开，开始我们要把这个取消，如果你有的话，没有的话你就无所谓了。首先我们找到这个用户登录是这个地址，是吧？那它带有个 body 的 信息。呃呃，我看看是在哪里先？ api log body， 哎，我的 body 呢？ pose 是 这个吗？呃，我看一下它这个参数 啊，这它这里要，要要插入那个应，应该是，我看一下这个它要插入两个参数，这里 这个 body body 应该是 wall， wall 里面传，传哪里去了？呃，我看一下这里面没有，它要传传递呢那个，哎，我看一下，稍等一下啊， 我测试一下。呃，运行接口调试？ 对啊，在这里调试。这个设计就不管了，我们一般都是在这个调试，你看到这个里面这个登录接口是 pos 的， 然后 url 就是 我们的端口，然后再加 api 的 一个前缀，然后我们这个就是它的路由的名称，那我们带有这个信息， 就是一个 login name 跟 password， 我 们测试一下发送它这个就是一个令牌的信息，那这个令牌信息我把这这段考过来，在全机删除，这里加上这个 head。 然后呢？把这部分改了， 因为我之前用了这部分，然后保存，它就会每次会请求其他接口的时候，它就会自带一个 一个令牌上去。那我们一个头部信息的令牌，那我们这里看那个测试这个接口，这个是，哎，哦，这是给力，我们直接把这个删除，是吧？这个删除接口，那如果是 get 接口，那我们用户信息的一个 get 接口。 好，我们 get get 信息，它就会返回一个相应的一个信息，这就是我为我们进行接口测试的时候方便，因为我们就知道它返回的信息是什么，是吧？那我们这样子就可以很容易整合到我们界面上去。 好，这我们大概讲一下，就这个哈啊配套的生成工具呢？我们也前面也应该也有说明， 就是我们后面再讲吧，大概讲讲就行了啊。运行项目，我们刚才讲的已经通过 pmpdev 的 方式来运行这个项目， 就可以看到它监听的端口以及呃通过 url 我 们推荐用 webcom 这个方式来进行一个测试，然后开发啊，然后我们做呃开发的时候我们会有一些开发工具进行跟踪嘛，可以查看我们具体的一个错误跟信息，然后我们 这里面可以让它停靠到底下去吧，然后如果是说我们可以跟踪一下，呃，哎，等我一下它这里有一个停靠，然后选择这个界面， 它就是展示的这个效果啊，那你你可以进行呃查看啊，这里，呃进行测试的时候它有网络请求哪些哪些内容，那我们也可以看得到，对不对？ 这就是我们通过呃浏览器的一个调试，或者它的一个开发模式进行一个跟踪了解，这是我们常规做前端开发也需要了解的一个技术。呃参数修改啊，前面还没讲这参数修改是它这个里面有，一定要注意这个，呃 有一两个路由 vip 哪个接口呢？我们就通过这个呃一个叫 返现代理的方式吧，就是他就是指定这个出现这个 api， 他 就跳转到这里去，是吧？就是我们通过这个返现代理就实现了呃一个 api 的 一个对接， 然后它这里如果是我们实际部署的时候， n g n i s 部署的时候这个是不起效果的，所以我们要配置一下它的相关的那个 n n g x 的 那个 config 的 文件，就是这个配置文件，利用我们这个可能增听这个端口，那就配置这个是吧？ 那如果是说其他端的，那可能你就配根据你的需要的配置了，我们这里有有些案例啊，可以参考一下，这后面我会讲，我就大概了解一下。有，有跟你说一下，有一下这个文件。 嗯，好，前面我们讲了，了解了这个这个 vs q 插件 以及 n p n 安装切换运行，是吧？配置 wide config 里面的那个反向代理，还有这个我们侦听的前端的端口，这几个环境变量啊，都了解了 啊。目录的话我们大概了解一下整个目录它的这就是我们截图的一个目录，这里有相关的说明啊，其实主要就是在这个 s r c 这个目录下，然后这个是 locate 一个多语言的一个配置文件， 然后 type c 就是 我们 type c 的 一些定义，它这个通过配置它就指向这个目录，它首先很多相应的接口，它就是从这里面找 啊。 api 就是 我们对应的后端的 api 封装类了，组建自定义组装的啊，自定义组建的有个目录，其他的都逐步的去上课，还有个是 utos， 还有个 views， 这个是常见的，是吧？我们主要就涉及这几个，然后 常用的这几个就要了解，这个就是我们从项目这个截图里面去看啊，过一遍大概知道，然后具体的去参考那个 啊项目目录来了解就可以了。然后项目里面还有一些啊主要的一个文件，他不是目录，是文件，他绿的密就是描述文件，我们会讲一些项目启动运行跟大概的介绍的一些内容啊，他是 markdown 的 格式。 呃，你我们表它就是个文本文件，它是 markdown 格式，一个呢方方便预览，一个呢是方便书写啊，这个呢？ package 就是 我们依赖文件跟 script 命令， 这个是入口的两个文件了，是吧？常规 vose 开发最关键的这两个文件，这就是配置文件，这个是 type crib 的 一个配置项啊，这个是我们项目的一个配置信息啊，大概就是这些，呃，我们项目要怎么整合的话需要了解到。呃， 需要了解这些相关的信息，刚才讲了 bc api 的 一个处理，是吧？还有我们 http 请求的时候，我们要了解它这个不同的方法请求有什么差异，参数怎么传？ 我们在项目里面也提供了一些，生成的时候也提供了一些参考代码，是吧？ bc api 我 们每一个生成的项目里面都会有一些参考。呃，我看一下现在是在哪里？ 刚才讲了这个是吧？这里面会有这几个常规的参考，你就按照这个方式来传递就行了。这个传递的话这个就是我们这个路由的一个构建，是吧？那我们获得这个 api 就 有相关的一个接口，那我们 找一下那个 c r m custom 那 个 edit 里面是吧？ 呃，不是，呃，不是，在这里是在 secure custom 啊，是这个吧？ 这个是个单独的一个文件，为了方便了解它的整合的过程啊，这里面呢，它有有像我们引用的时候为为了这个 custom 的 接口呢，我们只需要直接这样子引用就可以了，那么 我们开始的门它它它导入之后呢？它就可以进行一个，你看这个方法是不是就有它相关的一个参数的提示了？ 这个就是 type c 里边比较好的一种智能的一个提示，这样可能我们还没有写标准的一个注字啊什么的，那你可以根据你的需要进行一个书写 啊。大家了解一下刚才这个 api pos 工具也大概做了一个啊介绍啊，代码生成工具，我们啊也做了一个了解。 打包的时候就乱 build 就 可以了，或者直接 build 啊，这个都是。呃，这里有 n g n n g x 里面的一个。呃， 那个命令啊，大概我们在部署的时候要做一个了解。呃，我们这个安装的话很容易就你就找到这个 n g n s 直接下载包，有一些直接下载之后他或者安装也行，直接下载包之后直接找到他的目录，也通过这个命令 来进行一个运行跟停止。那像我们如果运行了之后，我们就可以通过这个命令进行查看是否哪些端口在增听啊，或者说是案例在使用啊。 那如如果是发现有重复的或者什么的，你可以停止它。这里不是要停止吗？或者说配置文件进行一个修改，你直接用 log， 它就会把配置文件进行一个更新，就加载最新的配置。那特别对我们那些设置， 呃，就是设置好之后改动的变化就会及时反映出来。 嗯，这里我们再讲一个，就是它的那个呃，打包部署的时候的一个很重要的一个信息了，这个就是要，对啊，把那个返乡代理配置到 n n 井 x 里面去是吧？ 这个里面就实现了我们这个一个端口的一个转发，那这样子才能够完整的实现跟前端的后端的一个对接，这就是我们啊整个开发的一个过程了 啊，可能我们在具体的开发过程中可能有些代码啊怎么使使用，我们就可以参考一下这些书选，因为大多数我们都是根据代码生成工具来进行生成，因为里面有啊，已经预备了很多生成的一些代码在里面，我们只需要进行一些修改啊调整就可以了。 很多时候啊不需要从头来写，包括我们这些这些属性的定义都已经加上去了，我们无非就是可能在界面上要 增减一些字段啊，或者把一些字段配置成一些相关的一些空间，做一些调整 啊，就是做最主要是做这种工作量的多，就有可能我们查询条件里面和啊这个是编辑，编辑界面可能有些字段我们不需要显示啊，那就删掉它是吧？在相应的代码里面可能做进行一个调整，有些可能是下拉列表的进行一个处理， 这就是我们常规用到的一些啊，对代码进行一个开发的一个技技巧， 好整合过程就是这样子。那我们前面讲了我们这个部分回顾一下啊，这几个部分的里面我们已经讲了，就前端后端大概有多个做了一个介绍，以及代码生成工具的一个整合，包括我们 vs code 里面运行前端项目 以及一些相关的一些工具的了解，打包部署，这个也大概做了一下，但不是这里面因为时间的原因打包部署这块， 就到时候直接参考那个命令来做就可以。呃，还是比较简单的， b s 的 简单或者 h 五简单的开发都相对来说都比较容易啊。可能 啊，比较难的可能就是对于一些自自定义组间的开发啊，或者一些界面的。呃，个性化的一个处理那种可能就需要花点功夫来进行一个 更高阶的一个学习啊，非常感谢。

和前端小组学 view 三元码系列课程在上一章节我们深入研究了 def 算法，我们知道了 view 如何通过 l i s 来最小化 dom 操作，但是有一个更基础更贴近我们日常开发的问题，可能很多同学并没有研究过，当我们在代码里写下 set this 点 count 的 时候， view 到底在 view 做了什么？ 看的明明在定义在 setup 或者 data 里面，为什么 this 能直接访问到？并且 real 三是又是如何保证这种访问速度极快的？而今天我们将去深入探讨 real 三的组建实际化，并且去揭开 this 背后的秘密。 一切的开始还是那个熟悉的 patch 函数，当它遍历虚拟到我们数的时候，会发现一个节点的类型，是组建还是是组建时，它会调用 process component， 而这个是组建生命周期的第一个分叉路口。 process component 的 逻辑其实非常清楚，如果是第一次 就是会走挂载流程，而这里又分为两种情况，就一种是普通的组建，那就是去创建实体，呃，另外一个就是 keepalive 组建，它会去利用缓存跳过创建，呃，如果说是 n 一 存在，那就会走 update 的 一个逻辑流程。 如果是普通组建的挂载，那并会执行 mount component， 那 我会把它称为挂载三部曲，每一步都职责分明。首先第一步就是创建实体， 生成一个包含各种属性的大对象。其次就是设计主键，它就解析 purpose， 处理 stores， 最重要的是解执行 set up 函数并抽象及 state。 而第三步就是 set 建立，副作用就是 set up learner effective， 去安装，去建立响应式连接，一旦数据变化，立即去更新矢图，而这也是下下一章节的重点。 呃，我们去首先会去回到第一步就是 create component instance， 我 们来看一下，在它调试 view 的 时候，经常能看到一个巨大的对象，而这个就是组 建实体 component instance， 那 我们来看一下里面是有什么？首先它有个 u i d 维标识，用来调度排序 we node， 它里面去组建在副组建中的渲染产物，而里面有 plus y 就是 渲染中的访问的技师。然后另外有个非常重要的 access control， 而这里面就后面会说的就是性能优化的关键缓存。 呃，在这里有个面试必问，而且容易比较混淆的概念就是 weot 和 subtree， 它到底是什么？ weot 它其实是一个节点，是一个组建，在副组建中 的样子是什么？就比如说 mycapron， 它是一个组建，那它就是一个组建，而 subtree 就 这个组建它自己渲染出来的实际的样子啊，就比如说这个 subtree， 它自己渲染出来的一个 test 文本。 那么用一句话总结就是组建的挂在本质上就是将 we know 的 转化并展开成 subtree 的 一个过程。组建实力创建好了，接下来就是 set up component 去会出使化状态， 它首它会去做 in need purpose 标准化 purposeful choice in need flows， 将插槽编为函数， set up state for component 执行 set up 核心。而在 set up state for component， 它其实会去做四个非常关键的一个操作，它首先会去创建 空的 access control 对 象，而这个非常重要，待会儿我们会去讲它去会去创建 instance 点 plus y， 它会调用 set up 去传播 purpose 和 contest， 同时它还会去处理 set up 的 返回值，可能是 promise 或者说是一个对象。 大家想一想，渲染其实是一个非常高频的过程，如果每次去访问 system account 的 时候， view 它都要去， 它都要去检查 set up data， 检查 data， 检查 purpose 或者说是检查 context 吗？ 那是答案是不需要的，因为刚刚我们说的的 access control， 他 其实他会去，在你第一次去查找数据的时候， 他会去缓存这个值，那你再下一次再去查找的时候，哎，他就立马的去找到这一个缓存值，而 而这个性能它是整整提升了非常啊，非常多倍的一个性能数据。然后这就是为什么 view 三在运行时性能非常强悍的一个细节所在，它用空间就是一个缓存对象去换取的一个时间。 而在我们之前一个章节去提到的一个就是 instance 点 prose y， 它其实它会去出场一个 new， 它会去出场一个 new purpose 的 一个对象，而且它会去调用 public instance prose y headers 去会去做这么一个动作。而当我们去访问 this 点 counter 的 时候，实际上是在访问这个 prose y， 而 public instance prose y headers 它定义了一套严格的属性查找机制，当 而在其中内部他去，他去会去做这样一个动作，他会去拦截 get 的 一个操作，去统一一个属性的访问， 然后其次他会去优先去查找 access control， 然后， 对，然后它会去在如果没有命中缓存的话，它会去按优先级去进行一个查找，比如说，呃，它会去做一个 set up state， 然后 data 或者是 purpose， 然后然后最后就是到一个呃 contest 和 global， 这样子的话就五五层的一个优先级， 这也是五层的一个优先级，层层递进，然后去进行啊进行一个查找，当一旦查找之后呢，它会去进行设置一个 cache 缓存， 而而而 plus y 它不仅只负责获取，它其实还负责写录。而在 set 拦截器中，其实 view 它构建了当下的数据库的一个防线，它允许修改 setup state 和 data， 因为它们是响应式的去改了， 它会去触发更新，但是它其实它会禁止去修改 purpose， 这就是为什么我们在子组键中去修改 purpose 会报错的一个原因。同时 它会去禁止修改 dollar 开头的属性，就是为了防止你把 dollar item 或者 dollar 给覆盖了，导致系统崩盘。 而我们来这边来讲一个综合的应用场景，就是优先级的时时战中，就是在比如说像这种场景，像在 composition api 与 options api 去混用的情况下，它其实它会会返回一个显示，会返回一个零，这为是为什么呢？ 这是因为 setup 的 优先级，它其实是会比 data 的 更高，因为 get get 哪些器里面它会去检查 has， setup， binding， 然后同时如果 purpose 里面，如果 data 中定义了 purpose 同名的属性，那 data 会进行一个优先。 呃，我们看完这一个章节之后，我们其实会有一些相对于的一些思考，比如说 access catch 是 否是有必要的啊？它，它跟现代浏览器的 inner catch 和 real gs 的 手动缓存是哪个会更优啊？首先需要一点呢，就是浏览器的 inner catch， 它针对的是属性访问模式，而非属性来源判断，而 它没办法去优化动态的 plus y 的 属性查找，所以是 access control 是 必要的。呃，那第二个就是优先级的设计，就在我们刚看到 git 的 访问链路的时候，就 set up a state， 它是优先于 data 的， 其实这在 view 三中它是明确是比较推荐 composite api， 然后同时呃，它会去一些避免意外覆盖，比如说 set up， 它是更新的代码，不应该被旧的 data 覆盖，然后为了保持一致性，就是 set up， 在 data 执行，执行优先级也是更加更高的。 而第三点就是 post 啊 purpose， 它的指读为什么啊？禁止修改，这是因为数据永远是从父流向子调试，它其实只需要向上查找， 而使用 vmodel， vmodel 其实也只是一个语法堂，本质上是应脉的时间双向本定，本质上 non 是 单向流的啊。同时禁呃，与它的禁品 react 相比，它同样禁止直接修改 purpose， 这是现在浏览器的框架的一个共识。而 this 的 一个回到我们 这个主题的一个流程， this 的 本质是什么？它其实它只是一个代理的 contest setup state data purpose 的 一个对象。对 那，嗯，好的，那大致的流程就是按照这个流程， ppt 我 们已经讲解完毕了，那我们开始看一下我们的 mu 的 一个实现原码， 在啊 process com component 里面，它其实是会去走一个 mount component， 一个呃，一个创建，就是它是初次挂载，那初次挂载它其实会走刚刚我们说到的一些流程，就是 创建赋用主机实力处理异步， set up， 然后最终调 set up run 的 effect effect 的 函数。我们先略掉这些啊，略略掉这些第一位的，然后我们会去，它会去创造一个 component instance 的 一个属性， 而这里就是去做一些啊相对应的属性，比如说去继承父祖英的应用，应用上下文跟组建使用 winnote 自带的 a p p contest， 然后它其实还包含局配置，指令组建， mixin 等等，就是 a p p contest 的一些参数，然后同时这里就是一些对应的一些属性，呃，我们来分类来去进行，来划分，其实第一类就是唯一标识与组建关系，然后比如说 u i d 这些着重此类的啊，对，然后第二个就是响应式副作用相关的，呃，待会儿在下一个章节，我们会着重地去讲，呃 effect update job scope， 然后还渲染器相关的，就是 linda browse y， 然后 exposed， 还 expose browse y， 还有 with browse y， 然后是一代着重相关的，呃 providers， 呃，像 provider inject 机制的，呃数据源 i d s 呃 access control 就是 之前属性访问， 呃缓存，那 render control 就是 v one v 杠 once v memory 的 储存储缓存，然后包括主镜与指令注册表，而这个也也会在我们接下来的一个大章我们去详细讲解啊。 prox 和 ems 的 一个配置， 包括它的事件系统啊， persuade 的 一些默认存储 or choose 的 继承，还包括它的组建的一些状态 suspend 相关的 suspend。 后续也会讲生命游戏周期这些周期函数，这些生命周期勾子函数啊，后面的章节会详细的去讲解，对， 然后它就是啊，这里还需要特别注意到的一点就是自定义的行，自定义的一些元素的一些过程，然后它就会去返回这 instance 的 一个实力。 对，这是它的第一个创建 create component 的 一个过程，然后之后就是 we keep alive 去注入渲染器实现的内部实现。 呃，然后这里就是一个 set up component 去创建，去 创建一个 component， 去初步化一个 component， 然后这里它其实会去做一些逻辑操作，比如说，呃，是不是是一个 ssr 的 set up 调用中心？呃， ssr 我 会也会专门去讲解一个 章节去讲解，为了防止这个章节过多，所以就会去拆分去讲解，然后他会去做一个呃 windows 去做 purpose children， 这是 unit purpose， 就 初步化 purpose， 将副组接的 purpose 标准化验证，想啊转成一个响应式的一个变化。 对，大家可以看到 in in it purpose， 它会去创建两个对象，然后去进行处理，然后末根据标准化的，然后去将其进行一个映设，然后去维护维护它的一个响应式的一个属性，然后去，然后返回 那 innit stores， innit stores 就是 一个创建叉槽对象，然后检查是否有叉槽子节点，然后这同时也是有 shopflex 来进行处理，然后是否有进行优化， 然后如果是有优化了，那就不需要标准化，直接赋值。然后如果是不是编辑器的叉槽，就是手写 n 的 函数的话，它就会去进行一个标准化，然后第三步种情况就没有叉槽标记代用此节点，那最一般是，最一般是 default 叉槽内容，这是 对，就是当组建没有使用 stored 但传输子节点的情况，然后它同时也会进行处理，将它进行标准化之后，然后对，然后进行一个执行，然后然后到这里就是一个 set up state for component， 在 这里它会去获取组建定义的对象，然后，呃，这些都是无关主要的细节，那我们看一个核心步骤，核心步骤就是我们刚刚说的 catch control， 就是 创建属性访问 缓存，就是用来缓存 this 点属性查找结果，而而它的不，而它的一个权重就是 set up state， data purpose 和 contest， 然后最后就是一个 global。 对， 然后去他去创建一个公开的 this 代理对象，这代理对象就是模仿和渲染器中访问的 this， 而这里 public instance browse by hand， 就是 实现了查找属性查找的优先级，我们点进进去看一下，嗯，这里代码样式比较多。对， 就是你一个详细的一个 get 和 set 的 一个过程去进行查找。 然后第三步是执行用户的 set up 一个流程啊，首先要注意的是，如果他去执行的话，他就会去暂停渲染器的追踪，因为 set up 执行过程，他的属性 访问，他其实会被嫉妒为依赖的。对，所以他先暂停，然后同时读了声明的第二个参数，那就会创建 set up contest， 包含这些属性， 然后就是按这个流程接下来一步一步地往下走下去去恢复，然后恢复当前的实力。然后需要注意的是，有些异步 setup 或者是 server prefetch， 则用非异步组建包装，然后并且包进行处理， 然后这是一个 is assign setup， 然后这是同步的，然后最后是没有 setup 函数就直接进行处理。 对，这是一个 set up for me 的， 然后对于这些就是有组建状态就执行完整的组建设置流程，然后函数组件就直接返回 onify， 然后最后就直接返回这个最终的一个结果 amend component， 之后他会去执行到下一步，就是如果是 set up 是 异步的，然后去他需要去异步逻辑进行处理，然后最后就是一个这个就 set up learn the effect， 这个是去建立一个渲染和试图更新响应式系统的一个核心的一个逻辑。对，下一章会去详细的讲解，然后讲完这个 mount component， 那 我们来再来讲一下另外一个流程，就是 update component， 其实 update component 它这里有个流程，就是啊设置 update component 就是 判断 它的结果是呃是触发响应式 effect， 还是仅是同步 v， node 和 l 的 一个系列，而这个流程也会将在下一个章节去进行详细的讲解。对， 那我们的源码就大致就是这样子的。呃， 那我们进行全章的一个总结，在整个呃核心流程中，它其实是有些核心的一些啊函数，比如说像 post component 去决定挂载或更新 create component instance 去创建 多属性的一个实力，那 set up component 去出初步化数据，并创建 process y， 而 public instance process handles 去统一了 gist 的 访问啊，其中有一个非常关键点就是 access control， 就 实现了非常属性访问性能的一个量级的一个提升。 呃，对，呃，现在就组建实体创建好了，即使也能访问对象，但是有个最核心的问题没有解决，就是创建后的实体如何驱动重新劝呢？就是当数据变化时，是谁通知的数据更新。我们将深入 set up learn the effective effect 去探索响应式系统与渲染的连接，以及 view 是 如何通过一步调度 schedule 来避免浏览器卡死。请务必关注我的频道前端小组。如果这篇文章对你有帮助，请欢迎大家定点赞、收藏和转发，这对我非常重要，对，我们下期视频再见！

怎么还有前端工程师不会表格导出 excel？ 那么本次的项目呢，采用的是一个 v o e 加热门框架的这样的一个项目，那么表格导出 excel 呢，是一个比较常见的功能， 一般呢会由我们的后端工程师来完成表格的导出，但是呢也会有一些特殊情况需要我们全单工程师来完成表格导出的这个功能实现，对吧，都给我学起来，卷死他们！ 那么只是表格转 excel 的文件的话，我推荐使用插件 x l s x， 但是这个插件只能实现简单的排版输出。如果想要样式的话，那么我推荐使用插件 x l s x high， 它可以实现单元格背景色区中自动换行宽度百分数的效果的展示。

我们日常办公中，像这些这种 a 四文件，通过打印机扫描的时候，扫完了之后都是一张一张的，我们今天介绍一个软件呢，扫完了之后呢，它会自动按照顺序成为一个 pdf 格式或 gpg 格式。 然后呢我们说一下这个软件叫乌斯根，这是界面，我们打开了这个界面，他有有选项，然后基础标准专业，我们一般是选基础型，因为我们对于他的质量或者各方面没有特殊要求。模式是 有送纸模式和平板模式，那假设咱们的打印机呢，只有平板啊，就是那个玻璃板，玻璃面板中扫描我们就选择平板，如果呢我们的打印机复印机上呢，有那个禁止器，我们选择这个送纸， 这个这个戒指呢，他已经默认为 a 四了啊，这个是自动这个默认文件处理呢，我们可以通过这艾特，然后选择一个扫描完了之后存储的一个文件夹， 文件类型有 pdf， 然后有 gpg 还有 tiff 格式，文件名他是自动命名的，也可以咱们可以选择，也可以从这一更改，然后这些选定之后，操作完了之后呢，就直接点扫描， 直接点击这个扫描，然后这个机器，这个时候机器就在扫描之中， 你看第一张，第二张，第三张 全部扫描完毕，这个时候呢它就会自动给你形成一张一个文件，一个文件，你看这是第一页，第二页，第三页，把这三页呢放到一个 pdf 的 文件夹里了，一个文件里了，非常便于我们编辑和存储。

ok， 这个教程我教大家怎么导入 spring boot 或者是 view 的 项目，不管你是从我这边定做的系统，还是从网上下载的，或者是 csdn git 那 边下载的项目，都可以看。我这个导入教程啊， 分为两个版本，一个是单纯 spring boot 的 项目，另一个是 spring boot 加 view 的 项目，然后数据库呢是 my circle。 那现在几乎上几乎的开源系统都是这几种技术上啊，那这个教程我就教你们怎么导入，如果你没有，如果你的，你从别的地方下载的软件有问题的话，也可以下载我这个资料，我这个资料是免费分享的， 你可以在我的 b 站，然后私信我资料二字啊，就可以 啊，自动回复这个飞书文档地址，我们去访问这个飞书文档地址，然后在这个资料里面有个源码，文档里面找到这个源码分享啊，我们可以点进去下载一下这个资料是二零二五年十二月份的这个资料。 ok， 那 下载下来以后就跟我这个是一样的了啊。当然在导入之前你还要先进行环境配置，如果你没有环境的话，你也可以看我这两个视频，一个 是啊，一个是 mac 口的，一个是 java 环境， jdk 和 maywen， 如果你是 vivo 的 话，还需要有 note 这几个环境啊。 ok， 那 这个 项目介绍就到这边。 ok， 接下来我们来导入 spring 布置项目，如果你是 spring 布置加 view 的 话，也先跟着我导入 spring 布置，因为这个跟单纯 spring 布置都是一样的啊， 首先我们的环境一定要保证已经配置好了。那啊，首先呢，打开我们解压完项目以后啊，基本的一个基本的 supreme 项目啊，里面有一个 s r c 和 pos 文件，那其他无关的文件呢？ 呃，你也可以保留，也可以删除，那你如果保险起见的话就可以留着。如果是我的项目的话，正常就只有这两个。挺简单的啊， 然后 springboard 加 view 的 项目的话，一般还有一个 view 文件夹嘛，对吧？那这个等一下我们再来导入，我们现在先来启动这个 springboard 项目， ok， 我 这边是右键可以直接用 ide 打开，那你们如果不可以的话，那你们可以打开 ide 以后呢？然后这边有一个 open， 或者你第一次打开 ide 也有一个 open 入口啊，然后找到这个项目的地址， 你看这个 idea 已经帮我们标记好了这个，这个是一个啊，美文项目或者是 idea 项目，我们现在选择一定要选择这个根目录啊，我们选择这个路径文件夹打开， ok， 然后把那个关掉， 打开以后，我现在打开以后，它是首先第一步就是配置 jdk， 我 可以看一下这个碰文件里面有没有对 jdk 有 要求，可以拉到最下面。我这边的我这个项目的要求是 jdk 二十一， 或者你也可以看一下你的视频布置的版本，比如我这个视频布置是三，那至少要 jdk 十七以上，如果你的是视频布置二的版本的话，那 jdk 一 点八就可以了。 我这边呢是 jdk 十一，所以我要在这边 file settings 啊，这个 project structure， 也就项目结构 这边我要指要指定一下 jdk 二十一，如果你这边没有 jdk 的 话啊你你要这边去添加啊，艾特 jdk， 然后去找到你的 jdk 地址，当然如果你是按照我的教程去做的话，你这边是应该会有的。 好，那添加完 jdk 以后，第二步我们就是要去呃，配置 maven， 我 这边的 maven 啊，也是已经配好了， 你看我打开来，我打开来以后默认他就给我配了，配好了这些路径，如果你的没有配好的话，你按照我的，如果你是按照我的 mate 去安装的话，那你就跟我配置一模一样的路径， 如果你不是的话，那就按配置自己的眉粉路径。 ok， 那 配完以后呢，记得保存，然后这边点一个 reload reload， 如果这边没有加载出来的话，如果这个是红爆红的话，说明眉粉还没有加载完毕，我可以等待它加载完毕 啊，然后，然后这个项加载完以后，这个实名簿子就算依赖都已经导入进来了。第二步我们就是要启动启动项目啊，先导入啊，先先检查下这个配置项， 来看一下这个 local host 麦穗口的路径啊，这个是 local host 本地的，然后数据库名是 app student info， 我 们先创建一个这个数据库，来看一下这个这两个数据库脚本 啊，这两个数据库脚本可以右键编辑看一下，然后打开 netcat 来创建一下这个数据库，把数据库先导入进来啊， 你可以右键 database， 然后创建一下这个数据库 app student info。 ok， 这个表是空的啊，然后呢，把这个 hash 语句 复制进来，这个测试数据里面是数据啊，就是默认的啊，默认的一些学生或者班级数据。 那我们把这个社口语句拷贝过来，然后去创建一个新的查询，然后粘贴，把社口语句粘贴进来。 那我这个社考语句其实也已经有创建数据库的语句了。那没关系，全选，然后执行，执行完以后右键这个 table 刷新，是吧？这边数据库表就出来了，然后现在是没有数据的，我们再来 啊，我再把另一个脚本的数据给他导进来。那大多脚本的，其实大多创建表和创建数据都在一个脚本里面啊，就不需要去执行两次，那我这个是分开来的，所以执行两次。 ok， 那 导入进去以后呢，这边就有数据了，现在好的，有数据以后，然后我们再回到这个配置里面，这个视频布置的配置都在这个 properties 或者 y a y a m l 里面啊。 那首先看一下数据库名，一定要和这个数据库名对得上，然后呢，这个 local host 就是 本地的意思，然后用户名默认都是 root 密码，我的密码是 root， 你 们自己设置的，自己填上去啊，然后设置完填上去以后呢，这个项目 就可以启动起来了，只要它加载完毕，只要它加载了没有爆错，这里没有爆红，然后这边的代码没有爆红，就可以启动了，现在我来启动它。 如果你的这个 mate 啊，一直加载不出来的话，也还有一个可能啊，就是你，你，呃，你的 mate， mate 的 那个文件夹权限不足，你可以找到你的那个 mate 所在文件夹所在目录，比如你是跟我一样的那个步骤安装的 mate， 然后呢，你可以右右键，右键 mate， 然后属性把这个只读去掉，然后应用， 然后在安全这个地方，我这边就不演示了，你们自己去应用一下，然后在这个安全的地方编辑，把这个完全控制修改什么，全部全部勾选上，勾选完以后我这边是已经已经是有权限了， 把这个全部勾选上以后，然后再进行再刷新一次就可以了。有可能你当前 windows 用户不能访问那个，就是不能修改，没有那个目录。 ok， 现在我的这个已经启动起来了，启动起来以后打开浏览器访问 local house， 我 这个项目是八零八零，而且它的路径是一个斜杠，那就是那就是八零八零，斜杠可以忽视啊， 这样呢，就启动起来了，我现在来登录一下，看能不能连上数据库，如果能登录，那就说明能连上数据库。 ok， 这个是我给给你们分享的这个学生信息管理系统这个源码，它的功能就啊管理员管理学生班级课程成绩，然后呢也可以修改， 那这个系统你们可以自己拿去用参考啊。我这个系统我就不讲太多了。 ok， 这个是 spring boot 的 项目的导入方式， 这个就算启动起来了，挺简单的啊，只要最麻烦的就是环境配置，其实你可以根据我的这个教程去配置环境啊。 好，现在我来继续导入这个 view 的 项目。那 view 的 呢？ view 的 项目它由 spring boot 和 view 两部分组成。那 spring boot 部分我们还是参考刚刚导入这个 spring boot， 单纯 spring boot 的 项目可以参考这个导入啊，但我现在再做一遍啊，这边是 这个是 spring boot， 本来我正常是喜欢把它放在一起的，那等因为它是分离的话，你们比较好理解的话，你们也可以拿出来，拿出来用这个拿来 v， 用 vs 扣的拿来打开也可以。那我呢，我现在就分开来给给你们演示吧。 啊，算了，我放一起吧，其实这个没什么，没什么难度的，跟运行 spring boot 一 样，首先打开它， 打开这个目录啊，然后配置 jdk 跟 web。 这个配置我刚刚已经说过了啊，就首先设置 jdk， 然后呢？ web 每本地址，这个每本配置。你这如果你跟我一样的话啊，那就跟我一模一样，不是的话，你就改成自己的啊，然后点击重新加载，加载完以后这个项目是没问题的啊。我现在这个还没还没加载完吧， 等它加载啊，刷新一下， ok， 加载完毕以后，然后也是改一下，改一下这个数据库配置，在 resources 下面，把这个密码改成自己的 micro 密码。 这个数据库名也一定要和数据库里面的一样啊。 app student info 没错。然后改完以后也是跟刚刚视频布置的项目一样。启动，首先启动， 先把后端启动起来，然后前端呢？前端你如果用 vs code 的 打开也可以。我这边是直接用啊，你甚至用在文件夹里面打开都可以啊。 哎，我比如你在这个 view 文件夹里面，这个是前端，你可以用 cmd 打开这个项目是吧？然后去操作 npm 什么的。 note 杠 v 是 吧，我能查这边，你去这边 npm 操作 note 也可以，在这边里面也可以。那我是喜欢都放在一起打开这个 idea 的。 呃，终端也就是 terminal， 首先可以检查一下 note 环境，然后 n p m install。 啊，不对，首先我们要进入 view 的 文件夹对吧？ 因为我们现在的文件夹是学生信息管理系统，这这个是外层，首先要进入 view， 然后 n p m install， 等它安装完毕， 这个安装可能要个一分钟吧，看网络环境。 ok， 它下载完了，那我现在启动起来就是 n p m run dv， 下载完毕以后这边 v 五目录下会多一个 note models， 然后我们要启动的话就是 n p m run d e v 就 可以了，启动完以后它自动会弹出一个啊，窗口 也可以在这边对吧？也可以在这边 cmd， 然后 n p m run d e v， 它这个不知道什么情况， n p m run d e v 这样就可以了，这样也可以启动，但是没必要启动两次啊。 ok， 启动完毕，启动完毕以后下面就是日历了，我们来看一下。 ok， 这个是呃，我的默认管理员的账号密码都是一啊，管理员账号密码可以在这边看啊，这个用户名密码，然后学生的呢？在这边 a a a 一 二三，我先用学生的来看一下， 那学生登录以后是只能看到课程跟自己的成绩， 然后用管理员登录的话也是跟刚刚一样的，刚那个一是不是版本一样的三四啊？学生来班级课程，然后学生这边还有还有个头像啊， 头像呢，可以去编辑上传我这边，我这边是没上传了啊。 ok， 这个学生信用管理系统，这个 view 和前后端分离跟非前后端分离的项目导入就到这边， 如果你有客社需要定做的话也可以找我，如果你是在我这边定做的，你就按照我这个导入就可以了。

use 三加 five， 四加 type script h 五前端开发框架的使用介绍一好，大家好，我们今天呢讲继续讲一下 weu 三 want， 然后加 type script， 然后做 h 五前端的一个技术要点的一些相关内容介绍。 呃，它主要是基于，呃，跟我们前面介绍的那个 b s 端类似，它也这个 h 五端呢，它也是基于 v o v 三 want 四，然后 type script white， 所以呢它主要的区别就在这个界面这个主键这里。呃， b s 端呢，它主要是用 element plus 来作为界面的一个主键。呃，我们 h 五端呢，它可能，呃就主要是以 want 来做的一个 呃，他的一个组建的基础库，那我们也会做一些自定义组建呢，或者其他的，呃，第三方的一些组建，如报表啊，或者说是其他模块的一些内容。但是我们主要是基于 one 的 四来做一个前端的一个组建的一个整合好 整个视频的提纲内容呢，主要是分为几？呃，呃，然后是六个要点，一个是开发框架的一个特点的一个介绍，包括有什么样的主要的一个特点。然后，然后第二个呢，就是对它 的一些功能的一个介绍，了解整个框架 h 五前端的一个框架的一个功能。呃，应用功能的一个介绍，了解它里面的一些。呃，基础的一些功能嘛，包括界面啊，包括一些组建的东西，我们会做一些相关的一个介绍。 好，还有就是 h 五前端呢，我们要做开发的时候，要做一些开发环境的一些准备，跟我们前面讲的那个 b s 端类似，我们也要前面。呃，在入手前呢，我们要做一些基础的一个环境的一个配置，以及我们一些工具啊插件的一个准备， 有了这些工作了之后呢，我们就可以正式的运行我们的整个项目了。运行项目之后呢，我们要呃要熟悉项目的时候，我们可以结合功能点来了解一些呃 整个框架的一个内容，但是我们也需要了解他呃开发模式下的一个目录层次的一个内容，包括各个目录代表什么意思呢？可能是是一些呃就是约定书城的一个目录的一个说明啊， 这个是比较重重要的一个内容，因为这个也是我们在接触 h 五端或者 b s 端这种开发模式的时候呢，需要了解到各个目目录的一个代表的一个含义啊， 这样子的对呃分解或者对呃深入了解整个项目会有很大的一个帮助啊。 呃前端这里面也需要结合它，因为它是我们这个 h 五端，它就是作为类似一种 b s 端的这种界面，它也是提供一种 呃呃类似页面的展现的这种方式，最终它也是要跟后端做对接的，所以在前后端这种分离的模式下，它是如何 呃如何整整合后端接口，或者我们在前端怎么测试接口，这需要做一个相关的一个介绍，然后还有介绍一下怎么打包呃部署整个项目。呃 h 五端的打包呢？它可能是直接呃可以打包成那种类似我们的网页形式， 呃通过 u i l 地址就可以访问，还有种打包就是可以呃打包成呃就是那种呃叫什么？ 就是安卓或者苹果，但苹果呢可能打包比较麻烦，我们就不再介绍，因为它需要一些证书啊，需要开发者相关的证书。那安卓打包就比较方便，它直接我们用那个 hbu 的 x 的 那个方式来直接打包云部署的这种，呃安装包出来，然后到时候我们直接在 在安卓的设备上直接安装就可以。呃直接能够跑项目了，就类似于我们的 app 那 样子的运行的一个模式啊，后面会呃大概讲一下整个过程啊，这就是这个章节的一个内容啊。 好，那我们开始讲第一个点啊， one， 呃 v 一 加 one 四加 h， 呃加 type c， 对 h 五前端的开发框架的特点呢？它就跟我们前面讲 b s 端也是有点类似，它也是作为一个前端的一个部分。我们呃这 呃前后端严格分离之后呢？我们这个呃后端可能也是基于 python 的 一个 python 的 一个 web 框架，也有可能是基于我们前面的这个数据库的一个开发框架，这个这个数据库呢是基于 donnet， 我 们接这个 h 五前端是兼容两个不同的，呃一个后端， 他们遵循的是同一套的 web api 的 标准就可以了。呃，这里面前后端分离也就意味着我们其他的呃应用前端也会接入到呃一个 web api 里面去，那所以还有 bs 端，或者还有拍 size， 或者是我们 vivo 端 就是假如我们是基于 dunkit， 可能就采用 vivo， 如果是基于拍摄的，我们前面可能是拍 side 或者微信拍摄的那个主键做的一个桌面应用，嗯，这种就是我们这种前后端分离的好处 啊。 vivo 三加 type c， 呃加这，呃加外加外，还有这，这个是这样子， 呃它是可以加 white 加加 want 这个主键的， want 四的主键，这个计数站呢也是呃是我们常用的呃 b s i h 五端的一个计数站， h 五前端的技术栈，可能这个界面组件有有可能是用其他的，有可能 uni 呃 uni uni uni app 的 那个，或者说是其他的也有，也有。呃类似的这种移动端的组建库就可以了。 呃开发工具呢，跟 bs 端开发类似，也是基于 vsco 的 来开发，因为 vsco 做这种 bs 端开发是非常方便的，一个是快捷，第一个呢也是呃 免费。还有一种就是呃它的开发的经验啊，跟相关的一些呃我们的使用的习惯都非常一致，那就非常方便好 界面。这里讲的是基于我们呃应用比较广泛的开源组件 one 四的移动端组件这种它在兼容不同的设备啊，以及呃 功能点上都比较多，他的主键提供了很多很多呃我们可以了解之后呢，根据我们的需要进行一个组合使用，或者甚至我们基于他的 呃通用的一些主键做一些自自己的一些定制，例如我们整个 h 五权当可能对呃一些指点，主键呢，或者说界面的一些特殊的要求，我们做一些 定制化，也就是我们自定义组建的一个开发的方式，这种会更利于我们界面的表现和使用啊。 还有就是对啊，这前面就刚才讲了，就是对组建的封装啊，这种就是方便项目重用比较好一点。 好，还有这里呢就还有一个就是打包部署，我们前面讲了，可以用 n n 九 x 来部署 h 五端的应用，跟这个跟 h 五跟 b s 端的应用一样的，嗯，还有利用呃 hbu 的 x 打包为安卓 app 的 一个应用程序 这样子的安装的，就像用一个呃一个安装包的方式直接安装，呃可以在我们 ipad 上啊，或者安卓的一个手机端啊，都可以进行安装，这样子出来的效果呢，会会更加接近原生态的那个 app 的 应用 啊。还有就是如果我们有一些微信小程序的开发的时候呢，我们也可能 会用到这种万事，万事它提供了相当于它有两套的不同的一个组建库，但是它的组建跟使用的代码几乎是一样的， 所以呢，如果你要切换到微星小程序，可能只需要在项目上做一些微调，在引入的时候做一些调整，就很容易切换过去，这样呢有利于我们呃使用我们已有的一些代码，以及我们在呃部署应用的时候就更加灵活啊。 呃，这个就是说它调整之后直接顺滑的切换过去，因为本身 h 五端跟 一小程序之间就很大的一个相似，所以它无非可能在对接呃腾讯的一个小程序接口的时候，做一些特制化的一些呃处理就可以了。 好，我们这里呢再讲一下第二个要点，就是我们在开发呃在做一些呃 h 五端或者说其他的应用一样了，我们需要首先了解我们一些基础的一些功能，就是我们作为一个框架，它肯定会提供一些基础的一些功能以及一些案例，这样子对我们还有一些呃制定化自定义的一些组建， 这样对我们啊，在做我们的增量式的一些业务开发的时候呢，就很很有帮助，第一我们可以利用现有的一些功能，第二我们可以借鉴现有的一些业务模块来做我们自己的一些啊，就是我们的制定业务的一个 界面啊或功能啊，这样子的一个效果就会更快。如果啊另外对主键的封装也是可以一个第第一步是进行学习，第二步呢可以进行重用， 刚才讲了他的基础功能，我们这里面我们就和呃重点讲一下他有一些用户啊，包括我们用到的呃用户用户管理，例如我们可能列出用户的信息啊，查看用户信息，或者对用户进行一个重置密码啊，或者说 啊修改啊，这些功能都可以做到，因为他这种虽然界面受限一点，呃没有 b s 端那么呃提供那么大的一个界面空间，但是呢，我们对一些常用或者比较关键的操作，我们还是可以放在我们的移动端进行一个处理的 啊，例如我们可能会在登录呃在注册用户啊，因为我们可能是新用户，可能会在注册让后端进行一个授权，这样子也是可以的。 组织机构的查看，包括组织机构数的一个管理展现，这样也是一种啊，在 h 五端展现的一个功能点啊。角色管理，就是我们可以在角色里面查看一些角色信息啊，以及这个角色包含哪些用户，以及动态修改这个角色包含的用户列表 这样的一个功能，这个也是相当于我们在 h 五端也整合了一个基础的一个权限管理，这样的一个功能，管理了我们啊基基础模块的一些功能点，或者查看一些相关信息。 还有个例如我们可能在一些地址管理啊，例如可能我们对供应商的地址管理啊，对个人的地址管理，就可以提供一个地址管理的一个模块，就是给我们更方便的使用。 呃字典字典，就是因为我们整个不管是 b、 s 或者其他桌面端或者其他端，我们有个通用字典的模块，那这个字典呢？就维护就可以适应在各个呃前端了， 那他有个字典大类的管理，还有字典项目的一个管理，那整合这些东西之后呢，我们就可以作为一个下拉列表的提供啊，或者选择呃选择呃那种信息，这样子就非常方便。还有附件，我们可能在 s 五端，那附件肯定是常见的了，特别是我们可能啊填一些信息，那我们都附带着上拍个照，上传一个附文图片这样子的一个功能点，那附件就是作为必不可少的一个 功能点了，那需要我们通用的一个附件管理的模块，呃，使得我还有提供一些，呃主，呃对 那个图片呢，或者文件的上传的一个通用的管理就会更加方便一点。还有个报表图表，图表可能会包括一些饼状图啊，柱状图啊，线条图这样的一个功能，因为这个报表很丰富，因为我们这个是 g 一 叉的，呃一叉的 那个报表对它的官方的一个，呃那个文档里面也会提供各种各样的图标，我们到时候借鉴着把它那个范围拿过来调整一下它的数据，那就展现出不同的一个报表的一个样式就可以了 啊。参数配置，我们之前在如果你了解过 b s 端的一个功能介绍，都会有一些参数配置，参数配置就是应该 我们在一些模块里面可能会有引用到一些信息，或者说是我们修改一些界面的，呃就是程序的一些信息，那这样子就可以提供一个通用的一个参数配置，那我们 h 五端也会有提供这个一个修改的一个内容啊，就是作为一个基础信息的一个处理嘛。 资讯管理就是有我们熟记的熟知的那种叫信息管理或者资讯，呃就就新闻管理这样的一个模块提供，我们可以在前端后端这种结合起来作为一个数据的一个展现或者维护。 例如我们可能需要利用 b s 端做一个文章的一个编辑，或者消息的一个编辑，那在发布的一个图文管理之后呢？我们在 h 端也能够看，对吧？这样就是时间的这种多端的一个联合。 呃，这里面还有一个基础的登录功能啊，还有账户的一个密码登录，或者说是短信，这个短信我们有提供，一般提供了两种方式，但呃端麦的那个就提供了两种。呃，我们拍审这边主要是对呃那个， 呃阿里云的那个短信进行一个呃整合，他就是呃我们通过发送验证码的短信，验证码通过手机来收来进行一个呃，对呃 对于重要信息变更的做一个双向的一个处理吧。包括修改密码也是一样会提供一个短信验证码啊，用户信息修改啊，头像修改啊，主题设置啊，这些是我们很多 s 五端系统或者是移动端做一些基础的一个功能啊，这个就不在一 诉说吧。后面这边还有一些也可以进行一个后台审核啊，就是做我们申请用户审核之后，呃通过，那才正式的把这个用户信息加到我们的呃基础的用户表里面去啊， 啊，这这就是基础的功能，但还有其他的我们就没有在这里列出来啊。业务功能呢？这里我们提供了一个业务的案例，相当也是我们给客户做的一个应用，把它作为一个改改变放到这里面来供大家进行一个案例的分析或者参考。 包括我们可能会对一些呃店面的呃，就是我们假如我们呃要做一些呃连锁啊或者什么的，要做一些店面的创建啊，店面查询呢，或者店面信息，包括呃可能一些图片呢展示的一个处理， 这样子的话啊，就相当于有还有一个对店面的一个异常信息进行一个采集跟上报，还有一个根据呃角色进行一个相关的信息的一个申报跟审批， 就这样的就是提供了一个基础的一个店面信息维护，或者说呃一个信息跟踪的和跟审核的一个过程啊，给我们提供一个这种报 接流程啊，或者基于一种啊业务角色的这种方式来做一个功能的一个示意， 还有个组建的安装，因为我们在界面上啊组建的封装对我们因为很多时候业务是需要的话，我们可能需要对界面进行一个统一的处理，或者说有些功能比较重复的东地方呢， 我们可能就需要进行一个自定义组件，因为自定义组件可以呃反复使用，我们就是不需要每处都需要重复那么多代码的话，那我们就可以考虑在呃提升的自定义组件。一般我们在一个场景如果用的超过两到三次的话，我们 倾向于把它封装为自定义主键，这样子使用的时候就比较简易一些，因为我们在这里面可能做了一些例如字典选择啊，附件上传啊，是吧？还有个那个多图片也叫也叫那个，呃，叫室外的还是叫什么 这个图片展示，呃，还有日期的选择，日期方位选择，市区选择，就就有部门选择这样一个 方式，这样就是可以结合我们的后端的一个数据进行一个自定义组建的一个呈现那个，这样子就方方便很多。呃，还有其他的组建我们就不再讲了，因为我们很多时候就根据我们所需要的一些呃场景啊，把一些 啊像，例如可能我们把一些 word 四里面的一个主键套着套在里面，作为更加丰富或者组合起来，作为一个界面的一个一部分元素，这样子就可以在各个地方重用。 它有好处，就是一个使用的时候非常方便，第二呈现的时候比较一致，那这样子就对我们，呃这个应用啊，就这个框架的展现就非常方便了。 好，我们再看看，因为前面都是文字的介绍，那我们这里呢，可能会啊，做了一些截图，回头啊，回头我会把这个项目跑起来，再大概再参考一下，那这里面我们先过一遍了解一下它的基础功能。 利用我们登录的界面，登录界面我们默认是用账号密码的方式来进行一个登录，那如果你用手机登录，它就是用手机号跟验证码的方式进行一个登录。 或者如果是新用户，我们还会提供一个注册入口，就是新用户注册，然后通过后端管理员的授权，然后的或者说批准，那就把这个用户作为正式用户加入到用户表里面去，这就是一个审批的过程啊。 还有我们登录呃用户呃登录系统之后呢，就我们进入到一个主页面，在我的里面他会提供很多一些主要的一个功能入口，包括个人信息的修改啊，账户呃就是手机号的修改啊，主题啊这些 啊，这里下面的部分功能，他会管理用户的一些呃全身系统里面的一些基础信息了，用户机构角色啊，或者新注册用户的一个列表展示跟审批的一个过程，还有新闻资讯啊，字典啊，地址管理，就是我们前面讲的 那些功能的一个要点，对吧？他可能还有一些其他的相关的一些功能，在下面我们没有再截出来啊。那如果是编辑个人信息呢？他这里面会包含有 呃一些核心的一个一些略有可能邮箱啊什么的，或者说头像昵称的些修改，如果可能修改手机可能会触发一个呃对验证码的一个交验的一个过程啊，这个就是我们基础信息的一个修改， 呃，相当于提供一个表单，把用户的信息统一的一个管理跟修改的一个入口啊，如果我们在呃用户管理里面呃我们 因为我们系统可能是管理员登录进去，那我们可以看到用户的列表，那看到用户列表，我们可能对用户的一些呃密码进行重置啊，或者设置这个账户是否过期啊？这个关键的一个操作就是在用户列表里面展现的 啊，如果是还有字典，字典里面呢，他就是有一些呃字典主要入口就是字典类型进行一个管理，然后进点击类型就会进行一个项目的一个管理，就是通过字典的一个常规操作模式啊，呃， 还有就是我们刚才讲的，他可以通过呃手机号码的方式来进行一个登录啊，验证码，手机号， 还有这里呢会有个验证码，呃，这就是注册用户的一个界面，以及我们在啊用管理员进去的时候，看看那个注册列表的用户列表的时候，他会有一个叫审批的一个过程， 我们可以看到这里面会列出啊已审核、未审核拒绝的这这些的一个用户列表，那我们点击审核，他会弹出一个界面，让我们选择是否通过审核的一个处理过程，这个过程呢就很像我们常规的一个审批流程的一个处理 好，还有一个用户地址的管理，用户地址呢，他我们前面讲了可能就是先展示一个地址列表，然后在地址列表里面呢进行一个 信息的修改。还有个就是公司或者角色人员的一个管理，我们先点击一个公司呢，它里面会进入一个 列出一个角色，角色里面会绑定相应的已有的用户，如果是我们需要呃修改这个用户列表呢？好，我们继续。呃，如果要需要修改这个用户列表呢？他就会相当于把这个角色的包含的用户给进行修调整。 还有个就是，呃，我们在主控台这里会展示一些，呃，一个呃基础的一个业务模块的一个功能啊，就会展示一些相关的那个跟店面。有 啊，这里面呢它的基础功能它有，这里展示了一个在资讯中心的一个管理，它包括我们这里面会列出 他相关的一些就是最新的那几条资讯，然后如果说我们需要维护你，如果你要是管理员的话，那进去可以通过滑动滑动这个列表的方式来进行一个啊删除 查看的话点击进可以查看，查看呢就像那一个类，类似我们查看一个消息或者文章那样的，它有个图文了的这个信息，多数的情况下是在那个后端进行，呃，不，就在一个 b s 端进行一个图文的编辑， 呃，这个就是它的一个界面，嗯，看结合的移动端跟 b s 端的一个结合，进行它的一个内容的一个展示或者修改。 呃，例如我们刚才讲了主控台它里面它有一个基础的一个业务功能的模块，那里面包含了有些店面信息啊 的维护以及相关的一个异常跟签收的一个记录。这个是基于我们我以前做的一个项目，给一个呃单位，他们要做这种派送啊。 呃配送的一个业务流程，它需要呃入录入相关的一个店面的信息，然后进行，然后一个配送，配送可能要签收，然后还要做一些呃异常的一个反馈，这个店面有没有按照要求来整改，或者说是呃相关的处理的一个 呃流程吧？那我们就把它作为一个私立功能那样来进行一个呃 整合。在这个 want 四里面这个 h 五端的一个功能里面去，你可以看到这里面首先会有一个 例如我们这个店面的一个信息，店面可能就是我们这个管理后台看到的各个店铺的一个信息，店铺信息会列出这个店铺的关键信息，那个查看详细呢？可以进进入到更详细的一个界面， 那如默默认我们可能还有一个创建界面的一个入口，创建店面的话，我们就会根据这个现在这个功能里面很多数据是选择的， 除除了输入一些关键信息的时候之外，那还有一些六区域啊等级啊，这个就是我们的一个通用字典维护的一个信息了。那我们这里呃可以通过绑定字典的方式来进行进行处理吗？那我们这里呃录入数据的时候就非常方便啊。 还有就是展示店面的时候呢，他会有很多相关的相关信息，包括这个店面的图片，我们就可以把它整合起来作为一个 呃就是那种播放图的方式，还有一个签收记录啊，或者异常记录，他就是一个我们做一个流流程的审批和的签收的一个过程啊。还有二维码就是展示一些二维码的一个处理， 有时候直接扫码进行一个处理也是行，因为很多时候扫二维码我们可以贴到店铺里去，然后扫码的时候就直接打开就进行一个拍照或者异常反馈，这样子也非常方便 啊。这里就是有一个叫做选项卡来展示不同状态的一个列表信息，包括我们发起的、自己发起的或者已经处理的，已经呃 已经撤销的，就是各种各样的一个状态的一个列表，这是我们常规的一个分类展示的一个界面的一个展现方式。 好，这里面可能到可以看到一块一块的，可能很多时候我们都会用自定义组建的方式来展现，因为这个这个它是重合起来的，我们只需要便利这个呃数据列表里面它就展现不同的块，那这样的就是一个自定义组建的一个 一个功能。啊哈，我们大概了解就行了。还有这里面有一些异常的一个记录，它也是相当于呃一个流程记录的一个跟踪一样的一个功能。 好。还有就是组建的封装，我们这里会展示一个报表的，组建了，图标的组建了，是吧？还有一些其他的，包括我们录入一些或者展示一些 一块状内容的时候，我们可以通过折叠的方式啊，或者通过这种选择字典的方式啊进行一个处理，包括还有签名啊、图啊、附件呢、上传啊这样的一个操作。那这样子的可以为我们还有一个你看省市区的一个整合， 这样子就给我们呃提供很多方便，整合这个呃不同的数据放到一个界面里面去，呃就没那么乱啊。 还有就是把这个还有其他的那个叫什么这种机构的一个塑形图，嗯，这边有很多一些组建，我们通过在这个 s r c 这 components 这个目录下可以看到，到时候我们会呃再逐步的再介绍一下。呃， 前面我们大概就讲述了一些基础的功能。呃，我们可以回到呃首先如果要跑这个系统，呃 h 五端的这个前端框架的时候，那我们首先要 需要呃启动后端，我后端这里就是以拍损这个 fast api 为例，如果是我们呃基端内的后端的那个是库的后端也是可以的，它接口完全一致的，所以我们就这先以拍损这个 fast api 的 这个后端为例， 它只要启动就起来，它会增听到这个八千端口，那我们的 h 五的那个项目， 那它项目启动起来项目就是这样的一个结构，我们前面讲述了它些它的一些功能啊，呃以及呃相关的一些， 呃组建的一个大概的一个介绍。那 h 五端的那个它的跑起来运行起来呢？跟我们 b s 端也是类似的。首先 control j 安安排到这里面，我们呃一般来说首先可能会讲述他的一个安装的过程，我们先先不跑，先先不急着把它跑起来吧，我先看看前面环境的准备，以及他的一些依赖的一个介绍，再逐步的去把它整个项目，最终把它跑起来。 首先我们先来看看打开这个项目的时候，可能我们第一步可能还没有什么安装他项目的依赖，那我们需要怎么去准备这个项目呢？ 我们在这里再讲一下啊，就是第三点的功能，我们 h 五端的开发准备工作。首先 vs 扣跟安装跟插件我们这里就不再一一讲了，就是首先我们需要，呃，因为我们项目的时候也会，你启动的时候他也会 让你安装一些相关的一个依赖插件，呃相关的一个组建插件他会在这个，因为他这里有个一 extension， 这里面就是列出了我们几个常规的那个插件。但是可能如果是我们需要更多的话呢，你就可以自己手动安装，手动安装的话就是在这个主键这个扩展里面搜索， 搜索它的名称就会安装。例如我们可能拍摄呢，可能需要安装拍摄，那肯定这里我们是前端，前端不涉及到拍摄的话，那我们可能有一些其他的主键，可能，呃需要用到的话，那 你就呃插件用到的话你就直接在这里安装就行了，那我们这里呃再再讲一下吧。