粉丝411获赞7165

好,接下来的话就是安装项目啊,安装项目这一块啊,为什么要安装这个 note 环境?因为我们前端的话,所有项目都是基于这个 note 开发的,基本上,所以说你必须得安装这个 note 环境啊,安装 note 环境之后你才你才能用这个啊, n p m 这种这样的一个命令。 ok, 我们来呃输入这个命令啊,然后去进行安装,首先我们选择一下文件夹啊,文件夹的话我这边直接选择这个 test 文件啊,然后这边我用这个右击是吧,输入命令或者中端打开 啊,这一块的话,你可以直接啊这个 shift 加右击啊,中单打开也是可以的 啊,然后输入承诺的,看有没有反应,对是有反应的啊,当然最好还是安装这个 get 工具,这个 get 工具还是方便一点, 就这块的工具。然后我们再输入一下啊,输入一下我们的这个命令,这个命令是什么呀?就是安装 v u e 啊, ok, 好,粘贴起来就是我们的命令啊, 这相当于我们安装的是 v u e 的,是一个最新版,也就是 v u e 三。好,这个时候的话我们就要选择一些这个功能啊,就是我们看一下 我们要注意的哪些思想。首先第一个就是啊,这一块是 project name, 就是项目名称啊,比如说我们的项目名称叫做,呃,这个演示嘛, test, 呃, tens 的颜色是吧? tens 是 tens a, 好吧,就是 tens a。 好,这边是这个哈,像 名称,像名称的话我也就叫 text 小 a 啊,那自动生成啊,这个是是否用这个 types griff 啊?磨人的话是不需要使用的,当然这根据自己情况,如果说你对这个呃这个 ts 比较熟悉的话,你可以用这这个 ts 啊,当然我不建议用 ts, 因为 ts 我感觉对我个人来说还是感觉还是有点没有 ts, 因为 ts 显这么舒服 啊,没有那么快方便啊,那默认的话就弄我们直接进行啊,然后这个是呃 gs, 这 x 啊,这个面也不需要支持啊,这是代码教练,我们都不需要。 ok, 然后这边的话,就是啊,是否给页面增加一个路由啊?路由的话肯定是需要的,所以我们要选一下这个 yes, 然后 yes, 选择的话就要注意啊,就是选择 yes 之前必须先按空格啊,这是我们要注意的啊,这个需要坑,这是一个这个这个命令,我们要先按空格,然后再输入 yes 啊,它的有效啊,这样的话我们就可以看到这里啊,我们选择的是 yes 啊,这个是要注意的,因为这一块我,我当初当初的话,这一块我也是卡了,我最少卡了两个小时吧,嗯,每次输他都没反应,比较坑的,但确实我也没看懂这种写法,为什么要加个空格,那才才有效。 ok, 然后我们看下一个啊,这个是啊,这状态啊,这个这个 panel 啊,这个状态状态的话也是需要的啊,就是我们在后面做项目当中,比如说用户登录了呀,是吧,这个程序是否打开了, 哎呀,这都是需要状态的,所以我们按空格输入 ds 状态也是必须要的。然后这个单元测试,单元测试的话,一般我感觉单元测试很激烈,不需要单元测试,特别是做小小项目,根本就不需要单元测试啊,然后这单元测试我们不需要。 ok, 这个是啊, esdint 也是一个 es 的一个检测工具,我们也不需要啊,乱七八糟东西我们都不需要。 ok, 这样的话我们就把这一整个的一个啊,一个 v o e 项目就给安装好了, 安装好之后啊,我们再看一下啊,这边就会告诉我们要要 c d 是吧? text a c d text a 是什么意思啊?其实很简单,我们可以看一下,我们的是当前目录 text a 啊,这是 text a, 也就是说我们这里 它会自动给你创建一个文件夹啊, cd 到 taxa 的话,就相当于我们双击的文件夹,也就是我们进入到这个项目当中来了啊,这是我们的一个 viv 项目,就已经安装好了啊,就已经下载好了,也不还没有安装啊,只下载好了,所以说他们都让你去 cd 一下 啊,我们按 ctrl 加 c 啊,中断一下,我们 cd 加啊 test a, 我们到这个目录来看啊,这个是探视令,当然你也可以直接在这里右击啊,右击是吧,右击也是一样的啊,可以到这来选,选择这个目录 好,然后我们再进行安装。安装命令的话也是很简单啊,安装命令我们 cd 进来之后我们就要安装,安装的话就是这个 install 是吧? n p n p n install 是吧?安装,只有安装了我们才能 启动这个项目。好,我们等待一下,好,等待它安装。 ok 啊,这边安装完了,它上面显示说我们已经下载了一百四十多个包啊,这边多了一个文件夹,可以看出啊,这个 note 啊, models, 对啊,那个文件夹 啊,这是我们所有的插件啊,这就是我们真正的安装好了,安装好之后我们再启动,启动的话也是我们要通过这个命令啊, n p m 让 d v 啊进行启动,可以看一下。 呃,我们继续打开这个命令啊,安装完之后我们 m p n r d e v ok, 这就是我们的一个 v 一项目就启动好了。 这边是我们的地址啊,这个地址的话我们就只需要把它复制一下啊,复制一下,然后用浏览器打开浏览器,我们用浏览器打开一下, ok 啊,这就是我们默认的一个 v u e 项目就安装好了,还是很简单的吧。



