day06/下午/126-尚硅谷-尚融宝-基于vue-element-admin搭建前端项目

那现在呢，我们已经把咱们前端的一些呃知识呢都学的差不多了，所以呢，现在呢，我们就可以根据之前我们的这个知识呢，去搭建一个管理平台的前端程序了，那我们搭建前端程序呢，啊，要基于一个就是现成的管理平台，就这个平台搭建出来呢，它就长这个样子，然后呢，我们在这个基础上呢，进行一个啊我们管理平台的一个修改啊嗯，那因为如果根据我们现在的这个前端的知识水平的话，完全从零搭建一个管理平台的话，其实也是一个比较困难的事情，所以呢，我们要做的呢，就是先找到一个现成的解决方案，然后呢，呃，站在巨人的肩膀上啊，然后我们提高一下开发效率，那这样的话呢，我们就找到了这样的一个view element me啊，这个是专门的啊，比较常见的一个通用的后台管理系统，呃，很多公司呢，都用它做他们的这个后台管理系统的一个初始化的一个搭建的平台啊，所以这就是它了，那这个平台呢。

它有一个就是呃，Get的地址，这个是get up的地址，我们从这get up上可以下载最新版，但是我建议大家呢，就和我的这个版本保持一致就可以了，因为我这个也不太旧啊好，然后接下来呢，项目的在线预览，这个项目如果咱们在本地搭，搭完了之后呢，它是长这个样子的。它的功能还是比较多的。好，你看这个项目本身呢，它就会有一个登录这样的一个界面哈，虽然比较简洁，然后接下来呢，我们啊，输入这个用户名密码之后呢，再点击这个登录。啊，他就可以登录到这个项目的后台管理系统的首页了，那这个首页呢，就是一些常见的啊，后台管理系统当中的一些统计信息，还有一些图表信息啊，都是统计类的内容，然后另外呢，还有一个当前登录用户的一个用户信息，然后呢，还有就是其他的一些，比如说这个管理平台当中，他在element UI的基础上又扩展了一些啊小图标，然后呢，这里面还有一些组件，比如说有这个副文本编辑器组件，如果我们写一些啊博客程序啊，邮箱程序啊，都可以用这个副文本编辑器组件啊，它漏的有点慢啊。

还有一些那个代码可能对这样录下来了哈，这就是分的BD器，然后接下来呢，还有就是比如说头像上传组件，我们可以用它呢，做一个这个头像上传的功能是吧？啊，我就不传了啊，然后再接下来呢，还有一些比如说计算的一些小组件啊，那这里面会有一些计算器什么的，然后可以去可以去算啊，你看这样它有个动态的效果展示。然后呢，另外呢，还有一些啊，就是有一些带拖拽效果，比如说这是一个可以拖拽的一个大lo啊，然后另外呢，还有。

嗯，等等吧，我们就不一一看了，总之它这个里面提供的功能还挺还挺多的啊，还挺多的，可以去挪挪换他的位置，然后这面呢，还有图表。图表的一个展示，所以呢，在我们的后台管理系统，其实常见的功能在这里都提供了，还有动态的表格。就是动态的表格，还有这个拖拽的表格。可以通过拖拽的方式排序，还有编辑表内，编辑就点一下，直接在行内就改这些数据的内容了。OK是吧？啊，然后还有综合table，这个我们用的就比较多了，就是一个综合的一个大table，然后呢，我们可以编辑呀，发布呀，删除呀，然后另外上面还有一些综合的查询啊，这个表单呀，还可以导出导入Excel呀啊等等这样的一个功能，所以这块呢，就是整个的后台管理系统当中啊。

