vue基础1.6综合案例一用户管理

今天我来分享一个图书管理系统，我先来演示一下系统运行效果。首先是登录页面，我们先以管理员的身份去登录系统， 这边点击图书管理，这边有一个图书细细管理，可以对图书进行分商改查。编辑的话呢，由这些字段组成，也可以修改封面图，也可以把该本书借阅给对应的用户。 然后这是图书类型管理，这边的话呢是可以新增类型，后面新增图书的话呢，可以选择对应的类型，也同样有证商改查， 这里面主要提供是类型名称跟类型的描述两个 四段。然后是 tv 信息管理，这边可以查询到所有用户的一个 tv 信息，包括借助时间和还书时间，当用户来还书的时候，我们也可以点击归还图书。 然后就是用户的管理，这边可以看到所有的读者，这里面是我新增了一些初初始数据，同样是可以增商改查， 并且可以新增管理员或者是编辑已有的用户，也可以删除用户。 然后就是修改密码的功能，现在我们来演示一下用户端， 这里选择读者登录系统， 可以查询到已经上下的图书，并且可以根据书名、作者或者是类型去搜索对应的图书。 然后呢可以借阅任何一本图书。 当我们需要辉煌图书的时候，这边有个 tv 信息管理，这里我们所有的书都已经啊还回去了。我这边的话呢，比如说我借一本西游记， 然后到借阅读书的时候，这边就有一本书被我们借过来了，这笔可以操作还书，这样子就已经还书了。其他的话呢，也可以进行密码的修 修改， 那么这个系统的演示就到这里啊。这个系统呢主要是一个前后端分离的项目， 前端是 voe 框架编写的，后端主要是招霸语言编写的，用到了 spring boot 框架以及 my bettis 框架。 数据库的话呢，用到的是 myco， 这边还用到了 redis。 接下来我来演示一下如何去启动这个项目。项目的原版有两部分组成，一个是服务器端就是后端，一个是前端，也就是页面。 我们先打开服务器端的原码，有一个搜狗文件，我们复制里面的内容。先去初始化我们的数据库， 这边新建一个数据库，名字是 book manager， 数据控名称一定要是这个要对的上 客户级排序规则都是就选择这两个就行了。点确定双击，然后点击上面查询呢，我们去运行刚刚复制过来的 circle 语句， 点击表，如果能看到四张表，那就说明我们的数据库已经初始化成功。接下来我们去运行服务端，数据服务端的一个代码，这边我们打开 idea， 打开这个 a p i 项目， 初次启动这个项目可能会比较慢，因为还有一些包没有倒进来。 这边我我们可以点击右边的 menu， 然后点击这个 reload 去下载我们所需要的包。 然后这个项目还用到了 release， 我们先启动一下 release， 到这边来我们已经把报导完了，因为我这个已经之前已经下载完了，所以呢可以直接去启动项目， 如果控制台没有 出现任何异常，没有报错，那就说明我们的项目已经启动成功。接下来我们去启动前端项目，这里可以使用 vs code 打开 初次档，初次运行我们的前端项目也是需要去下载包的， 这边我们运行一个指令去下载我们的包。 npn in store 这边我因为我已经下完了，所以说比较快，你们初次下载的话会比较慢一点，需要等待一段时间。 接下来我们运行以下指令去运行前端的项目， 等待前端项目启动，启动成功之后会跳出一个网页，这个就是我们的项目。 然后呢我们可以测试一下，登录好，我们成功登录进来了， 那么这个项目的演示就到此为止。