大家好,欢迎来到特斯丁学院 mank 压测平台开发系列课程,我是主讲 will, 这一期给大家带来 vi 前端项目搭建。搭建 vi 前端项目首先需要安装环境,那第一个要安装的就是 note j s, 大家可以去到 note j s 官网下载长期稳定版安装,此处省略安装过程。 安装之后需要配置环境变量,那么环境变量呢?主要是把 note gs 的安装路径配置到 pass 变量里面即可, 此处也省略了,找到你的 note g s 的安装跟路径,把这个跟路径配置到环境变量的 pass 变量里面即可。然后是检测安装环境,打开 c m d 输入 m p m version, 装好了的话可以看到 n p m 的版本, note 的版本等等相关信息,如 如果你没有 m p m 命令,就说明你还没有装好 note g s。 装好 note g s 之后,我们就需要一款强大的编辑器啊,推荐大家可以使用 v s code, 同样大家可以去到 v s code 的官网去下载安装即可。 此处选择安装过程啊,以上相关的安装包也可以找卡老师领取。当我们把基础环境安装好之后,就是创建 v o e 三项目,其实在 v o e 三的官网里面是有提供项目创建的详细教程的, 我们可以进入到 v u e 三官网,然后按照官网的指示一步一步去创建即可。首先我们找到一个放项目的跟路径, 不要放在 d 盘 vs pro 下面,那么在这里的话,我们可以呢打开 poul shell, 输入官网上面创建项目的命令,等待提示进行。 当命令执行到如下界面的时候啊,这个步骤提示我们输入项目名字,我们可以取名为 m o front。 前段 接下来这些选项官网也提示了我们,如果你不知道选什么呢,都选 no, 当然我们这里呢已经确定了我们技术架构,就可以知道哪些要选,哪些不要选。 选第一个选项我们选 yes, 第二个选项选 no, 第三个呢也选 no, 第四个选 yes, 因为我们需要用到 pink 做数据管理,然后其他的都选 no。 接下来我们项目就创建完成了, 到我们执行命令的目录下面就可以看到呢,有一个叫 my friend 的项目, 我们接下来使用 vs 扣的把这个项目把它打开就好了。 fail open foot 找到我们刚才的项目第一盘 vs pro my friend, 选择这个文件夹, 然后点 yes, 到这里我们就把整个项目创建好了。接下来呢就是项目的初始化,因为整个项目并不是立即能跑的,我们需要在 terminal 里边点 vs code 布局里边第二个,把 tomito 显示出来,然后输入 m p m i 或者 install 都可以等待项目初始化完成。项目初始化完成之后,我们就可以发布项目了,发布项目其实很简单,你可以自己输入命令, 也可以点 npm script 里边的 dv write 命令就是 npm run dv。 那么接下来可以在浏览器里面访问他提示的这个链接,就可以得到视力项目, 这就是我们创建好的 视力项目。那么接下来我们给大家解释一下这个项目里面这些文件的含义。 项目的主要文件第一个呢, note models, 这是安装的依赖,比如说我们刚才 m p m i m p m 因斯度的时候安装的呢啊,所有组件依赖都会出现在这里面,这个呢,一般我们不用去管它。 然后 public 路径下面呢是一些公共发布的静态文件,比如说呢?呃,浏览器显示的这个 logo, 小 logo icon, 我们主要关注的呢还是 s r c 目录下面,因为 s r c 呢,其实是存放我们自己的原码,所以这个是非常重要的,我们大部分编程都是在 s r c 里面,而 sear 词里边存放呢静态文件 component 词存放 呢组件,因为我们有时候有很多页面是比较大的,不太可能一个写在一起,我们会分多个组件去写。 然后是 dos 里边是本地的缓存,我们使用到的 p 呢,到时候呢,就是在这里面使用 a p p 点 view 主页面的呢? view 入口闷点 t s 主配置入口,大部分配置呢,都是在这里面配。 然后下面还有几个文件呢,大家需要了解一下。第一个 index 点 html, 这个呢是 hdr 入口文件,一般我们不需要动它。 package 点 jason, 呃,后面我们自己安装的组件都会在这里面看到你安装了哪些,比如说 pin 是多少, view 是多少版本,这些在这里面呢,都可以看 看到。然后呢是 white config 点 g s 全局配置的时候,我们会用到这里面的东西,后面呢,我们用到的时候再详细来看这些文件的一个使用。先给大家讲这么多,接下来会给大家带来 v u e 前端开发的课程,谢谢大家。