还有综合实力，你看文章列表创建文章对吧？啊等等吧一些啊，所有的后台管理系统当中常见的一个功能呢，在这里都提供了，所以呢，呃，这样的话呢，很多就是全站开发人员啊，尤其是咱们做后端的，你要做前站的话，你自己搞不明白这个细节怎么做，你就可以参考啊，你把这个代码，那这个调用关系给它捋明白了啊，到时候我们需要什么功能的时候，就上这里面来参考就行了，所以呢，这个就是一个element，没有element的面哈，好，那这个虽然作为一个参考的平台呢，它比较有参考价值，但是如果我们真正要开发的话，如果要基于他来开发，那恐怕最开始你要删，就是把不不需要的东西得先删掉，对吧，删来删去有可能你就删了，不该删的地方，然后呢，就报错了，你就完全不会来了，所以这个平台呢，就是我们当需要这里面某一些功能的时候，比如说需要这个element这个呃，就是它这个副文本的。

时候，哎，我们上这里来参考一下他怎么做，但是不需要的功能呢，我我就希望呢，就是你能不能给我一个就是初始化的版本啊，那我呃既能把这个平台的必要的组件都搭建出来，比如说登录对吧，登录登录页面这个是必要的，然后比如说登录完了的这个布局，比如说左边的这个导航栏，诶你象征性的给我一两个就行了，然后更多的我自己填，你给我太多了呢，我也没有用，就是在咱们的项目当中，然后呢，我还得删，删不好呢，可能还完全不会去了，对不对，左侧这页面也是一样，这么老多，我还得从源代码当中没有用的还得得删掉，有可能还会删出问题，所以呢，那这个开发团队呢，就给我们两个版本，一个版本就是这个大而全的。啊，就是你需要什么功能，你可以上这来参考的，还有一个版本呢，呃，就是一个简化版，简化版就是一般我们开发的时候呢，它的底层的呃一个呃代码的框架架构和这个是完全一样的，只不过呢，就没给咱们提供这么多功能，让我们在开发这个的开始阶段呢，不至于陷入这个特别庞大的这样的一个系统的修改的过程当中，所以呢，我们呢，搭建我们自己的平台的时候，用这个简化版去搭，然后呢，需要什么功能的时候，咱们可以上这个里面呢，去参考参考啊他他这个东西怎么做的是吧？嗯，所以呢，我们就先来看一下这个简化版。

好了，在线版这个我们就先暂时在本地先不搭了啊，那么实际上它安装的过程中和简化版是一样的，那我们就只说简化版的安装在我们的这个资料里面。资料，反正在我们的这个资料里面有两有这个两个，一个是这个，这个就是刚才我给大家看的那个，咱们在线看到的那个啊，你们说挺炫的这个版本，然后呢，还有一个就是我要给大家安的这个简化的版本，那么这个简化版本的安装方式呢，和这个啊完整的这个啊版本的安装方式呢，是一模一样的，所以咱们只选择其中一个安装，然后大家感兴趣的话，比如说你想把这个运行在你的本地，那你就和这个用一模一样的方式安装就可以了啊好，那我们呢，就是安装这个简化，你看它的体积也很小，是不是就没有必要的代码啊，就是它就没有加进来右键，然后我们呢把它解压一下。

好，解压到这个位置，好，这个位置呢，我们啊，肯定不能把代码放在这儿了，我们把它剪出来了，减到哪呢？减到我们的项目当中。好，然后放在这里面啊，然后接下来呢，我们给它重新命一下名，比如说呢，我们就管它叫尚荣宝。好，这个就是我们的前端项目了，以后我们这个前端的项目，后台管理系统的项目就叫这个名字了，好，然后接下来呢，我们可以在咱们这个地方呢，对这个上荣宝的命呢，进行一个啊。