我是爱马仕，今天呢我们再做一个那个用管理的一个新增和删除的两个功能啊？上节课我们做了一个查询的，是吧？做了一个查询的功能。好，我们现在做一个新增删除， 新增删除的话，其实新增的话，其实，嗯，不需要做什么了，因为我们之前做好了一个编辑，是吧？做好了一个编辑，我们现在只需要给这个按钮添加事件， 给他按着添加时间，艾特克里克 hander 添加时间就行了啊。 ok， 我们定一个这样的方法，我们把这个新增跟编辑我们放到一块去啊。嗯 嗯，一个方法。好，然后我们看一下编辑是怎么做的啊？编辑的话是把它更改，我们可以直接复制过来的， 然后我们这个不需要我们这样，这个添加用户，添加用户信息，我们这样就行了。 ok， 这个已经破存了，我们点一下新增，他弹出这个弹窗，是不是弹出个弹窗，我们输入一下 啊？这现在还不行啊，我们新增之后的话，我们还需要处理他一个提交事件，你记得我们之前做那个跟保证操作的时候，我们是没有去处理，嗯，又在 id 为空的情况下，所以我们在这里面 我们需要，嗯，去绑定一下这个事件，做下这个事件。好，我们这里面不是有个啊不对的，有的英文说法，然后我们现在去再添加一个更新，创建用户信息， 创建英文信息，创建英文信息的话，我们这里面叫可爱的英文语法，可爱的英文语法啊，然后这里面是不需要拿这个代餐拿这个 id 的啊，这个里面是不需要这个的， 这个里面换成 pose 的请求，对吧？ pose 请求，然后这里面就是一个带塔，嗯，我们看一下借口协议啊，借口协议不有一个创建用户，是吧？创建用户，然后他这里面就是一个 pose 请求，然后有的，是吧？好，我们就这么写就行了， pose 特特色请求，好，然后我们回到我们的页面，看下我们的页面，我们的页面，然后把这个方法给他弄过来， 在这 我们直接把这个表带右侧放，然后点赞二颜色， 这里面就直接是更新成功了，对吧？不是添加新增，添加成功，添加成功，添加成功之后，我们需要把这个那个对话框 给他隐藏，并且重新加载一下数据，我们现在来看一下新增账号，我们今天就叫， 嗯，清明节，清明放假，因为啊，这个不行，我们就要撕掉，对吧？ 然后证明，学生啊，学生，然后男的，然后一三零九五六八五八九六啊，十一位状态的话就是我们给他禁用啊。邮箱的话，我们随便写一个 邮箱，我就二六六艾特 qq 点 com， 对吧？然后角色 是管理员，我们提交一下，他提示添加成功，是吧？提示添加成功，他是跑到后面去了，我默认的话是按照，默认是按照那个 按照 it 进行排序的啊，所以他 it 在后面其实应该是按照那个创建时间进行排序，可以 稍微给他修改一下，这样我们我们给他排个序啊， 给他排序一下，就咱们的那个用户列表，用户列表给他做一下排序，嗯，排序的话 ctrl 里面看一下他是从哪个即可进去的用户列表排序，然后这个里面我们进行查询的时候 点 like 的，点 salt 有没有 salt 没有啥？ 嗯，应该有啊，给他 out 吧？ out bye 是吧？ out by dsc。 而且我们现在目前的话，这个创建时间他我们还没有去给他动态注入进去，是吧？ 我们现在创建时间他是为空的啊，为空的我们还没去做，这个的话，回头都是可以进行一个统一做的，因为我们现在那个那个蓝银器啊，现在还没有剩下。嗯，我们后面会开机开一个，开一节，专门去补充一下肾，肾 下的一些一些东西啊。好啊， ok， 这个好了，这个咱们咱们先不看了啊，我们看一下新增做好了，是不是？我们新增做好了？新增做好了，然后我们再做一下批量山竹，批量山竹的话我们需要用到这个，这个牵紧时间。我们看一下这个切克 box 的啊？ 也不是，他不是切克 boss， 他是那个表格，我们看一下表格的表格，他的那个事件这里多选是吧？多选多选，我们有一个这个事件，我们把它考过来， 换段时间放在这里，我们不是加了那个悬挂， 我没说 我们需要在这个台部上面，这个是台部级别的，台部上面按四个前进，然后焊的四六个前进，我们给他注射进来， 他也是一个方法，然后接收的是，我们看他怎么处理的啊？还能撕了个欠去，是吧？他会有个值，我们把这个值带进来。 will you。 我们看一下这个， 我们看下这个是否生效的用户管理，看一下控制台， ok， 关闭，然后我们把它全选啊，他出发了，是不是他这里面拿到的？是， 嗯，所有的这个，对吧？是所有的那个记录，是吧？所有记录。我们需要去取他的一个 id， 我们把他 id 拿到，我们把他 id 拿到。好， 我们需要处理一下这个数据，然后呢我们需要在这里面给他加上 check it， check 选中的 check it。 爱恋， 这是一个数组，是吧？一个数组，然后我们需要给他组装起来，放在这里放着， 我们不是有一个放一起吗？ 点迈腾，然后到这里面 r e s 拔牙丝，然后 我们去便利这个，然后呢我们去拿到这个属性，然后点爱的把它放进去，放进去之后呢？然后取出里面的 id， 然后我们再打印一下这个切给大家捏死就 ok 了 啊，我们看下这个纸啊， ok， 选中不错了，你拿着方式 破十吧。破十？搞错了，我以为跟写佳话一样的啊，九九九十 啊。他这里面每次搞的时候他都有新增，然后我们需要在每次选的时候，我们把之前呢给他清空掉， 我们把它清空掉，我们这样，这样他每次就不会重复添加了。四九，去掉， 去掉，对吧？我们这没有了。好，然后切给他爱丽丝，然后我们做那个批量山竹的一个事件， 我们就这个吧， 这个 at 克力克啊，等于 hand glance 批量删除 删除。然后我们在这里面去定一下这个方法， 定一下这个方法，然后我们这里面之前不是写过一个单个的一个 delete 吗？对吧？好，我们可以在这里面 加上，对吧？我们这个这个提示就不要了。确定删除吗？ 确定直行删除，一般的像这个，像这个一些提示的话都是有那个。呃，产品和 ui 那边定好的啊？并不是我们随便写的，是不是去提示删除算了，是吧？然后这个里面 我们照样是叠在此方法。叠在此方法之后的话，我看我这这里面传进去的是一个 lex 点 check it 的 ids， 我们传的是这个，然后我们在这里面判断一下，如果 let's check it out as 点认识等于零， 然后我们这里面再给他一个提示，请选择 在这里面给他一个提示，警告我们叫蜗牛， 请勾选需要删除的记录。 ok， 我们再去前面看一下， 我们删除。嗯，这应该给他阻止了，对吧？如果他这里面的话，我们应该就就直接返回了，不应该继续往下走了。删除请各选。需要删除记录，这里面确定需要删除吗？取消， 然后我们再删几个， 你得删除 点，确定删除成功这十一条了，对吧？ ok， 咱们的新增删除也做完了，然后插群也做完，对吧？好，今天我们就到这边。