ok, 下一步的话我们来实现一下这个表格的一个分页器的效果啊,我们找到这个样式啊, 样式里边呢有一个叫 pj a nation 的分页啊,我们就找一个这个功能最全的这个一个完整功能的, 然后我们复制一下这块的代码 啊,放到这个表格的下边。 ok, 这块 spa 不要,然后我们给他改一个类名,就叫这个推爆 的 pj nation 啊,然后我们也去给他定一下这个样式,我们先看一下这个样式啊,是在这个下方的位置,那我们把它调到这个右下方吧,右下方的一个位置啊, 这样呢,我们就找到我们的这个共同的样式,然后给他加一下,还是 let table 香的,然后我们可以给他来一个 u 浮动 距顶部的高度呢, 给个十二 px。 好,我们看一下效果。 ok, 然后这个分页呢就到了这个右下方的位置 啊,现在的话我们就针对这个配置,配置微审上啊这几个属性给他添加一下啊,其中有两个这个方法, 然后我们先给他拷贝进来,然后大家这里有两个方法,然后我们也放到这个 message 中, 一个是在这个叶这个塞子发生变化的时候,一个是当前叶发生变化的时候,然后我们可以看一下他这个打印的结果, 那我们打开这个控制台看一下 ctrl 啊,这里有一些报错,我们先 给他加一下,因为这里有几个属性的没有被定义啊,这个看人的配置呢,我们就叫看人的配置,然后我们定一下这个 这个属性啊,想默认给一个空置啊,当天下的话,我们可以默认给个一, 然后呢有个配置赛的属性,这个配置赛的呢,我们可以看一下啊,就是一个这个下拉的选选项啊,可以是一百、二、两百、三百、四百,这个是可以自定义的啊,那我们不需要这么大,那我们可以从十 二十、三十四十啊,三十吧,就三个就可以了,然后默认的陪着下一个呢,我们给个二十啊,总 数呢?总数这个地方我们也要给一个啊,这个地方我们需要通过这个接口,我们需要把接口返回那个头套呢给复制过来啊,现在我们先一会,一会我们把这个纸给复进去啊,我们看一下这个效果, ok, 然后这个下拉呢,就是我们刚才改,改成了这个十二十三十啊,这个总条数呢,就是由这个头条来控制的啊,我们一会把这个接口返回的总数给复复制过来。 ok, 然后呢这个每一块的这个属性呢啊,一共这个总数,然后一个切换这个每页的数数量,然后这个跳页啊,包括这个输入跳页啊,都是有 从这里边的这个雷奥特来决定的。比如说我们把这个头套给删掉啊,保存一下啊,前面这个头套呢就没有了啊,同样的我们把这个塞子去掉呢, 然后这个塞子就这个钥匙就没有了啊,这个根据需要可以进行的适当的增加或者删除啊,然后这个呢是个 翻页啊,是向前一页啊,向后一页,这是个跳页,然后这个是呢这个中间点的这个啊,点击跳页这个啊, 然后我们可以看一下这个跳页的时候呢,他一个输出,我们选第二页,他会输出当前页为二啊,点第四页当前页为 于四,然后我们可以也可以在这输入,比如说输入六啊,当我们点到这个输入框外边的时候,就失去交警的时候呢,他会触发这个跳转时间,然后现在失去交警之后呢,他会跳到这个第六页啊, 然后另外一个呢,是这切换这个每页的这个展示条数,比如说我们切换十啊,他会显示每页十条啊,三十,每页三十条啊,然后我们就可以通过这个呢, 通过这个分页器啊,现在给我们返回的这个当前所处的页和当前所处的所选择这个条数啊,可以去 对应的请求这个后台的指定的数据啊, ok, 我们先把这个头套给他加一下,给一个变量,比如叫头套 cons 啊,然后我们也要给他定一下 头条看看呢,我默认呢给个零啊,一个 car 的配置,然后另外呢还有一个配置 size 啊,这个配置 size 呢,其实也可以,就是也需要得定义出来啊, 因为他也是需要变化的,我们默认是给个二十啊,完了,配置 size 呢,给他复制给过来之后呢,我们再 跳跃的时候啊,就是我们在这每页三十条啊,这就是我们的那个配置撒一次,就是发生变化的时候呢,我们需要把这个这个值呢对应的复制给这个配置撒一次。那也就说呢,我们在这个 size 发生变化的时候呢, 给这个配置 size 收一下值, ok, 另外呢就是这个当前页当前页的这个跳转呢,我们需要给这个卡润特配置啊,这个属性给他做一个复制, 就是当前页发生变化的时候呢,我们给他重新复一下制啊,这样呢就会保持跟这个数据 表格呢啊处于一个同步的状态啊。 然后呢我们再我们看一下这个,先看一下这个效果啊,然后这个头套是零啊,因为是我们这个取取得来的数据,我们看一下, 对,我们这里呢这个 dat 中呢返回了这个吐槽 count, 我要把这个吐槽 count 呢复制给我们这里定义的这个吐槽 count 等于, ok, 我们刷新看一下啊,现在就是总共有七条数据啊,就可以展示出来了。 然后呢另外呢我们把这个切换的时候呢,让他去重新去请求一下我们的数据啊, 我们先看一下这个网络请求啊,比如说我切换二十啊,这现在是没有请求数据的,我们就说正常的话,在这个切换这个条数的时候,或者是切换分页的时候呢,要进行重新的这个数据查询。 ok, 那我们在这个 size 发生变化的时候呢,我们可以钓鱼下这个楼的,对的啊,同样的我们在这个当前线发生变化的时候呢,也可以钓鱼下楼的,对的, 然后我们再看一下这个请求,比如说我们选十, ok, 我们看一下这个参数 offset 零,雷美特二十,那这个地方呢就会有问题,因为我们这个地方呢只是需要去请求十巧,但是我们这里呢雷美特是二十啊,然后我们就可以需要改一下, 改一下什么呢?就是在这个我们 low the data 的时候,调用这个 low the data 方法的时候呢,把这个固定的,把这个直呢给他重新计算一下啊,我们雷米特呢啊,就使用我们这个配置 size 啊, 我们指定每页有多少条,我们就让里面它等于多少。那这个 offsat 呢?就是我们要从第几条开始查呢?这个呢我们需要计算一下,那就是当前页 减一,然后乘上一个,这是 size, 然后这样呢,我们再看一下这个, 这样呢,我们再看一下这个请求参数,比如说我们选十啊,请求的是零到十啊,我们如果选二十是零到二十,然后呢这个这个总页数呢?我修给一个 小的,然后我们可以看一下这个有多个分,多个多条分页的情况啊,比如说我们给一个, 给个两条啊,一样的数据是两条,然后我们的配 塞子呢也给成改成这个两条,那也就说是一页呢,我们只显示两条数据,那这样呢,他这个分页上就会自动的去计算啊,根据这个总条数和每页的这个条数啊,自动会计算去除他会有几个分页, 然后我们可以点一下第二页。 ok, 我们看一下这个参数啊,是从第二,相当是第三条数据, 请求两条,也就说请求了第三条和第四条数据,那我们点第四啊,因为只有七条吗?然后第四页的话就只有一条数据啊, 那我们可以看一下 off 赛特六,雷梅特是二,比如说呢,他是从第七条数据啊,去搜两条,但是数据库呢,只有一条,所以说他只返回这个一条数据啊, 同样的我们可以看一下这个,我们输入二,我们失去焦点。 ok, 看一下,依然是这个当前这个第二页的数据啊, 然后我们可以点击切换一下这个十条啊,十条的时候呢,他会这个重新去计算这个分页啊,然后同样的这个参数呢也会发生变化啊,从第零条到第十条啊, 然后呢我们这里呢需要做一个判断,就是呢在切换配置赛的时候呢,我们可以让他从 第一条数据开叉,也就是让他重新定位到这个第一页表根第一页。 ok, 我们可以给他在这个落地塔中呢长一个直, 正常了,我们可以默认不传,那配置 size 的时候呢,我们可以给他传一个一,那我们在 low the det 的时候呢,就需要判断一下, 用太炮来接受一下,如果太炮等于一,那我们就让这个当前这个页呢等于一,也就相当于让他来从第一页开始重新查询数据啊。 ok, 后边的话,嗯,后边的话呢,我们再说这个啊,一种删除的情况啊,删除之后呢,这个分页会啊该如何去处理啊?一个小的一个 注意事项啊,然后现在的话,这个表格的这个分页功能呢就已经完成了。好了,这节课就到这到这里。