安装那你会发现呢，这个里面呢，它是有这个package的这些文件的，说明它是一个NPM项目，而且呢，NPM项目里面呢，还依赖了很多就是必要的东西，比如说下面这些开发依赖有很多哈，我们就不一一看了，然后上面这个呢，是我们项目当中，业务逻辑当中啊，核心功能需要的一些依赖，比如说X呀啊，比如说核心JS呀，比如说element UI呀，比如说处理cook k的呀啊，处理统一CSS的呀啊，显示进度条的呀啊，然后路径正则呀，还有view的核心的view rootr啊啊这个是前端的一个存储啊，对我们来说比较复杂，我们就不不了解它了，上面这些基本上大部分咱们都了解是不是啊好，那它通过这种方式配进来了，那没有no MOS那个目录吧，就是这个not MOS目录是不是没有，没有的话，那就说明它，嗯，给我们提供这个源代码的时候呢，并没有把那个依赖仓库给我们提供过来啊。

那这也是正常的，我们呢，就通过n PM in store把它安一下就行，所以在这个地方呢，我们就n PM in啊。有点慢吧。

稍微等一会儿。好，然后呢，这样的话呢，我们就安装成功了，那你会发现呢，在这个地方就有这个note models目录了啊这里面的东西啊，这里面的东西呢还挺多，所以刚才呢就下载了很久哈，你看看这么多是不是行吧，然后接下来呢，我们就运行一下它运行怎么运行呢？你会发现这里面呢，就是有一个脚本script。啊script就是刚才咱们n PM pro的时候呢，它这里面也有一个脚本，只不过这脚本呢，是一个测试的，没啥用啊，然后这个里面呢，它就配置了一些了，那这个通过它的名字你也能猜到，比如说这个就是开发环境打这个运行，这个就是生产环境打包对吧？好，那我们就直接开发环境运行一下，那这脚本怎么运行呢？啊，运行在NPM这个命令下，所以运行它的话呢，就是。

这个NPM啊，然后可以运行里面的脚本，那我们就是n PM run，这个脚本的名字叫dev，那就叫run dev好。所以呢，在这个地方我们就NPM写哪去了。重来啊。叫做n PM run。好，这样的话呢，我们这个页面呢，就就搭建出来了，这就是他默认的一个登录页了，然后我们点击这个登录。就登录进来了，登录进来之后呢，这面就是会有一些log就登出啊。

这样，然后后面呢，我们会去改这个左导航，那这个左导航呢，就明显比原来那个就少了很多，这块是嗯，首页，首页也没有那么复杂了，是吧？啊就一个用户名，一个用户角色，然后这块呢是例子，例子他就给咱两个，一个是一个表格的例子，因为表格这例子咱们用的确实比较多，所以他给了一个表格例子可以供你参考，然后还有一个是tree的例子，展示一个数数呢在嗯有些项目当中呢，也确实是比较常见，所以他也给了这样的一个例子，然后还有一个表单的例子，表单呢就更不用说了啊，常常见的例子，只不过现在这个表单呢，那就就还是英文的，一会儿我们得做国际化处理啊，把它变成中文的，然后接下来呢，这个就是一个嵌套路由，也就是说这这个里面的路由路由左导航这个路由也可以嵌套了啊，它给了这样的一个例子，然后这块呢，就是怎么去链接外网，这一点呢，可以通过这个路由呢去链接外网，所以他就给了这样的一些特别基础的例子，那我们的开发呢，就在这个。

基础的这个例子的基础上啊进行开发啊，所以这块呢，是啊，它我们现在看到的这样的一个基础版，或者是一个简洁版啊好那。这个安完了之后呢，我们要去写一些基本的配置，这些配置呢，有一些关系到一些比较呃比较深的一些前端的概念，那在这个里面，由于咱们是后端开发人员的原因啊，所以呢，有有一些比较特别难懂的前端概念，我就不给大家去深入讲了，然后呢，我会告诉大家这个东西是做什么的，然后大家呢，就按照步骤先把它配置好啊，先把它做好就好了，然后呢，最尤其是最开始的时候，大家一定不要纠结，一一定不要陷入到细节当中，先把整体的这个环境啊，把它的这个大环境先把它搭建成功，然后后面如果咱们有精力有时间的话啊，再去针对某一个细节进行深入的研究，所以呢，接下来我们要做的呢，就是把一些基础的配置啊，根据文档给他配置好就可以了。