行了，咱们这个看一看这个用户名登录的这个全部过程啊，第一个呢，我们在这里边写了两个这个用户名，写了一个登录窗口，一个用户名，一个密码啊，一个密码，一个用密码绑定了两个值， 分别是有点 pass。 然后呢，我们点击这个登录按钮的时候呢，做了一个出发时间，就钩捞针，钩捞针里边呢，我们在卖搜子里边就写这个钩捞针函数。 第一步呢，我们先设定两个用微号密码的正则，我们现在设的正则呢，是四到八位的这么一个正则，然后用正则对象里边探死这函数去测试 我们的用户名啊，密码的正则去测试密码他这两个太子的返回值啊，咱们原声里边讲过这两个返回值，他只返回出个 house， 对吧？所以说你测试成功的话， 他就返回处，而且这两个如果都为处的话，我们才能够康斯老那个验证成功，如果有一个不为处的话，我们就说他的密码永不对。 所以说咱们这是第一步的逻辑，咱们先把这个东西测一下，如果第一个是两位，第二个是符合逻辑点登录也不行啊，必须两个都符合，四到八位 登录，两个都符合要求带行的，那么符合要求以后啊，我们下部什么呢？下部我们要把这个用命密码呀，这是第一步啊，第一步我们先用第一步，用正则。第一步呢用 重则表达是重则匹配， 验证一下，验证一下用名、用户名和密码的合法性啊，这是第一步。第二步呢，二步我们要把这个数据弄到后台。第二步啊啊？数据， 呃，发到后台，发到后台去验证，去验证用户名，去验证有没有这个账号。 第一步啊，所以说我们这一步啊，我们这一步啊，我们先模拟一个，就说我们最后的结果啊， like， like 啊， es， 结果什么？等于处就有这个用户，先这么写一下，这地方呢？实际上我们要用阿迪克斯来替代啊，回头这一步要补一补啊，要补一补。 咱们现在先写一个什么？赖答， es 与处，也就是说后台反过来是个处，有这个账号，对吧？有这个账号，那我们现在进行第三步。第三步， 三步是什么呢？这如果用户存在或不存在，我们干什么？我们干什么啊？第三步， 所以说我们先判断一下，如果我们第二步反过来是按 es， 如果是处的话，不就表明有这个用户，对吧？如果有这个用户的话，我们干什么呢？我们首先第一步要写 logos， sorry， 写 logo， sorry， 因为在这个后台跟没有我们返回来的信息啊，他返回来一个什么信息啊？实际上他返回来的不见得非得是个普洱值， 因为我们这只写用微密码的，没写权限，对吧？所以说他得到后台拿这个值，拿什么的？返给我一个，返给我们一个什么值的，其实返给我们一个这个东西，说 obg 打过来的应该是一个什么呢？是一个对象，一个对象，对象里边呢？写着什么呢？悠字，悠字，比如说这个悠字就是呃 呃，优字，比如说咱们这输入的什么 adm a， 他这个优字实相就是我们上一步的这个优字，所以我们上一步的这个优字就优字，类似点优字，咱们我们这边一个东西，然后呢密码， 密码也就是我们上面的密码，还有一个权限，权限是从数据库拿的了，因为权限咱们输的时候没有，比如说是三啊， 也就说第二步反我们来的时候，返回我们的是一个用户名密码和权限用密码呢？其实就是我们上面填的这些东西吗？对吧？因为你验证如果合法的话，他才返回你这个用户名的，所以你反过来这个东西啊，其实我就是我们上部填的这个值， 填的值，他的验证在数据里有他返过，返过我们东西呢，就是这三项，当然还有你还可以返回他的这个登录日期啊，登录日期， 所以说他反了多了一项，多了一项权限，对吧？反复这么东西。所以说第三步的时候我们就确定一下，如果说这个 obg 存在的话，比如说 obg bg， 如果 obg 存在的话啊，我们去创造了一个什么东西呢？创造了一个由此用户，由由此用户，否则的话呢？否则的话 被扛走了一个，是吧？也就说 如果意思这样的话，我们看一下，哎呦， 这地方显示的有此用户，对吧？因为这个合法，这个合法，虽然我没有到数据库里验证，如果不合法的话 合法从这也没有因为他这你说老是不合法，这怎么还显示有死用户？咱们少了一步什么呀？就是如果两个用户不符合要求的话，这个地方是不少了个东西啊，不符 组合用户的话，他下边还执行呢，所以这个地方我们应该加个什么东西？你先放肆吧，是吧？ 因为你不合法的话，你下边别给我行执行这些东西了，所以这个时候我们在今天我刚才不合法的时候，他还显示有此用户，现在我们再测一下，我们这个就是不合法，我不合法的话我就是两个，两个数，两个数点击， 因为密码不对吧，所以说后边就不给你执行了。如果说你这个地方在不合法情况，你不打这个 boss 大嫂，咱还接着往数据给你找找东西去呢。再说你不执行的时候，不合法的时候，两个你再一登录，你看， 由此用户他又给你执行下，对了，他说不合法的，这个情况下，我们直接给他什么的每天放就完事了，上他房间执行了，到第二 二步呢，把这个数据发到后台，发到后台后台的时候呢？给职务给我们返回来，只有两种情况，有可能 bj 一个空对象吧，可能是个空对象，可能是个有对象的职。 看一下，如果法律是空对象的话，那合法。现在是合法了啊，一二三四，一二三四，登录由此用户啊，由此用户，也就是说他这显示的是由此用户，因为 obg 这显示是空，对吧？所以说这个地啊空对象不能自动转成，这个不能自动转成，这个不尔直 boss， 也就说空对象不能转正。如果数组的话，咱们看一下过他这 obd 法律是数组，咱们看一下啊，一二三四，合法吧，合法。一二三四，咱们看点一下啊， 用户，用户，这个地方如果返回有空数的话，这也不对头，是吧？咱们可以，如果返回是数组的话，我们是不可以用 愣死来进行那个咱，咱们俩如果说有直的话，不死用户啊，咱们如果说法国数字好，咱们用愣死的点愣死是吧？如果他有长度为零的话就是 no no no， 对吧？所以说咱们再试一下， 这么着的话，咱们一二一一二，这都合法的，都合法的一 no no 二。所以说对于数组的话，我们是不是要通过愣死？你要通过这个通数组这么来方案的话好像不行，对吧？所以说我们用他的愣死属性 论是说来判断我们后台给我们反过来的纸有没有，那么如果用户怎么办呢？用户就这一项吗？就这一项吗？啊？如果给我们反过来的这个空对象，比如说 like， 他给我们反过来只有两种情况吗？一种是空对象吗？啊？ 如果是空对象的话，如果是这个的话，我们可以怎么判断呢？不过 obg 第二优子如果存在的话，是不是就可以判断有死用户，对吧？你这么着的话呢？我去打 合法的一二一二三一二三四四，刷新一下，等会刷新一下啊，一二三 四，一二三四。合法吧，登录是不有此用户啊，所以说这无无此用户的时候呢，就是这个地方空的是空的啊，法律是空的，空的以后呢，我们就算我们再打一个合法的话一 no no no 啊， no， no no， 也就是说我们可以通过这种方式来判断，后台给我们如果没有这用户啊，他会反这个空对象的，对吧？ 那么我们可以判断，如果说反过来的东西有这个值，那么怎么办呢？有这值怎么办呢？我们就写 logo， sorry， 我们把我们的优乐内幕就写什么呢？就把这个用名写进去吧，就是这个地方应该写哦 b b 点 u 字，对吧？还有一个是 o b j 二 pass 权限呢，我们写 o b b 点权限啊， 这不就没问题了吧？就说我后台反我们的是这个值，我们拿到这个值就要先判断他有没有，如果没有的话，如果这个账号没有的话，我们可以给他一个提示，比如说给他一个 ilout flot， 无此用户， 无此用户。然后呢？让他去转到什么呀？让他去转到登录页去，对吧？蕾丝点啊 ot。 其实我们这个爷们就是捞人我们这个爷们就是捞人啊，无此用户咱们就不动了，不动了啊。也就说当我阿寻反过来是一个空对象的话，空对象一二三四，一二三四， 然后录五子用户，对吧？五子用户完了以后他就逮着一会不动了，对吧？所以说如果成功的话呢？成功的话写 logo， sorry， 然后转向，不转向呢？因，四点，这才转向的 lue， 二点不是，难道什么呢？ 转到咱们的新闻页去，新闻页是这地方怎么写来着？应该是个对象吧，对吧？你们的名字。然后是六十万有，六十万有里边，陆游里边这个新闻是哪个页面？转到英里是页面，英里是这个。 整到这去，整到这去，对吧？因这，所以说我们在这如果登录成功的话，一二三四，一二三四，然后登录成功。呃，等会啊， 逻辑。嗯哦，我们返回值还没给他去掉呢，把返回值弄过来啊，这时候后代给我们返回这个数据，是这个数据，我们就一二三四， 一二三四，这都是合法点击登录，知道吧？这转到新文件去了吧？啊？就转到新文件去了，所以说这时候我们 low 温度，你看温度似的叠的，这时候登录件 logo 所里就有东西了。啊 啊？这是咱们存的那个权限吗？又是怕都存在这里面的吗？那么这三个值我们在任何的值资组件里面都可以拿到的，所以这是咱们的第一步。 第一步分成这么三步，第一步呢是政策验证，政策验证完了以后呢？第二步上后台数据库，拿数据做比对，后台给我们返回来一个东西，这个返回来的格式啊，都不一样啊。 之后咱们讲那个，呃，后台的时候，咱们再说反过来的格式啊，最简单的格式就是这种格式，然后我们去判断这个格式里边有没有反过来这个状态，如果有的话，我们可以看日本的存储， 然后直接转到这个页面就行了，没有的话直接按链的啊，这是咱们的在登录页要进行这么一个基本的处理啊。