view 环境搭建的第一步,安装 note view 依赖于 note gs, 所以要先安装那个 note gs 环境,下载地址就是 note gsdlrg 安装包下载后直接双击,然后就进行了安装,安装之后呢,然后就有可以输入 no 的命令, no 的杠 v, 然后可以查看 no 的版本信息。第二步,安装 npm 镜像, 因为默认恩田默认的镜像是国外的,使用起来速度比较慢,所以我们这里使用淘宝的。第三步,安装全局无异议,肯定缴手价。 呃,命令就用刚才的用。第四步,创建新项目,这个命令是 wild park, 然后是项目名。第五步, 安装项目依赖,刚才只是初始画了这个项目所需要的文件,然后现现在使用这个命令呢,将会下载相关的依赖包,用 npm install。 第六步,也是最后一步,然后出入 npm 状,第一杯就可以看到控制台打出来 acp locals, 默认端口是八零八零,然后进入浏览器可以看到这个效果。

各位同学大家好,这里是由 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。 行,这就是我们这一讲给大家讲东西啊,主要就讲了我们这个环境搭建的这么,呃,两种方式啊?两种方式,那这一讲我们就讲到这。

我们来部署一下前端,像 voe 编写的前端项目的一个环境配置,然后 voe 项目看一下,如果有这个 package 点结实,就表示他是用漏的 voe 框架进行搭建的前端项目。然后我们就要下载相应的 录的的一个版本,这个项目所使用的录的版本是幺二点四,我们就到他的官网去下载幺二点四对应的版本,可以下载电脑对应的六十四位操作系统的 msi。 这个文件下载了之后双击运行,他其实和点 exe 是一样的效果,双击运行,直接点击下一步,安装好了之后,我们 为你加 l 键调出 cmd 的秘密,那我们在这里漏斗杠微看一下是不是我们下载的版本何时无误之后,然后我们可以用 idea 打开我们的代码,打开了之后,这里看见了我们执行 录的里面 a p n p m 软件管理包管理工具, n p m install 当他下载对应的那个 load model 那个组件包,然后这里要等一会儿时间, 那看一下我们现在已经安装完成了,然后我们打开它的文件位置,这个 load models 已经下载安装完成,然后现在我们就要把它运行起来, n p m r d e v 运行出来之后,它会自动弹出浏览器的框, 然后等待它进行编译完成。 好,现在可以了,那这就是我们管理员端的一个网站后台的后台,这里有验证码,验证码,验证码没有出现是因为我们没有把 java 编写的接口代码给它启动,这里点击启动, 启动也要编一下,放在这里 查看它的一个启动运行的日志文件。好,这里显示是 brainboot 启动成功,然后我们在这里刷新一下, 刷新一下之后他的验证码就已就出现了,然后我们使用账号额的命进行登录,七四 c 七 y 七四 c 七 y, 那现在我们就已经登录到了后台,这就是我们用 v u e 框架编写的后端的一个环境的搭建,还有运行在这里,虽然没有在 idea 里面才看到它的 noodle model 这个包,但是其实在我们文件里面 他已经下载完成了的。好,这这一节就讲到这里。