各位同学大家好，这里是由 it 引点 com 为大家提供的 vue 基础加 vue 无人点单，无人收银系统项目实战胜利教程，我是朱教老师。大地 这一讲开始的话，我们就正式进入这个维优 e 的一个学习，在学习这个维优 e 之前的话，我们首先给大家介绍一下我们前端的一些呃技术以及这个薪资的一个分布啊。 首先的话，大家看一下，就是如果我们只会这个 html 五 css 三啊这个 gq， 然后会写这个 ps 端移动端的静态页面的话，那这时候我们可能能拿个六到八 k 啊，这说的是北上广深这样的城市能拿个六到八 k， 那如果我们啊，如果我们不仅会上边又会这个阿哥维优 e， react 这三大框架里边的任意 一个框架啊，那这时候的话，我们可能这个薪资就到十 k 加了，对吧？那如果我们这个框架啊，框架啊框架会，对吧？并且又会闹得 gs， 那就是我们这个薪资可能就是十三 k 加啊，但这里边这是我们说的最低的一个薪资啊，当然有些同学可能就会个维优 e， 那拿个十七 k， 十八 k 也有，对吧？也有啊， 这就是这个当然啊，如果我们呃会这些东西啊，会上边这些东西，并且又会这个混合 app 开发，也就是会瑞瑞亚克 niko 对吧？或者是 l 内科啊，那这时候的话，我们这个薪资可能就在十五 k 加，对吧？当然 也有人拿二十 k， 对吧？啊，也有人拿二十 k 啊，这就是我们这个什么呢呃前端的一些技术以及这个薪资分布的一个简单介绍啊，那下边的话，这里边再给大家，再给大家做个广告，对吧？那这里边的话有我录制的这个阿哥五的基础啊，基础 包括实战的视频教程，还有这个 note s 基础实战，包括还有这个扣哇，二的一个基础实战，包括还有 l 那个三的基础实战，对吧？但是这边基础的话，基础都是都是免费的啊，免费，那这个 项目实战啊，项目实战需要赞助啊，需要赞助，这就是一个广告啊，那接下来的话，我们就正式进入我们这个微右翼的一个学习啊， 那维优 e 的话，他啊，维优 e 的话，他和我们就在下边写啊，回头给大家整理一下维优 e 啊，河水呢和这个微和这个 react 啊，还有我们这个阿哥啊，都是我们前段的这个框架啊，给予我们这个扎拉 cry 的前段框架啊，维优 e react， 呃， vr 的啊，都是前端呃，前端框架啊，都是前端框架，那这个框架和 gq 有什么区别呢？它是一个单页面啊，单页面框架啊，就是可以实现我们 这个单一面，当然现在的话，有些同学可能，呃不知道什么叫单一面，对吧？啊，回头我慢慢学你就知道了。首先可以实现单一面，那其实的话他们都急于水呢，急于模块化啊，急于啊，急于这个模块化组建化啊，组建化啊的开发模式啊， 这就是我们这个三大框架的一个简单介绍啊，就是他们三个都是前段框架，都是基于单页面组结块的开发模式啊。 那这个维优 e 的话是我们这个国日开发的啊，国内的大牛开发的，所以他在我们国内的话应用是非常广的啊，这个维优 e 啊，简单啊，你看他介绍啊，叫简单灵活，是不高效啊，简单灵活，高效， 简单啊，灵活啊，高效啊，所以在我们国内啊，国内的，呃，中小企业啊，啊，中小企业 里面用的用的非常多啊，用的非常多啊，这就是他的一个简单介绍。 ok， 那介绍完之后，那接下来我们就给大家看一下这个维优 e 的一个安装啊，维优 e 的安装就是我们在使用这个维优 e 之前啊，我们首先要搭建这个维优 e 的一个呃，环境啊， 怎么搭建呢？这时候你首先在百度搜维优 e， 找到以后点起步啊，点到起步以后，你看到他都是中文的，对吧？因为我们中国人开发的。然后接下来我们要啊搭建我们这个维优 e 的环境，你首先这里边点安装对吧？ 啊？点安装以后，你看到他下边啊，有一个叫直接引入，当然我们现在的话，我们不是在这种开发方式啊，现在都是基于这个搅水架工具啊，这个 cla 搅水架工具，这个模块化、组建化的开发方式啊，所以我们待会要这样搭建我们这个环境，但是在搭建这个环境之前啊，那就是搭建 唯一的开发环境啊，而且之前啊准备工作，准备工作就是必须要啊，要安装 note s 啊，必须安装 note s 啊，这个，这个是要要一定要做的啊，必须安装到 gs。 安装完成以后，那接下来我们第二步就开始，哎， 搭建维优 e 的啊，开发环境啊，大家开发环境就是首先第一步需要全区安装这个维优 e 的一个 cry， 也可以说维优 e 的命令行工具，也可以说叫维优 e 的一个搅屎加工具啊，啊，只要搭建开发环境，然后啊叫 呃，首先大家开发环境的就是安装维优 e 的啊，脚手架啊，脚手架工具也可以说叫什么呢？也可以说这里边叫他的一个命令行工具啊，官网的命令行工具， 明抢工具。 ok， 这就第一步啊，这样的话就团聚搭建成功了啊，搭建搭建完成以后，然后接下来我们就可以创建项目了啊，那接下来我也给大家写一下创建项目 啊，创业项目，怎么创业呢？那这里边官方也写了啊，稍等，官方这里边也写了啊，一一就是通过什么呢？通过 vue 引引他，那我就把它拿过来啊， vu 引引他，然后 vipec 来创建我们队的一个项目啊，稍等，拿过来， 拿过来啊，就是通过 vu e 赢 eat。 那我这边还是自己敲一下 vu eat， 然后比如说叫啊 vue vue 一个杠，带帽零幺啊，带帽零幺，那这样就创建项目了。创建好以后，然后接下来我们啊 cd 到这个 vue 带帽零幺里边啊， c 到带帽零幺里边需要安装什么呢？安装依赖啊，安装依赖啊， cd 进 以后，然后这里边运行一个叫 cn pm 银色或者叫 npm 银色啊，这个说到 cnpm， 一会再看 ntm 银色，这叫安装依赖啊， 安装依赖。安装完成以后，然后接下来我们一起 npm 让一个 dv 啥的 npm 让啊，第一 v， 那这样我们就运行起这个项目了啊啊，这就是我们这个呃 voe 呃 voe 环境的一个搭建以及项目创业的一个流程，那接下来我们就按照这个给大家来一下啊， 那首先的话就是啊，你的电脑上啊，首先要安装到的 gs， 这个是必须的啊，怎么安装我就不说了，回头下一步，下一步自己安装啊，安装完成以后，然后接下来我们要搭建这个维优 e 的开发环境啊，那只手我先把这个复制过来啊，那只手的话要搭建环境啊，那只手我们需要安装这个 脚手架工具，也就是在这安装这个脚手架，那就是在这走一下，对吧？但是我这里边已经安装过了啊，你就在这回车，哎， 回车一下啊， windows 加 r， 我先解说一下， windows 加 r c m d 啊， c m d， 然后这里边打开，打开以后把这句话复制进去啊，不需要自己敲复制进去。回车或者这里边啊，他这个 n p m 比较慢，我们也可以改成什么呢？改成 c n p m 啊，就是这里边你也可以用 c npm 来安装我们这个教室下工具啊，这是全局安装，必须要安装啊，就是通过 npm 或 cnpm 啊，那一会我们再说 cnpm， 呃，怎么来啊？当然你的 cnpm 可能不是一个内置命令 npm 或 cn pm 安装啊，这第一个安装，那这里边我已经安装成功了啊，所以接下来我就直接创业项目， 那创业项目的话啊，首先必须找到，必须啊，要，必须 cd 到对应的 一个项目里面啊， cd 的项目里面什么意思呢？就是我要创业项目，那我首先必须得 cd 到我们对那个项目，比如说我接下来要在 c 盘里边的这个 vue 这个文件件里边创建项目，那之后我们就 c 到这个文件里边啊，我先 ctrlc 结束掉 cd 啊，比如说来个 c 盘， cd 地垫杠 啊， cd 低调高啊，然后这时候就到 c 盘了，对吧？到 c 盘以后，我 c d 到这个 vue 里边啊，啊， vue 里边 crs， 这就是我们对应的什么呢？对应的这个 c 盘，那接下来我在这创业项目，创业项目的话，一种方式，通过 voe， 一个啊 i n i t 音的一个 web pack 啊， web pack， 然后这里边来个 vue， 比如我们来个呆猫零幺，那这样回撤一下，那之后他就会给你生成我们一个呃 vue 的一个项目啊，那稍等一下，这过程 的话，如果快的话呢？呃一下就成功了，如果慢的话可能得个三到五分钟啊，所以那先等待一下，你看他这边告诉我你的名字是唯有一呆萌吗？然后你的这个呃 项目的描述是什么东西？那你这时候你可以写一下，也可以不写，会撤啊，然后坐着是什么？那你也可以不写，对吧？然后再接下来这里边告诉我什么呢？呃 v o e 必有的，对吧？优子老 k 子，对吧？就是啊，那你这个都回车就行啊，回车一下，那这里边儿他问你，哎，你师傅安装这个 v o e rute 啊，但是这个大家还没学过，对吧？啊？我们还没给大家讲啊，那回头我们 呃学了以后再慢慢给大家说，但是你这里边，这里边我们正常情况都有的啊，所以你就选 yes， 对吧？但是你也可以选 no， 对吧？然后走一下，然后问你是否要用这个 e s link es link 啊？这是什么东西呢？这是我们 一个代码检查的一个工具啊，但是这里边的话我们不建议大家安装，如果你安装上以后啊，你多敲个空格，少敲空格，他会报错的啊，所以我们这边选个 n， 对吧？然后接下来回车，然后这里边他又告诉你 set up 什么， 用力推这个 teast， 对吧？你这时候你就直接回车啊，回车，然后这里边就是要注意我们这里边选择一个，呃，在我们这个 es， 宁可我们选个 no， 对吧？然后接下来回车，回车，这里边告诉你，一言一途意，对吧？端对外测试用一下，你这里边就回车回车，那这样啊，他就开始就创建好我们这个项目了，对吧？啊？创建好项目了， 到这边这些东西你都可以不用管啊，你就管哪个呢？就管这个 es， 令他啊，令他 lint， 你把他这个呃 这个写了个 no 就行了啊，到这里边他就开始安装我们这个依赖，你看啊，就是我们刚才说的。呃，说的什么呢？说的就是到这 啊，维维银特，然后这里边 cd， 然后 cn mc 到，但是现在的话，你不需要执行这一步，他直接在这里边创业项目的时候就给你安装依赖了啊，如果这里边安装不成功，就是如果你在这安装不成功啊，你这时候 cc 结束掉，结束掉 cd 到这个项目里边，然后重新用 cnpm 来安装我们这个项目啊， 那这个 cnpm 他是打啥东西呢？他其实就是我们一个包管理工具啊，那我们来给他打开啊 cnpm， 如果，如果大家不知道，你也可以在这安装一下这个 cnpm 啊，淘宝镜像啊，就是淘宝镜像， 但是怎么安装他呢？你回头就通过啊这句话来安装啊，也就是 windows 点，然后打开 cmd， 然后把这句话输入进去，输入进去以后，那我们就可以用 什么呢？用这个 cnpm 来替代这个 npm 啊，因为 npm 他是从从我们这个什么呢？呃，从这个从国外去下载这个包啊。 cnpm 他是我们淘宝镜像啊，淘宝镜像 啊，然后自行票吗？是不是相当于这个？哎，下载包的速度更更快一些啊更快一些啊。行，这就是我们这个环境搭建，那稍等一下 那稍等一下呢，这个项目就创业成功了啊，就是我们刚才啊，通过通过这么个命令创业成功了，然后创业的时候这里边要注意的就是这啊， eslink， 你把它选择 no 啊，那接下来这边创业成功了，创 成功以后，我们 c 到这个项目里边， c 到我们这个 vu e m 零幺，然后运行一个 n p m， 装什么呢？呃，装第一位啊，运行装， 那这样我们这个项目就跑起来了啊，但是这里边给大家我这边是这样写的啊，这里边要注意的就是啊，就这这一步，如果啊，如果创建 创建项目的时候没有报错啊，没有报错，那这一步啊，没有报错，那这一步就可以省略啊这一步。哎，可以省略， 如果报错了，如果报错了啊，就是我们 cd 到这个里边啊， cd 到项目里面运气谁呢？运气这个 cn pmis。 什么叫 cd 到项目里边呢？也就是如果你看啊，稍等一下， 如果我们刚才怎么怎么这么多东西呢？啊？把这个煤油的鞋关闭掉啊，煤油鞋关闭掉啊，就在这已经跑起来了啊，就如果我们刚才这里边创业项目，在这创业的时候，他报错了，报错了你就 cd 到这里边， c 到这个微微单模零幺里边， cd 进来以后运行 c n p m e s 套啊， c n p m e s 套，如果啊报错了，你 c d， 如果没有报错，那你就可以省略这一步啊， 先这样的话，我们这个项目就跑起来了，稍等一下啊，这边就跑起来了，他叫多少呢？我们看一下啊，正在变异 lock house 的八零八零，那这时候你就在我们这里边输入一个叫 local house 的， local house 的一个什么呢？来，八零八零八零八零。 ok， 那这样我们这个 voe 的项目就运行起来了啊， 预习起来以后，那接下来我们打开这个项目啊，就在这，我点击这个，呃，打开，打开这个文具夹，对吧？打开文具夹，然后这里边选择我们这个项目，然后点开，对吧？点开他就是这么个东西啊， 这边的话这个文件的话是比较多的啊，当然我们回头开发啊，用这个用这样一个环境单页是没有问题的。那其实还有一个大家可能不知道的，就是官方还给我们提供另一种 来创建项目的方式啊，那就是第四啊，叫另一种创建啊，创建项目的方式啊，就是通过一个叫啊维优 e， 英英特 web peg c 跑来创建这个项目啊，来给大家写一下 啊，他和上边是一样的啊，就是通过另一种，就是通过维维银特 vipec 杠 sim p l e。 那这样创业项目的话，他这个项目的目录结构相当于更简单一些啊，他不会像我们刚才创业时候给你提， 可以让你提示啊，给你提示这么多东西，对吧？又是语法检查了啊，又是告诉你要不要有这些乱七八糟东西了，对吧？他不会给你提示这么多，哎，就是你如果用微有引引他 wipec 这里边他有个语法检查，如果你不小心的话啊，你有语法检查，那我们开发起来是非常痛苦的，对吧？那如果我们用这个维维银特 有这种创建项目的方式，那创业时候他就没有于发解查，并且是一个啊非常简单的项目啊，那回头大家用这种方式创建啊，用这种方式创建都行啊，这是两种创建项目的方式。那接下来我们用第二种再给大家创建这个项目啊，都可以的。 现在接下来我们创业创业的话呢，也是一样的啊，也是一样的，首先 cd 到我们这项目里边呢，有 cd 低调杠， cd 低调杠，然后 cd 到我们这个 voe 里边啊， c 到这， c 到这以后，然后接下来我们在这通过一个叫 voe 啊，引印它一个 viable 派克杠 s i m p l e 就是官方提供的。上边这种方式可以的啊，但是他创建的项目目录比较多，那我们还有另一种方式，就创建一个呃比较简单的项目，叫 ypax zippo， 然后这里边我们写上我们这个叫呃，维 ue dm 零二啊，零二，维 ue dm 零二。那这回车一下，大家看一下， 他这时候就在我们这个微优异里边又给我们生成了一个微优异单猫零二的啊，那稍等一下，到这里边现在也会提示啊 啊，告诉你的项目名是是 vu e w 二吗？啊，那就是，对吧？描述什么？那描述是空，那就回车，对吧？然后坐着什么？然后可以不提，对吧？然后你 license 什么也可以不提，然后问你是否用萨斯，对吧？啊？是否用萨斯？如果你是你就写是，如果你是个项目不用，那就写辅，对吧？啊？那这边我们这个用萨斯，你就写 y， 对吧？然后回车， 这样的话，你看项目创建成功了吧，是不？呆毛帘就出来了，但是这时候创建时候，你看他这个目录结构要相比这个是不是要简单好多啊， 对不对啊？咱俩个都可以啊，就是你中小项目你就用它反而会更精简更简单一些啊，包括我们回头讲也是用它来实现啊。那行，那之后你看他告诉你啊，用什么呢啊？就是你用个这么个命令来走我们这个项目，对吧？就首先 cd 水呢， c 道为由， e dm 零二 cd 进来以后，然后运行 npm e 四二对吧？或者我们这边叫 cnpm 已经四二，对吧？ cn pm 四二，刚才已经说了啊，如果大家没有回头按照这种方式安装一下啊啊？安装一下，那我们这边 cnpm 一四二一下， 那 cnpm 的话相比我们这个 ntm 要快一些啊，但是这个过程的话可能得等个三到五分钟，所以大家不要急啊，慢慢等，他只要再走说明没问题啊，但是我这边这个网速还是比较快，马上就成功了，对吧？是不是就成功了？成， 成功以后，然后接下来就是这一步就完成了啊，那我这一步还是把它去掉啊。就是这个是上边啊，上边他是不是自动会给你按啊？如果你没有那个自动安装依赖的东西，那你就呃走这一步，那这个现在做什么操作？就是刚才 cnpm 以上，现在就是把 我们这个项目所需要的各种包啊，下载到这啊，下载到这，那接下来的话我们要运行这个项目也是一样的，我们运行什么呢？你看我们现在是在呃零二里边啊，我们运行 npm 装一个什么呢？ dv， 那这样我们这个项目就跑起来，对吧？那跑起来我们也可以改一下啊，比如说我打开我们这个文件夹，选择零二，然后选择到，对吧？选择到以后这个目录是不是相比刚才也简单一些啊？这就是我们这个维优 e 的文件啊，那接下来你看一下这边有没有打开。呃，我们看把这些关了啊，我们看叫什么名字， 稍等，别弄错在上面啊，叫 loco host， 八零八幺，那你就在这输入一个叫 local host 啊，这个八零八幺啊，走一下，那这是我们戴帽铃看到就打开了，对吧？啊，那之后你也可以在里边改东西，比如这里 别的东西，那我去掉，对吧？去掉啊，叫啊，你好，一个维优 e， 你好，维优 e 啊，啊，你好，维优 e， 那就是我们就这个项目就运气起来，对吧？运气起来了， 在这里边是因为我这里边啊，你看他是从我打开的，是因为我们这边没有安装 vue 的插页，那这边用的是一个叫 vs 扣的啊，如果我们要让有 vue 有提示，你就在这啊搜 vue， 然后这边把这个 vue 的这个呃提示工具安装一下啊，就点击安装就可以了， 安装完成以后点击重新加载。啊，那这是我们这个维优 e 的啊，代码他就会给我们解析了，对吧？看到了吗？啊？就解析成这种格式了， 这是 html， 对吧？这是业务逻辑，这是 css 文件啊，这个我们回头再慢慢看，反正你就在上边改个。你好，维优 e 那只手，我们在这是不是就出来一个叫你好，维优 e， 对吧？你好，维优 e。 行，这就是我们这一讲给大家讲东西啊，主要就讲了我们这个环境搭建的这么，呃，两种方式啊？两种方式，那这一讲我们就讲到这。