看到前端这一个已经部署完毕了,因为我经常是忘了端口,然后看一下前端的端口是八零,八零这里没错啊,然后的话我这一边的话是直接把外网的映射进来,然后就是 我直接把域名添加进去,然后加一个外网音色就可以了。 好,这里的话基本上都能配置,所以的话这个还是比较方便的,然后前端这里的话就基本上可以了,然后后端这一边的话还要等一下,然后咱们先去配置一下这一个文件。 怎么配置呢?咱们打开这个后端,就按照这个位置来配置啊,进入后端文件夹,然后复制 是狂废上面的一个文件啊, 这里呢我就直接全选复制里面的文件,然后再重新新建一个空白文件,改名为 emv 点 py, 然后把刚刚的全部粘进来就可以了。这里的话他摸也不是用麦设口的,咱们改一下。这里改为麦设口啊,然后数据不地址 这里也是,这里改一下啊,这个位置我刚刚还没创建数据库,现在咱们创建一下数据库 啊,这里添加一下数据库 dva cro, 这里选择的话就不要选 u t f 杠八,选 u t f, 选 u t f 八 n b 四,然后提交一下就可以了。然后账号密码这里, 这里的话数据库名称是这个,我我们刚刚所创建的这个,然后密码的话呢是这里他会有一个密码的 保存一下关掉,那这里的话呢,这一份就已经配置好了。行,接下来咱们就去执行第五步啊,为什么不做第四步呢?因为在你安装的那个拍审的管理器的时候,他这一边导入项目的时候,他已经把这 一个依赖行情装好了,然后咱们就直接签你命令就行了,但签你命令的话呢,你是一二三四四步要做的,但你不可以直接复制粘贴过来,因为在宝塔上面是不可以这样直接 直接进来的。然后我们打开我们的目录,然后再打开后端的文件夹,在这里打开中端,然后我们 ls 一下。 啊,如果你直接这样去操作的话呢?他是会直接报错的啊,为什么呢?因为他这一个是在一个宝塔的虚拟环境里面去操作的,我清一下屏啊, 然后我们这边直接要输入的是什么呢?我们要输入的是有没有看到一个 a 六零三六的这一个,然后结尾是 v e m v 的这个就是一个,这一个 就是一个虚拟环境,咱们就直接打开这一个文件夹,直接输入这个名文件夹名字,然后 b i n 斜杠,然后把刚刚的命令复制粘贴过来就行了。 好,这里已经成功了,然后的话接下来是,嗯,到做这个我就直接复制后面了,按一下上,然后把上一条命令直接重复过来,因为我就懒得打字,直接粘贴,最后把最后的那个英文换掉就行了。 好,我们看到这里已经操作完毕,然后接下来的话就是初始画数据,然后这一边也是 这里可以了,然后的话就初始画那个 是数据,然后这里也是一样, 就是我们每次执行拍什么,你选 p 点 py 后面的话,你必须要先把这一个路径给他敲上去啊,就是必须要把这一个去敲上,敲上去这一段 啊,加了这一段的话你才可以运行成功了。然后呢咱们这一边已经操作完了。 好,接下来的话呢,咱们再要去再配置一下前端的一个目录下面的一个问题啊,因为你如果这里不配置的话,你是没办法正常使用的。这里啊 正常来说是域名以及端口的。我这里的话呢啊,有经验的人可能就知道我这一边的配饰可能会相对比较奇怪一点,我这边就直接是我自己的域名,来 这一边也是把我自己的域名配置上去好了这个位置,那基本上这个测试环境基本上我就部署在了宝塔上面。好,然后的话这一边去首页把拍摄项目管理器这一边是暂停的,然后咱们把它开起来, 这边开启了已经,然后看一下前端的,前端的这一个已经也在跑了,然后我们登录 一下我们的网站。 好了,现在已经开启,我们就登录一下我们自己的网站。好, 默认的账号密码呢是会在这里 superme, 然后密码的话是 me, 一二三四五六。好就可以了。我看一下这一个什么情况? 他这一边的话是告诉我没后端。后端这一边。哦,因为我刚刚改了配置,然后的话呢,改了配置之后,这一边是稍微要重启一下前端的,就是漏的项目这一个是需要重启一下, 我们先访问一下我们自己前端的。呃,一个后端的 api 接口啊 老师,好像还是前段没改,这里不错, 前端是八零八零,后端好像是要改后端。我是写错了,那个 后端写的是八零八零,后端写的应该是八千,在这个漏的项目的配置下面我们可以改一下,因为这一个绑定的 ip 地址的后面应该这里是八千,刚刚改错了, 然后把它再重新开启一下好了,现在改好了, 然后我们再重新登一下,这个是直接登录,登录我的网站,然后的话呢,直接打开八千端口就可以访问到这一个的 api, api 已经可以访问了, api 页面接口,然后的话这一边也已经成功可以打开了啊,但是我这一个前端是没有变异的,就是说我把开发环境是直接部署在服务器上面,这边账号密码是啊, 是排面,然后这里是一二三四五六 啊,你看到这一个就登录成功了,也就是说已经运行起来了啊,这边给大家体外说一下,就是我这个环境的话呢啊,是没有 我啊,我这一边给大家,我这边给大家说一下了,我这个环境呢是没有做到变异的,就是我这一边是直接再把 will 没变异放在上面直接看,然后的话呢, will 的 这个工具是直接能用的,所以的话呢,这个环境会比较奇怪,大家的话到时候部署的时候可以不用这样部署,因为我是用 vs 扣的啊,在线编编程的啊,这一个会对我来说比较方便一点, 这样不用太损耗自己内,这样的话不会太损耗自己本地的环境,也不用装太多东西啊,那基本上就可以了,这一边的话呢,官网也有,大家可以多去看一下 啊,希望想要开发张狗加 view 的同学们的话直接用就可以了啊。